Frontend

Sass basics

 · 6 mins read

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

Once Sass is installed, you can compile your Sass to CSS using the sass command. You’ll need to tell Sass which file to build from, and where to output CSS to.

For example, running sass input.scss output.css from your terminal would take a single Sass file, input.scss, and compile that file to output.css.

Features

  1. Fully CSS-compatible
  2. Language extensions such as variables, nesting, and mixins
  3. Many useful functions for manipulating colors and other values
  4. Advanced features like control directives for libraries
  5. Well-formatted, customizable output

Syntax

There are two syntaxes available for Sass.

  1. scss, an extension of the syntax of CSS
  2. sass, using indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties

Basic usage

Here we use take scss for example, which is very much like css.

Referencing Parent Selectors: &

You can explicitly specify where the parent selector should be inserted using the & character

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

is compiled to

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
 }

Variables

Sass uses the $ symbol to make something a variable

$primary-color: #333;
body {
    color: $primary-color;
}

Interpolation: #{}

You can also use SassScript variables in selectors and property names using #{} interpolation syntax:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

is compiled to

p.foo {
  border-color: blue; }

Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
}

is compiled to

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

nav li {
  display: inline-block;
}

Partials

purpose:

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain.

format:

A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss

how-to-use:

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

Import

problem with import of original CSS:

Each time you use @import in CSS it creates another HTTP request

//_button.scss
button {
    background-color: rgb(112, 222, 255);    
}

//App.scss
@import 'button';

/* ... */

is compiled to

button {
  background-color: #70deff; }

Mixins

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

is compiled to

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Extend/Inheritance

Using @extend lets you share a set of CSS properties from one selector to another.

A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean.

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

// This CSS will print because %message-shared is extended.
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

is compiled to

.message, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }

The magic happens in the generated CSS, where each of these classes will get the same CSS properties as %message-shared. This helps you avoid having to write multiple class names on HTML elements.

Operators

Sass has a handful of standard math operators like +, -, *, /, and %.

Comments: /* */ and //

Sass supports standard multiline CSS comments with /* */, as well as single-line comments with //. The multiline comments are preserved in the CSS output where possible, while the single-line comments are removed.

—

Control Directives & Expressions

@if

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

is compiled to

p {
  border: 1px solid; }


p {
  color: green; }

@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

is compiled to

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@each

The @each directive usually has the form @each $var in <list or map>.

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

is compiled to

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

is compiled to

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

Built-in Functions

functions

Function Directives

It is possible to define your own functions in sass and use them in any value or script context.

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

is compiled to

#sidebar {
  width: 240px; }

@extend vs. @include

  1. @mixin can take parameters which acts like a function.
  2. @extend can’t not be used in @media directive.
  3. @mixin do not merge selector, while @extend does.

From my point of view, unless some components is surely the parent and child relationship, you should use @mixin instead of @extend in most cases.

Take bootstrap 4.0,0 for example, by searching ‘extend’ from the source code, you can only find 16 matches across 6 files. However, you should find 204 matches across 51 files when you search ‘include’.

reference:

  1. sass