Sass Usage Guide

People who have learned CSS know that it is not a kindProgramming Language.

You can use it to develop webpage styles, but it cannot be programmed. That is to say, CSS is basically a designer tool, notProgramTool. In the eyes of programmers, CSS is a very troublesome thing. It has no variables and no conditional statements. It is a simple description of a row, which is quite troublesome to write.

Naturally, someone begins to add programming elements to CSS, called "CSS Preprocessor" (CSS Preprocessor ). Its basic idea is to use a special programming language to design webpage styles and then compile them into normal CSS files.

Among the various "CSS preprocessors", I like sass best and think it has many advantages. I plan to use it to write CSS later. The following is a summary of my usage for your reference during development. I believe it is useful to others.

========================================================== ====

Sass Usage Guide

Author: Ruan Yifeng

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 to have this articleArticleYou 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. 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 converted by the. SCSs file on the screen.Code. (Assume the file name is test .)

Sass test. SCSs

If you want to save the display result as a file, A. CSS file name is followed.

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 variable

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 the. CSS file is inserted, it is equivalent to the CSS import command.

@ Import "foo.css ";

5. Advanced usage

Conditional statements

@ If can be used to determine:

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 loop statements

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 );

}

 

From: http://news.cnblogs.com/n/146920/