snipt

Ctrl+h for KB shortcuts

Sass

Slanted text highlight (marker-like) effect SASS mixin

1
2
3
4
5
6
//Adapted for non-italic 13px Arial text
@mixin slanted-highlight($bgcolor, $element: span) {
#{$element} {background:$bgcolor;}
#{$element}:before {border-bottom:15px solid $bgcolor; border-left:4px solid transparent; content:""; display:inline-block; height:0; left:-4px; top:3px; width:0; position:relative;}
#{$element}:after {border-top:15px solid $bgcolor; border-right:4px solid transparent; content:""; display:inline-block; height:0; left:4px; top:3px; width:0; position:relative;}
}
https://snipt.net/embed/ae254f7d85894ac8b455f9914c0195a1/
/raw/ae254f7d85894ac8b455f9914c0195a1/
ae254f7d85894ac8b455f9914c0195a1
sass
Sass
6
2016-12-26T07:25:16
True
False
True
Jan 27, 2013 at 08:03 AM
/api/public/snipt/54583/
slanted-text-highlight-marker-like-effect-sass-mixin
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="c1">//Adapted for non-italic 13px Arial text</span> </span><span id="L-2"><a name="L-2"></a><span class="k">@mixin</span><span class="nf"> slanted-highlight</span><span class="p">(</span><span class="nv">$bgcolor</span><span class="o">,</span> <span class="nv">$element</span><span class="o">:</span> <span class="n">span</span><span class="p">)</span> <span class="err">{</span> </span><span id="L-3"><a name="L-3"></a><span class="na">#{$element}</span><span class="err"> </span><span class="na">{background</span><span class="o">:</span><span class="nv">$bgcolor</span><span class="err">;}</span> </span><span id="L-4"><a name="L-4"></a><span class="na">#{$element}</span><span class="o">:</span><span class="n">before</span> <span class="err">{</span><span class="no">border-bottom</span><span class="o">:</span><span class="mi">15</span><span class="kt">px</span> <span class="no">solid</span> <span class="nv">$bgcolor</span><span class="err">;</span> <span class="no">border-left</span><span class="o">:</span><span class="mi">4</span><span class="kt">px</span> <span class="no">solid</span> <span class="no">transparent</span><span class="err">;</span> <span class="no">content</span><span class="o">:</span><span class="s2">&quot;&quot;</span><span class="err">;</span> <span class="no">display</span><span class="o">:</span><span class="no">inline</span><span class="o">-</span><span class="no">block</span><span class="err">;</span> <span class="no">height</span><span class="o">:</span><span class="mi">0</span><span class="err">;</span> <span class="no">left</span><span class="o">:-</span><span class="mi">4</span><span class="kt">px</span><span class="err">;</span> <span class="no">top</span><span class="o">:</span><span class="mi">3</span><span class="kt">px</span><span class="err">;</span> <span class="no">width</span><span class="o">:</span><span class="mi">0</span><span class="err">;</span> <span class="no">position</span><span class="o">:</span><span class="no">relative</span><span class="err">;}</span> </span><span id="L-5"><a name="L-5"></a><span class="na">#{$element}</span><span class="o">:</span><span class="n">after</span> <span class="err">{</span><span class="no">border-top</span><span class="o">:</span><span class="mi">15</span><span class="kt">px</span> <span class="no">solid</span> <span class="nv">$bgcolor</span><span class="err">;</span> <span class="no">border-right</span><span class="o">:</span><span class="mi">4</span><span class="kt">px</span> <span class="no">solid</span> <span class="no">transparent</span><span class="err">;</span> <span class="no">content</span><span class="o">:</span><span class="s2">&quot;&quot;</span><span class="err">;</span> <span class="no">display</span><span class="o">:</span><span class="no">inline</span><span class="o">-</span><span class="no">block</span><span class="err">;</span> <span class="no">height</span><span class="o">:</span><span class="mi">0</span><span class="err">;</span> <span class="no">left</span><span class="o">:</span><span class="mi">4</span><span class="kt">px</span><span class="err">;</span> <span class="no">top</span><span class="o">:</span><span class="mi">3</span><span class="kt">px</span><span class="err">;</span> <span class="no">width</span><span class="o">:</span><span class="mi">0</span><span class="err">;</span> <span class="no">position</span><span class="o">:</span><span class="no">relative</span><span class="err">;}</span> </span><span id="L-6"><a name="L-6"></a><span class="err">}</span> </span></pre></div> </td></tr></table>
"sass mixin", sass

Bash

SASS watch changes script for Windows (save in .bat file and run)

sass --watch "style.scss":"style.css"
https://snipt.net/embed/77e83aeeaa6abe96bfcac18e763f222c/
/raw/77e83aeeaa6abe96bfcac18e763f222c/
77e83aeeaa6abe96bfcac18e763f222c
bash
Bash
1
2019-05-23T00:19:54
True
False
False
Feb 12, 2013 at 01:16 PM
/api/public/snipt/48431/
sass-watch-changes-script-for-windows-save-in-bat-file-and-run
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>sass --watch <span class="s2">&quot;style.scss&quot;</span>:<span class="s2">&quot;style.css&quot;</span> </span></pre></div> </td></tr></table>
css, ruby, sass, webdev, windows