Anyone who has studied CSS knows that it is not a programming language.
You can use it to develop web page styles, but you can't program with it. In other words, CSS is basically a designer's tool, not a programmer's tool. In the eyes of programmers, CSS is a very troublesome thing. It has no variables and no conditional statements. It is just a simple description line by line, which is very cumbersome to write.

1, What is SASS

SASS is a CSS development tool, which provides many convenient writing methods, greatly saves the designer's time, and makes the development of CSS simple and maintainable.

2, Installation and use

2.1 installation
SASS is written in ruby, but there is no relationship between the syntax of the two. If you don't understand ruby, you can still use it. You just have to install Ruby before you install SASS.
Assuming you have installed Ruby, then enter the following command on the command line:

　gem install sass

Then, you can use it.
2.2 use
SASS file is an ordinary text file, which can directly use CSS syntax. The file suffix is scss, which means Sassy CSS.
The following commands can be displayed on the screen css code converted from scss file. (suppose the file name is test.)

　　sass test.scss

If you want to save the display results to a file, follow it with another one css file name.

　sass test.scss test.css //Convert scss code into css code

SASS provides four compilation style options:

　　* nested: Nested indented css Code, which is the default.

　　* expanded: Not indented or expanded css code.

　　* compact: Concise format css code.

　　* compressed: Compressed css code.

In production environments, the last option is generally used.

　　sass --style compressed test.sass test.css

You can also let SASS monitor a file or directory. Once the source file changes, it will automatically generate the compiled version.

　// watch a file

　　sass --watch input.scss:output.css

　　// watch a directory

　　sass --watch app/sass:public/stylesheets

3, Basic usage

3.1 variables

SASS allows variables, all of which start with $.

　　$blue : #1875e7;　

　　div {
　　　color : $blue;
　　}

If the variable needs to be embedded in the string, it must be written in #{}.

$side : left;

　　.rounded {
　　　　border-#{$side}-radius: 5px;   //border-left-radius:5px
　　}

3.2 calculation function

SASS allows the use of expressions in Code:

body {margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

3.3 nesting
SASS allows selector nesting. For example, the following CSS code:

div h1 {
　　　　color : red;
　　}

//It can be written as:

div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}

Attributes can also be nested. For example, the border color attribute can be written as:

p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

Note that the border must be followed by a colon.

Within a nested code block, you can use & to refer to the parent element. For ex amp le, a:hover pseudo class can be written as:

a {
　　　　&:hover { color: #ffb3ff; }
　　}

3.4 notes

SASS has two annotation styles.

Standard CSS comments / * comment * /, will be retained in the compiled file.

Single line comment / / comment, which is only kept in SASS source file and omitted after compilation.

Add an exclamation point after / * to indicate that this is an "important note". Even if it is compiled in compressed mode, this line of comment will be retained, which can usually be used to declare copyright information.

　　/*!
　　　　Important notes!
　　*/

4, Code reuse

4.1 succession

SASS allows one selector to inherit from another. For example, existing class1:

　　.class1 {
　　　　border: 1px solid #ddd;
　　}

class2 to inherit class1, use the @ extend command:

　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

4.2 Mixin

Mixin is a bit like the macro of C language. It is a reusable code block.

Use the @ mixin command to define a code block.

　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

Use the @ include command to call this mixin.

div {
　　　　@include left;
　　}

mixin is powerful in that it can specify parameters and default values.

　　@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}

When using, add parameters as needed:

　　div {
　　　　@include left(20px);
　　}

The following is an example of mixin, which is used to generate browser prefix.

　　@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
　　}

When using, it can be called as follows:

#navbar li { @include rounded(top, left); }

#footer { @include rounded(top, left, 5px); }

4.3 color function

SASS provides some built-in color functions to generate a series of colors.

　　lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c

4.4 inserting documents

@The import command is used to insert external files.

　　@import "path/filename.scss";

If yes is inserted css file is equivalent to the import command of css.

　　@import "foo.css";

5, Advanced usage

5.1 conditional statements

@if can be used to judge:

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

The @ else command is also supported:

　　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

5.2 circular statements

SASS supports for loops:

　　@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

while loops are also supported:

　　$i: 6;

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

The function of each command is similar to that of for:

@each KaTeX parse error: Expected '}', got '#' at position 29: ...b, c, d { 　　　　.#̲{member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

Custom function 3.5

SASS allows users to write their own functions.

　　@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　width: double(5px);
　　}