Brief Introduction to SCSS and brief introduction to scss

Brief Introduction to SCSS and brief introduction to scss

I. background:

Css is not a real programming language. It does not have the variables, loops, traversal, inheritance, and other features of programming languages.

To solve these shortcomings of css, the "Intermediate Language" that can pre-process css is generated to implement some programming features.

That is, in the process of compiling intermediate languages, you can use programming methods and thinking. Intermediate languages cannot be directly parsed by browsers.

Finally, compile the intermediate language into a real css, which can be used for browser parsing, similar to the relationship between TypeScript and JavaScript.

Ii. About scss:

SASS is one of the earliest css preprocessing languages.

To meet the needs of the programming style, sass has made some modifications to the programming style, which is now called SCSS.

SCSS has added some new functions and enhanced support for css3. Its syntax is fully compatible with CSS3 and inherits the powerful functions of sass.

Any standard css3 style sheet is a valid scss file with the same semantics. In addition, SCSS can recognize most css hacks and browser-specific syntaxes, such as the old IE filter. Because SCSS is an extension of CSS, all codes that work in css can also work normally in scss.

There is no need to pay attention to the previous sass rules when learning scss.

Iii. SCSS code:

The following is a short SCSS code example, which gives beginners a preliminary impression:

$ Nav-color: # F90; nav {$ width: 100px; width: $ width; color: $ nav-color ;}

The compiled code is as follows:

Nav {width: 100px; color: # F90 ;}

Http://www.softwhy.com/article-3989-1.html

Http://www.softwhy.com/qiduan/SCSS_source/