SCSS

Juyun Wang's picture

Sass (Syntactically Awesome Stylesheets) is a CSS3 extension language that contains two syntaxes: Sass (Syntactically Awesome Stylesheets) and SCSS (Sassy CSS). The former has an indented syntax and does not require parentheses or semicolons. Instead, it uses indentation to replace brackets. The latter is similar to the original CSS3 and requires parentheses and semicolons. However, there is no difference in functionality between the two. The choice of which syntax is completely a matter of personal preference, but note that some features do not have the same syntax. You can refer to the official documents before writing.

Sass adds features such as nested rules, variables, mixins, selector inheritance, etc. Below are some examples of SCSS features:

1. Variables
SCSS can define its own variables so that you can assign values like color code, font style and width size. In the past, if you wanted to modify a specific color, you would have to search for the value one by one and change its value. Now, you just need to modify the variable's value.

SCSS Example
CSS Example
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
 
body {
 font: 100% $font-stack;
 color: $primary-color;
} 
body {
 font: 100% Helvetica, sans-serif;
 color: #333;
}
 

2. Nesting
CSS does not have a visually-nested structure like HTML. However, SCSS supports nested CSS selectors written in a nested format like HTML. This can avoid duplicating selectors and also allows CSS frameworks to become more readable.

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

3. Mixins
You can reuse CSS fragments and even pass parameters to them like functions. The following is an example that creates a border-radius property of 10px by passing the value 10px to the mixin.

SCSS Example
CSS Example
@mixinborder-radius($radius) {
 -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
       -ms-border-radius: $radius;
          border-radius: $radius;
}
 
.box { @includeborder-radius(10px); }
.box {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px;
}

4. Inheritance
Inheritance allows you to inherit a selector's properties and be able to extend on those properties to reduce duplication. The following is an example of a parent selector message and its child selectors success and error that have different border-color properties.

SCSS Example
CSS Example
.message {
 border: 1pxsolid#ccc;
 padding: 10px;
 color: #333;
}
 
.success {
 @extend.message;
 border-color: green;
}
 
.error {
 @extend.message;
 border-color: red;
}
.message,.success,.error {
 border: 1pxsolid#cccccc;
 padding: 10px;
 color: #333;
}
 
.success {
 border-color: green;
}
 
.error {
 border-color: red;
}

5. Import
A CSS file can be split into multiple files for ease of maintenance. In the example below, we split the CSS into two files: _reset.scss and base.scss. Thus, when you need to modify properties of some basic CSS, you can simply open the file base.scss, make adjustments and compile the SCSS files into one CSS file.

SCSS Example
CSS Example
// _reset.scss
html,
body,
ul,
ol {
 margin: 0;
 padding: 0;
}
html, body, ul,ol {
 margin: 0;
 padding: 0;
}
 
body {
 font-size: 100% Helvetica,sans-serif;
 background-color: #efefef;
}
/* base.scss */
@import'reset';
 
body {
 font-size: 100% Helvetica,sans-serif;
 background-color: #efefef;
}

6. Operators
SCSS supports arithmetic operations such as addition, subtraction, multiplication, division and modulus. The following example demonstrates how to calculate the widths of article and aside.

SCSS Example
CSS Example
.container { width: 100%; }
article[role="main"] {
 float: left;
 width: 600px/960px*100%;
}
 
aside[role="complimentary"] {
 float: right;
 width: 300px/960px*100%;
}
 
.container {
 width: 100%;
}
 
article[role="main"] {
 float: left;
 width: 62.5%;
}
 
aside[role="complimentary"] {
 float: right;
 width: 31.25%;
}

Please refer to the official website for more SCSS features: http://sass-lang.com/