The Perks of Sass

When learning about the frontend, new developers will inevitably come across Sass, a CSS preprocessor that stands for “Syntactically Awesome Stylesheets.”

Sass comes with several benefits, which are listed below:

Nesting

Sass offers the ability to nest selectors within each other. This means that child selectors (e.g. .button) will be limited to the scope of the parent selector (e.g. .class-one). Nesting reduces the repetition of parent selectors in CSS and therefore keeps code more concise and easy to read.

Note: if selectors refer to the same tag, then there should be no space between them. For example, if you had the tag

<p class="text essay"></p>

then your selector would translate to the following:

.text.essay {
   // Add styling here
}

In addition to selectors, a developer can nest CSS properties. For example, border-related properties can be nested under the single “border” property:

main.scss
border : {
  top: 3px solid blue;
  bottom: 3px solid blue;
}

This will be compiled to the following code in CSS:

main.css
border-top: 3px solid blue;
border-bottom: 3px solid blue;

Variables

Another benefit of Sass is the storage of values into variables, which ultimately creates DRYer code. You can use “$” to define a variable that you can use throughout your stylesheets.

main.scss
// Declare variables
$pink: #FFC0CB; 
$border-red: #FF0000;
.text {
    color: $pink;
    border: 1px solid $border-red;
}

The code will be compiled into the following CSS:

main.css
.text {
  color: #FFC0CB;
  border: 1px solid #FF0000;
}

The use of the variables makes code more concise and reusable throughout your stylesheets. It facilitates consistency of colors and themes as well.

Mixins

Mixins allow you to create sets of CSS code that are reusable throughout your website. In the code below, the @mixin is named ‘replace-text’ and it takes in arguments for an image and x and y coordinates. By setting the variables x and y to 10px each, you can reserve a default value in case there are no arguments.

The selector ‘.rainbow-icon’ incorporates this mixin with the ‘@include’ at-rule, which can take in any arguments that may apply.

main.scss
@mixin replace-text($image, $x: 10px, $y: 10px) {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;
  height: 300px;
  width: 400px;
background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}
.rainbow-icon {
  @include replace-text(url("https://images.immediate.co.uk/production/volatile/sites/4/2018/07/iStock_000007537979_Large-58a179e.jpg?webp=true&quality=90&resize=940%2C399"));
}

In CSS, this will look like the following:

main.css
.rainbow-icon {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;
  height: 300px;
  width: 400px;
  background-image: url("https://images.immediate.co.uk/production/volatile/sites/4/2018/07/iStock_000007537979_Large-58a179e.jpg?webp=true&quality=90&resize=940%2C399");
  background-repeat: no-repeat;
  background-position: 10px 10px;
}

With the styling applied to the .rainbow-icon div, the result will be the screenshot of the rainbow below:

index.html
<div>
    <div class="rainbow-icon"></div>
</div>

With the benefits of nesting, variables, and mixins, Sass allows developers to create cleaner, dynamic, and reusable code for styling throughout their websites. One great resource for testing out code is https://www.sassmeister.com/.

Sources:

@mixin and @include

www.codeacademy.com

Sass @mixin and @include