SASS Parent Selector

Last Updated : |  

SASS or LESS are preprocessors and allow you a lot of features, like compiling your CSS, so you have minimized CSS at the end.

But here we have much more options than just compiling the code, we can write in OOCSS, so Object Oriented in CSS. If you already use OOP in other languages you will like it here as well and as soon as you get used to it, maybe you will forget about CSS :)



How do I use the parent selector in SASS ?

Again and again the parent selector is needed if one prefers to be in  BEM Programmed and therefore since v.3.3 of SASS there is the possibility to access them (Ampersand). So we can also developers who do not like it, so the search in the editor can not use make tastier. As ? Quite simply by naming the parent exactly as the class itself, rather than always writing the same;) In most cases, you'll see this:

$parent: &;

But this does not make sense, because then I can let it be the same if I do not name it properly and make it harder for other developers. Therefore, every parent in the scope should be named as the class itself, unless it is a small project.



// SASS CODE
     0  .mbt-cookie {   1      $mbt-cookie: &;  2        3      &__blockelement1 {  4    5          width: 30%;  6    7          #{$mbt-cookie}__blockelement2 {  8            9              width: 90%;  10          }  11      }  12  } 

    // CSS CODE
       0  .mbt-cookie .mbt-cookie__blockelement1 {   1      width: 30%;  2  }  3    4  .mbt-cookie .mbt-cookie__blockelement1 .mbt-cookie__blockelement2  {   5      width: 90%;  6  } 


      Working in a team with SASS parent selector

      So now we would have achieved just that, that we no longer annoy developers. Now if another developer is looking for this class (or even an ID), he can simply switch to the dollar sign if nothing is found and then he will find something. We can now access and nest as often as we want because the parent is in the same named variable.

       SASS parent

      And if you think now great I prefer to use LESS, there is this possibility also, but a little different but almost the same principle, so look here once over:  Address LESS parent

      Your Comment

      * This fields are required, email don't publish
      You can use this tags: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>
      ?

      This field is optional
      Fill this field link your name to your website.

      Data entered in this contact form will be stored in our system to ensure the output of the comment. Your e-mail address will be saved to determine the number of comments and for registration in the future

      I have read the Privacy policy and Terms. I Confirm the submission of the form and the submission of my data.
      tnado SEO & AMP CMS © 2019 | All Rights Reserved
      Created with tnado SEO CMS