Notes on getting started with sass (1)

I am a novice myself, and the notes I took down while learning Sass may be a bit wordy, but when reviewed, it is still relatively comprehensive and intuitive. Of course, the most important thing is to practice and practice to get the truth

Other CSS preprocessor languages:

CSS preprocessor technology has been very mature, and many different CSS preprocessor languages ​​ have emerged, such as:

• Sass(SCSS)
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

Among the many excellent CSS preprocessor languages, Sass, LESS and Stylus are the best, with many discussions and comparisons.

Sass is the earliest CSS preprocessing language and has more powerful functions than LESS. Although Sass appeared earliest, it is far less popular than LESS.

The original indented old version syntax was not accepted by the public. Due to its powerful functions and the strong promotion of Ruby on Rails, many developers still chose Sass.

Sass is a CSS preprocessing language written in Ruby. It was originally designed to cooperate with HAML (about haml: http://www.bianceng.cn/web/Html/201411/46562_2.htm

It is designed as an indented HTML precompiler), so it has the same indentation style as HTML.

What is the difference between Sass and SCSS?

Sass and SCSS are actually the same thing. We usually call it Sass. The differences between the two are as follows:

1. The file extensions are different. Sass has the “.sass” suffix as the extension, while SCSS has the “.scss” suffix as the extension
2. The grammar writing method is different. Sass is written with strict indentation grammar rules, without braces ({}) and semicolons (;)
3. The syntax of SCSS is very similar to our CSS syntax (There is no difference between SCSS and CSS). To put it simply, just modify your existing ".css" file directly into ".scss" and you can use it.

".sass" can only use Sass's old grammar rules (indentation rules), and ".scss" uses Sass's new grammar rules, which are SCSS grammar rules (similar to CSS grammar format).

There are many ways to compile Sass:

• Command to compile

Command compilation means using the command terminal on your computer to compile Sass by entering Sass commands.

• GUI tool compilation

GUI interface compilation tools, the most popular ones currently include:

1. Koala (http://koala-app.com/)
2. Compass.app（http://compass.kkbox.com/）
3. Scout (http://mhs.github.io/scout-app/)
4. CodeKit（https://incident57.com/codekit/index.html）
5. Prepros (https://prepros.io/)

In comparison, it is recommended to use the following two:

• Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
• CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

• Automated compilation

        Grunt and Gulp, can be used to configure Sass compilation [Grunt-beginner front-end automation tool learning: http://www.imooc.com/learn/30]

Common compilation errors:

One of the most common errors is caused by character compilation. During the compilation process of Sass, "GBK" encoding is not supported. So when creating a Sass file, you need to set the file encoding to "utf-8".

Another error is caused by Chinese characters in the path. It is recommended not to use Chinese characters in file naming or file directory naming in the project.

Note: The whole text is written in scss

Output methods of different styles:

Styles compiled in Sass can also be displayed in different styles. It mainly includes the following styles:

Code example:

• Nested output method nested

       

• Expand output mode expanded

       

           

• Compact output method compact

         

• Compressed output method compressed