#It's Frontend Friday - How SASS can make your project better

One way to make life easier here is SASS (Syntactically Awesome Style Sheets). SASS is a CSS preprocessor script language that extends CSS with functionalities such as variables, mixins or operators. Furthermore, the use of SASS can contribute to a better readability of the code.

SASS is available in two syntax variants, which are characterized by different file endings *.scss and *.sass. The latter is less common, indent-based and does not use brackets or semicolons. In the following, the .scss syntax is used for all examples.

Variables

Variables provide reusable values, which can significantly unify the style of the application, reduce redundancies, keep the code cleaner and more organized, and also make it easier to make changes to the color palette, font or other styling elements.

Variables can easily be defined in styles.scss or in a separate file (e.g. variables.scss) which can then be imported into styles.scss or wherever it is needed to access the variables.

$primary-color: #00759e;
$success-color: #28a745;
$error-color: #dc3545;
$text-color: #ffffff;
$border-color: #cccccc;

// Verwendung 
.h1 { color: $primary-color}

@mixin

A mixin is reusable code that can be integrated into other selectors. Mixins can accept parameters to dynamically change values and thus enable a simple definition of recurring elements.

// Mixin
@mixin message($bg-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 5px 5px;
  font-size: 14px;
}

//Verwendung des Mixin für die Defenition von Buttons
.div{
  &.standard {
    @include message($primary-color);
  }

  &.warning{
    @include message($warning-color);
  }

  &.error {
    @include message($error-color);
  }
}

// Verwendung in der Komponente
<div>
  <div class="btn standard">This is a Standard Message</div>
  <div class="btn success">This is a Warning Message</div>
  <div class="btn error">Thi is an Error Message</div>
 </div>

@extend

@extend makes it possible to adopt the style from another class and is best described as inheritance. This prevents redundancies and improves maintainability. Inheritance in SASS makes it possible to adopt common styles from an existing (base) class using the @extend directive. This allows multiple selectors to share a style without having to write redundant code, which makes the stylesheets shorter and easier to maintain.

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: $primary-color;
}

.button-submit  {
  @extend .button-basic;
  background-color: $success-color;
  color: white;
}

Nesting

Nesting is a feature that primarily improves readability and prevents identical lines of code by nesting style rules that can be assigned to a parent element.

// SCSS
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }

// CSS
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Operators

SASS supports a range of operators. These include mathematical operators (+, -, *, /, %), comparison operators (==, !=, >, =, <=), logical operators (and, or, not) and string operators (concatenation (+) and subtraction (-)). These operators make it very easy to adapt a stylesheet dynamically. A big advantage is that you can set the style based on conditions, as shown here in the example code.

@mixin spacing($padding, $margin) {
      @if ($padding > $margin) {
          padding: $padding;
      } @else {
          padding: $margin;
      }  
  }

Functions

Functions allow calculations or formulas to be used repeatedly within the project. This also improves the readability of the code, prevents redundancies and improves the maintainability of the code. A function can accept arguments and has exactly one return value.

@function sum($number1, $number2) {
  @return $number2 + $number2
}

.box1 {
  padding: sum(5px, 10px);
}

 

Think about whether you would benefit from SASS for your next project. By the way, our Living style guide also uses SASS ;)¹