https://aripd.com/tags/preprocessor/ Recent content in Preprocessor on ARI Systems Hugo en-us ARI Systems Sat, 16 May 2026 06:19:44 +0000 https://aripd.com/blog/sass/ Fri, 22 Feb 2019 00:00:00 +0000 https://aripd.com/blog/sass/ <h2 id="css-common-terminologies">CSS Common Terminologies <a href="#css-common-terminologies" class="permalink"><i class="bi bi-link-45deg"></i></a></h2><div class="code-container"> <div class="code-block"> <div> <div class="code-copy" style="float: right"> <a class="icon-link icon-link-hover link-opacity-50 link-opacity-100-hover" href="#" aria-label="Copy code">Copy</a> </div> </div> <div class="highlight"><div style="color:#000;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"> <table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;"> <pre tabindex="0" style="color:#000;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1 </span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2 </span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3 </span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4 </span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5 </span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6 </span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7 </span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">8 </span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">9 </span></code></pre></td> <td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%"> <pre tabindex="0" style="color:#000;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-sass" data-lang="sass"><span style="display:flex;"><span># Rule Set </span></span><span style="display:flex;"><span>.button { # Selector </span></span><span style="display:flex;"><span> <span style="color:#5317ac">&amp;</span>:hover { # Pseudo Class </span></span><span style="display:flex;"><span> &amp;<span style="color:#00538b">::</span>after { # Pseudo Element </span></span><span style="display:flex;"><span> padding<span style="color:#00538b">:</span> <span style="color:#0000c0">8</span><span style="color:#005a5f">px</span>; # Property<span style="color:#00538b">:</span> Value </span></span><span style="display:flex;"><span> margin<span style="color:#00538b">:</span> auto; # Decleration </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>}</span></span></code></pre></td></tr></table> </div> </div> </div> </div>