CSS pre-compiler: Sass (Getting started), faster front-end development

Sass extends the CSS3, adding rules, variables, mixes, selectors, inheritance, and more. Sass produces well-formatted CSS code that is easy to organize and maintain.

Sass is an extension of the syntax of CSS3 (cascading style sheets), which can use nested, mixed, and sub-inheritance functions to write stylesheet more effectively and flexibly. Sass will eventually compile a legitimate CSS so that browsing can be used, that is, its own syntax is not too easy for the browser to recognize (although it and CSS syntax very much like, almost the same), because it is not a standard CSS format, within its syntax can use dynamic variables, etc. So it's more like a very simple dynamic language. Sass Getting Started API syntax

1.[Sass] Common compilation errors

When compiling Sass code, you will often encounter some errors to make the compilation fail. Such errors are caused by the system, but most are caused by human negligence. One of the most common mistakes is that character compilation is the cause. In the process of compiling the sass, it is not supported by "GBK" encoding. So when you create a Sass file, you need to set the file encoding to "Utf-8". Another error is caused by the Chinese characters in the path. It is recommended that you do not use Chinese characters for file naming or file directory naming in your project. As for the human error caused by the compilation failure, in the compilation process will have specific instructions, you can according to the compiler provides error information to make corresponding changes.

2.[sass] The output method of different style

styles

-Nested output mode nested-expansion output mode expanded-Compact output mode compact-compression output mode compressed

3.[sass] declaring variables

4.[sass] Common variables and default variables

Global Variables

Default Variables

5.[sass] Variable invocation

After you declare a variable in Sass, you can call the variable where you want it. The method of calling 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 a local scope (inside selectors, inside a function, in a mixed macro ... When declaring a variable that already exists in the global scope, the local variable becomes the shadow of the global variable. Basically, a local variable overrides a global variable only at a local scope.

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] Mixed macros-declaring mixed macros

11.[sass] Mixed macro-call mixed macro

Match a keyword "@include" to invoke the arguments of a well-declared hybrid macro macro--pass a parameter with a value. Box {
@include Border-radius (50%);} Mixed macro Parameters--pass multiple parameters @mixin Center ($width, $height) {@include Center (500px,300px);

12.[sass] Extension/inheritance

In Sass, it also has inheritance, which is also the style code block in the inheriting class. In Sass, inheritance of code is achieved by inheriting the existing class style block by the keyword "@extend". As shown below:

13.[sass] Placeholder%placeholder

The placeholder%placeholder feature in Sass is a powerful, useful feature that I really like. He can replace the case of code redundancy caused by the base class in the previous CSS. Because the code declared by%placeholder does not generate any code if it is not called by the @extend. To see a demo:

14.[sass] Mixed macro vs inheritance vs Placeholder

Personal advice:If you have variables involved in your code block, it is recommended that you use a mixed macro to create the same block of code. Personal advice:If your code block does not require any variable arguments, and a base class already exists in the file, it is recommended that you use Sass inheritance.

15.[sass] interpolation #{}

You can use a string to insert it when you want to set the property value. #{} syntax is not available anywhere and you cannot invoke it in Mixin

16.[sass] Notes

1, similar to the CSS annotation, using "/*", the knot is the use of "*/" 2, similar to JavaScript notation, using "//" difference, the former will be compiled in the CSS display, the latter will not be displayed in the compiled CSS,

17.[sass] Data type

[Sass] string

[Sass] Value list

18.[sass Operation----------Basic characteristics of addition-----------------sass

. box {
width:20px + 8in;} The result of the compilation. Box {
width:788px;} Different types of units, compilation will also error [sass Operation] Subtraction. Content {
Width: $full-width-$sidebar-width;} [sass operation] MultiplicationThe multiplication in Sass is slightly different from the addition and subtraction operations described earlier. Although he can support multiple units (such as EM, px,%), there is a problem when a unit declares two values at the same time: box {width:10px * 2PX;} Error. Box {
width:10px * 2;} That's right [SASS Operation] Division. box {
Width: (100PX/2); } "/" cannot be used alone [SASS Operations] numeric operations. box {
Width: ((220px + 720px)-11 * 20)/12; } [SASS Operation] Color operationColor: #010203 * 2;color: #010203 + #040506; [Sass Operation] character arithmetic

Note that if a quoted string is added with an unquoted string (that is, the quoted string is to the left of the + symbol), the result is a quoted string. Similarly, if a string without quotation marks is added with a quoted string (the string with no quotation marks to the left of the + symbol), the result will be a string without quotation marks. For example: 

CSS pre-compiler: Sass (Getting started), faster front-end development