CSS pre-compiler: Sass (Getting Started), faster front-end development, and csssass

CSS pre-compiler: Sass (Getting Started), faster front-end development, and csssass

Sass extends CSS3 and adds features such as rules, variables, ing, selector, and inheritance. Sass generates well-formatted CSS code, which is easy to organize and maintain.

SASS is an extension of the syntax of CSS3 (stacked style sheet). It can use functions such as nesting, blending, and selecting sub-inheritance to write Stylesheet more efficiently and elastically. In the end, Sass will compile and translate valid CSS for browsing. That is to say, its syntax is not very easy for the browser to recognize (although it is similar to the CSS syntax, it is almost the same ), because it is not a standard CSS format, dynamic variables can be used in its syntax, so it is more like a Very Simple Dynamic Language. Sass entry api syntax

1.[Sass] common compilation errors

When compiling Sass code, you often encounter some errors to make compilation fail. Such errors are also caused by system errors, but most of them are caused by human errors. The most common error is caused by character compilation. Is "GBK" encoding supported during Sass compilation. Therefore, when creating an Sass file, you need to set the file encoding to "UTF-8 ". Another error is caused by Chinese characters in the path. We recommend that you do not use Chinese characters for file naming or file directory naming in projects. As for compilation failures caused by human errors, specific descriptions are provided during the compilation process. You can modify the compilation errors according to the error information provided by the compiler.

2. [Sass] different style output methods

-Nested output mode: nested-expanded output mode: expanded-compact-compressed output mode: compressed

3. [Sass] declaring Variables

 

 

 

4. [Sass] common variables and default Variables

  Global Variables

 

 

Default variable 

5. Call the [Sass] variable

After the variable is declared in Sass, you can call the variable as needed. The method to call variables is also very simple. . Btn-primary {
Background-color: $ btn-primary-bg;
Color: $ btn-primary-color;
Border: 1px solid $ btn-primary-border ;}

6. [Sass] local variables and global variables

$ Color: orange! Default; when in the local range (inside the selector, within the function, in the Mixed Macro ...) when a global variable is declared, the local variable becomes the shadow of the global variable. Basically, local variables only overwrite global variables in a local range.

7. [Sass] nesting-Selector nesting

-Selector nesting-attribute nesting-pseudo-class nesting

 

 

8. [Sass] nesting-attribute nesting

. Box {
Border :{
Top: 1px solid red;
Bottom: 1px solid green;
}}

9. [Sass] nesting-pseudo-class nesting

 

 

 

10. [Sass] hybrid macro-declare a hybrid macro

 

 

 

 

11. [Sass] hybrid macro-call a hybrid macro

Matched with a keyword "@ include" to call the declared parameters of the hybrid macro-pass a parameter with a value. box {
@ Include border-radius (50%);} parameters of the hybrid macro -- pass multiple parameters @ mixin center ($ width, $ height) {@ include center (500px, 300px );

12. [Sass] extension/Inheritance

In Sass, it also has an inheritance class style code block. In Sass, the keyword "@ extend" is used to inherit the existing class style blocks, so as to inherit the code. As follows:

 

 

13. [Sass] placeholder % placeholder

The placeholder % placeholder in Sass is a very powerful and practical feature, which is also a feature I like very much. It can replace the code redundancy caused by the previous base class in CSS. Because the code declared by % placeholder is not called by @ extend, no code is generated. Let's look at a demo:

 

 

14. [Sass] hybrid macro VS inherits VS placeholders

  Personal suggestion:If your code block involves variables, we recommend that you use a hybrid macro to create the same code block. Personal suggestion:If your code block does not require any variable parameters and a base class already exists in the file, we recommend that you use Sass inheritance.

 

 

15. [Sass] interpolation #{}

When you want to set the attribute value, you can use a string to insert it. # {} Syntax is not available everywhere, and you cannot call it in mixin. 

 

 

16. [Sass] comments

1. Similar to the CSS annotation method, start with "/*", end with "*/" 2. Similar to the JavaScript annotation method, use "//" to distinguish between the two, the former will be displayed in the compiled CSS, and the latter will not be displayed in the compiled CSS,

17. [Sass] Data Type

 

 

 

[Sass] string 

 

 

[Sass] Value List

 

 

 

18. [Sass operation] addition --------------- basic features of Sass-operation ----------

. Box {
Width: 20px + 8in;} compiled result. box {
Width: 788px;} an error is reported during compilation for different types of units. [Sass operation] Subtraction. Content {
Width: $ full-width-$ sidebar-width ;} [Sass operation] MultiplicationThe multiplication operation in Sass is slightly different from the addition and subtraction operations described above. Although he can also support multiple units (such as em, px, %), it is problematic when one unit declares two values at the same time. . Box {width: 10px * 2px;} error. box {
Width: 10px * 2;} Correct [Sass operation] Division. Box {
Width: (100px/2);} "/" cannot be used separately [Sass operation] numeric operation. Box {
Width: (220px + 720px)-11*20)/12 ;} [Sass operation] color operationColor: #010203*2; color: #010203 + #040506; [Sass operation] character operation

 

 

Note: If a string with quotation marks is added with a string without quotation marks (that is, the string with quotation marks is on the left side of the + symbol), the result is a string with quotation marks. Similarly, if a string without quotation marks is added with a string with quotation marks (the string without quotation marks is on the left side of the + symbol), the result is a string without quotation marks. For example: