[CSS] SASS/SCSS

SASS is a Syntactically Awesome Style Sheets. It makes CSS to a programming language.

SCSS is a Sassy CSS.

Currently, the SCSS's syntax is mainly used. Although there are other projects with similar functions, SCSS is recently a trend to use as a standard.

 

In this posting, I will explain the usage of the SCSS. I'll post how to compile SCSS and use it in the projects next time.

You can use it in the online IDE if you want.

Let's Start~!

 

Use SCSS

Make an HTML file for example.

<div class="container">
  <div class="section1">
    <h1>First Title</h1>
  </div>
  <div class="section2">
    <h1>Second Title</h1>
  </div>
</div>

And, make an SCSS file styles.scss and link it in the HTML file.

.container {
  width: 500px;
  height: 500px;
  border: 3px solid black;
}

As you can see, almost the same as CSS.

Now, let's dig into the SCSS!!

Module System and Variables

Let's create new file _variables.scss for containing variables. Of course, you can put them in one file, but it is not recommended.

If you add prefix _(underscore) to a filename, these files will not be compiled.

$colorRed: tomato;
$colorGreen: teal;
$colorBlue: steelblue;

$fontSizeLarge: 54px;

I defined some variables.

If you want to use these variables in the styles.scss, you need to import it.

Let's use this variable to enlarge in our title.

@import 'variables'

...

h1 {
  font-size: $fontSizeLarge;
}

When you import other modules, you don't need to add _(underscore).

Nesting

Similar to HTML, you can hierarchically style elements using nesting.

...

.section1 {
  h1 {
    color: $colorRed;
  }
}

.section2 {
  h1 {
    &:hover {
      color: $colorBlue;
    }
  }
}

I set the red color only to the h1 element in the section1 class, and I set the color blue only to the h2 element in the section2 class when I hover the mouse pointer above it.

& symbol means element itself.

Operators

SCSS allows us to use math operators.

...
<div class="section3">
  <button>Button1</button>
  <button>Button2</button>
</div>

...

button {  
  width: 20px + 50px * 2;
  height: 100px - 70px;
}

Extend/Inheritance

This feature is like a class. It allows us to put together similar styling and it helps to reuse code.

It can't have arguments and don't work with media queries. Moreover, if it is used with a nested code, it can extend the unintended code.

Create SCSS file _extend.scss.

%coloredButton {
  width: 120px;
  height: 30px;  
  border-radius: 5%;
  color: $colorGreen;
  font-weight: 900;
}

Now, use this in the styles.scss.

@import 'extend';

button {
  @extend %coloredButton
}

Mixins

Mixins is like a function in programming languages.

It can allow us to reuse a module and it can have parameters.

Let's modify the button with this.

Add some elements to the HTML file.

...
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul>

Create SCSS file _mixins.scss.

@mixin myList($param) {
  font-size: 22px;
  
  @if $param == 'even' {
    color: $colorGreen;
  } @else if $param == 'odd' {
    color: $colorBlue;    
  } @else {
    color: $colorRed;
  }  
}

Modify styles.scss file to apply our mixins.

@import 'mixins';

...

ul {
  li:nth-child(even) {
    @include myList('even');
    font-weight: 400;
  }
  li:nth-child(odd) {
    @include myList('odd');    
    font-weight: 900;
  }
}

The common part is separated into mixins and the independent part is had its own.

In addition, Mixins allows the conditional statement if-else as well.

 

Finally, let's find out about a media query for a responsive web.

Add an element for checking the responsive result.

...
<div class="section4"></div>

Add mixins for responsive web into _mixins.scss.

@mixin myResponsive($size) {
  @if $size == 'small' {
    @media screen and (max-width: 700px) {
      @content      
    }
  } @else if $size == 'medium' {
    @media screen and (min-width: 701px) and (max-width: 1000px) {
      @content
    }
  } @else if $size == 'large' {
    @media screen and (min-width: 1001px) {
      @content
    }
  }
}

Use this in the styles.scss.

...

.section4 {
  width: 100%;
  height: 50px;
  @include myResponsive('small') {
    background-color: salmon;
  }
  @include myResponsive('medium') {
    background-color: goldenrod;
  }
  @include myResponsive('large') {
    background-color: violet;
  }
}

The inside of the using mixins codes will become @content. In this example, the background-color property will become @content.

Try to resize the web browser, the color will be changed as responsive.