SASS Usage Guide

1. What is SASS?

SASS is a CSS development tool that provides a lot of convenient writing methods, greatly saving the designer's time, making CSS development easy and maintainable.

This article summarizes the main usage of SASS. My goal is that, with this article, you do not need to go to the official documentation for routine use.

Ii. Installation and Use

2.1 installation

SASS is written in Ruby, but its syntax is irrelevant. If you do not understand Ruby, you can still use it. You only need to install Ruby before installing SASS.

Suppose you have installed Ruby, and then enter the following command in the command line:

Gem install sass

Then, you can use it.

2.2 Use

The SASS file is a common text file, which can directly use the CSS syntax. The file suffix is. scss, which means Sassy CSS.

The following command can display the css code converted from the. scss file on the screen. (Assume the file name is test .)

Sass test. scss

If you want to save the display result as a file, then follow the file name of .css.

Sass test. scss test.css

SASS provides four compilation style options:

* Nested: nested indent css code, which is the default value.

* Expanded: No indented, extended css code.

* Compact: css code in concise format.

* Compressed: the compressed css code.

In the production environment, the last option is generally used.

Sass -- style compressed test. sass test.css

The SASS official website provides an online converter. You can run the following examples here.

III. Basic usage

3.1 Variables

SASS allows variables. All variables start with $.

$ Blue: #1875e7;

Div {
Color: $ blue;
}

If the variable needs to be embedded in a string, it must be written in.

$ Side: left;

. Rounded {
Border-# {$ side}-radius: 5px;
}

3.2 computing functions

SASS allows 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;
}

Can be written:

Div {
Hi {
Color: red;
}
}

Attributes can also be nested:

P {
Border-color: red;
}

Can be written:

P {
Border :{
Color: red;
}
}

Note: The border must be followed by a colon.

3.4 annotations

SASS has two annotation styles.

The standard CSS comments/* comment */are retained to the compiled files.

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

Iv. code reuse

4.1 inheritance

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

. Class1 {
Border: 1px solid # ddd;
}

To Inherit class1, use the @ extend command:

. Class2 {
@ Extend. class1;
Font-size: 120%;
}

4.2 Mixin

Mixin is a bit like a C-language macro (macro). 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;
}

The power of mixin is that you can specify parameters and default values.

@ Mixin left ($ value: 10px ){
Float: left;
Margin-right: $ value;
}

Add parameters as needed:

Div {
@ Include left (20px );
}

4.3 color functions

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 insert a file

@ Import command, used to insert external files.

@ Import ("path/filename. scss ");

If you insert a. css file, it is equivalent to the css import command.

@ Import "foo.css ";

5. Advanced usage

5.1 condition statements

@ If can be used to determine:

P {
@ If 1 + 1 = 2 {border: 1px solid ;}
@ If 5}

The @ else command is also supported:

@ If lightness ($ color)> 30% {
Background-color: #000;
} @ Else {
Background-color: # fff;
}

5.2 loop statement www.2cto.com

SASS supports the for Loop:

@ For $ I from 1 to 10 {
. Border-# {$ I }{
Border: # {$ I} px solid blue;
}
}

The while loop is also supported:

$ I: 6;

@ While $ I> 0 {
. Item-# {$ I} {width: 2em * $ I ;}
$ I: $ I-2;
}

The each command is similar to:

@ Each $ member in a, B, c, d {
. # {$ Member }{
Background-image: url ("/image/registry.member#.jpg ");
}
}

5.3 User-Defined Functions

SASS allows users to write their own functions.

@ Function double ($ n ){
@ Return $ n * 2;
}

# Sidebar {
Width: double (5px );
}

(End)

 

Author: Ruan Yifeng