UI/UX Design

Why you shouldn’t use the parent selector in Sass

I’ve been using Sass almost in every project for the past 5 years and I really like the flexibility of its mixins, the functions and placeholders. For example if I want to use the @media rule, I use a mixin which is similar to one in Bootstrap which gives me the possibility to write less code and will also reduce the number of places where I need to define different breakpoints:

  
  
section {
  background-color: #ffffff;
  @include respond-to(md) {
    background-color: #000000;
  }
}
  

 

Sass also has some functionalities which look like they’re useful but can also cause problems. One of them is the parent selector & .

Here is an example:

  
  
.section {
  &-top {}
  &-middle {
    &-right {}
  }
}
  

As you can see, I use the & symbol to select the parent. Once this code is compiled it will look like: .section-top {} , .section-middle {} and .section-middle-right {}

All this is cool because is decreasing the chance of duplicating class names but the problem is that you will also decrease the possibility to search for a specific class name and you will have to figure out the class name to be used in html based on the css. If the name of the parent is changing, all its children will be affected.

Because of this, I decided to only used the parent selector just when I really really need to and will not cause any confusion especially when is used together with &:before, &:first-child or any other pseudo-elements.

Here is the source of the respond-to() mixin

  
  
@mixin respond-to( $media ) {
 
  $screen-xs : 480px !default;
  $screen-sm : 768px !default;
  $screen-md : 992px !default;
  $screen-lg : 1300px !default;
 
 
  // usual stuff to match resolution intervals
  @if $media == xs {
    @media all and ( max-width: #{$screen-xs - 1} ) { @content; }
  }
 
  @else if $media == sm {
    @media all and ( min-width: $screen-xs ) and ( max-width:#{$screen-md - 1} ) { @content; }
  }
 
  @else if $media == md {
    @media all and ( min-width: $screen-md ) and ( max-width:#{$screen-lg - 1} ) { @content; }
  }
 
  @else if $media == lg {
    @media all and ( min-width: $screen-lg ) { @content; }
  }
 
 
 
  // special rules to match only max/min values
  @else if $media == upto_sm {
    @media all and ( max-width: #{$screen-sm - 1} ) { @content; }
  }
 
  @else if $media == upto_md {
    @media all and ( max-width: #{$screen-md - 1} ) { @content; }
  }
 
  @else if $media == upto_lg {
    @media all and ( max-width:#{$screen-lg - 1} ) { @content; }
  }
 
 
 
  @else if $media == xs_up {
    @media all and ( min-width: $screen-xs ) { @content; }
  }
 
  @else if $media == sm_up {
    @media all and ( min-width: $screen-sm ) { @content; }
  }
 
  @else if $media == md_up {
    @media all and ( min-width: $screen-md ) { @content; }
  }
}
  

Andy

UI/UX Designer & Front-end Engineer based in Dublin currently working @IBM.
I write about: UI/UX Design, Javascript, HTML, CSS, React JS and React Native

Add comment