Sass beginner's entry notes (1) and sass beginner's entry notes
I am a newbie, and I may be a little embarrassed to take notes while learning sass, but it is more comprehensive and intuitive to review. Of course, the most important thing is to practice and practice the truth.
Other CSS pre-processor languages:
CSS pre-processor technology is very mature, and many different typesCSS Preprocessor LanguageFor example:
- Sass (SCSS)
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
- DT CSS
Among the many excellent CSS preprocessors
Sass,
LESSAnd
StylusThe best, more discussions, and more comparisons.
Sass is the earliest CSS preprocessing language and has more powerful functions than LESS. Although Sass was the earliest, it is far inferior to LESS popular.
At the beginning, the indent syntax of the old version cannot be accepted by the public. Due to its powerful functions and the strong promotion of Ruby on Rails, many developers have chosen Sass.
Sass is usedRubyA language-based CSS preprocessing language, initially designed to work with HAML (about haml: http://www.bianceng.cn/web/Html/201411/46562_2.htm
An indent html pre-compiler), so it has the same indent style as HTML.
What is the difference between Sass and SCSS?
Sass and SCSS are actually the same thing, which we usually call Sass. The differences between the two are as follows:
". Sass" can only use the old Sass syntax rules (indentation Rules). ". scss" uses the new Sass syntax rules, that is, SCSS syntax rules (similar to the CSS syntax format ).
Sass compilation involves multiple methods:
Command compilation refers to using the command terminal on your computer to compile Sass by entering the Sass command.
GUI compilation tools are currently popular:
In comparison, we recommend that you use the following two methods:
- Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
- CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
GruntAnd
Gulp,You can use them to configure Sass compilation [Grunt-beginner front-end automated tools for learning: Compilation error of http://www.imooc.com/learn/30?#:: the most error is a compilation error. During Sass compilation, "GBK" encoding is not supported. 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. Note: The full text uses scss to write different style output methods: the style compiled in Sass can also be displayed according to different style. It mainly includes the following styles:
Code example:
- Nested output mode nested
- Expanded output mode expanded
Sass debugging
The browser supports the "sourcemap" function. For earlier versions, you need to add the "-- sourcemap" parameter during compilation:
sass --watch --scss --sourcemap style.scss:style.css
In Sass3.3 or later versions (the tested version is 3.4.7), you do not need to add this parameter. You can also:
sass --watch style.scss:style.css
SASS is not compatible with the existing CSS code: After sass is compiled into css, it cannot be decompiled into sass. For example, it means you can't get it back.
What is the difference between Sass and SCSS?
Sass and SCSS are actually the same thing, which we usually call Sass. The differences between the two are as follows: