snipt

Ctrl+h for KB shortcuts

Sass

Handy SASS mixins

// http://web-design-weekly.com/2013/05/12/handy-sass-mixins/
@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto)
	top: $top
	right: $right
	bottom: $bottom
	left: $left
	position: absolute

/* 
	// Usage 
    .abs
  		@include abs-pos(10px, 10px, 5px, 15px);

*/
https://snipt.net/embed/65be1f23c229c1d3ab68c2547cf6277f/
/raw/65be1f23c229c1d3ab68c2547cf6277f/
65be1f23c229c1d3ab68c2547cf6277f
sass
Sass
14
2019-08-19T19:21:07
True
False
False
May 23, 2013 at 10:53 PM
/api/public/snipt/62118/
handy-sass-mixins
<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> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</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">// http://web-design-weekly.com/2013/05/12/handy-sass-mixins/</span> </span><span id="L-2"><a name="L-2"></a><span class="k">@mixin</span><span class="nf"> abs-pos</span> <span class="p">(</span><span class="nv">$top</span><span class="o">:</span> <span class="no">auto</span><span class="o">,</span> <span class="nv">$right</span><span class="o">:</span> <span class="no">auto</span><span class="o">,</span> <span class="nv">$bottom</span><span class="o">:</span> <span class="no">auto</span><span class="o">,</span> <span class="nv">$left</span><span class="o">:</span> <span class="no">auto</span><span class="p">)</span> </span><span id="L-3"><a name="L-3"></a> <span class="na">top</span><span class="o">:</span> <span class="nv">$top</span> </span><span id="L-4"><a name="L-4"></a> <span class="na">right</span><span class="o">:</span> <span class="nv">$right</span> </span><span id="L-5"><a name="L-5"></a> <span class="na">bottom</span><span class="o">:</span> <span class="nv">$bottom</span> </span><span id="L-6"><a name="L-6"></a> <span class="na">left</span><span class="o">:</span> <span class="nv">$left</span> </span><span id="L-7"><a name="L-7"></a> <span class="na">position</span><span class="o">:</span> <span class="no">absolute</span> </span><span id="L-8"><a name="L-8"></a> </span><span id="L-9"><a name="L-9"></a><span class="cm">/* </span> </span><span id="L-10"><a name="L-10"></a> <span class="cm">// Usage </span> </span><span id="L-11"><a name="L-11"></a> <span class="cm">.abs</span> </span><span id="L-12"><a name="L-12"></a> <span class="cm">@include abs-pos(10px, 10px, 5px, 15px);</span> </span><span id="L-13"><a name="L-13"></a> </span><span id="L-14"><a name="L-14"></a><span class="o">*/</span> </span></pre></div> </td></tr></table>
SASS, SCSS, mixin