After complete understanding Sass, I believe most people expect us to understand it in the end how to write CSS code to improve the efficiency of? In the end is how to make our CSS code more maintainable? In the end how to make CSS code that we wrote more reusability? So I come to tell instance Sass encoded to answer these questions.
First we develop a need to make the HTML button has the same size and different styles, the author based on this demand, using Sass write the following code:
First of all we have to analyze the specific meaning of the code above. In line 20 the author before the background color of the button, font color, background color button, the color of the border line would be defined variable; at line 21 to line 25, the author will be packaged in a body of the button to a mixed macro (with functions similar concept ), and accepts three parameters, namely the variable I defined above; from line 26 to line 39, the author defines a substantially button model CSS code section; first row to the last 39, I use the class selectors, respectively called corresponding mixed macro and passes three parameters.
After the code is compiled of Sass source it is such as follows:
CSS source code and compiled contrast, we first summarize the following differences:
1. Mixed macro variables and does not appear in the compilation
2. Mixing macro generates the corresponding code
After comparing I believe our readers have also been found, Sass from the source code to be more than the CSS code, because we consider the scalability and maintainability.
So imagine, if we need to fine-tune the color, do not need to look inside the code, you only need to change the variable head, maintainability enhancements; and then if we need to expand the color of a button, so we just need additional three variables, and then to call @mixin mixed macro can; then if we need to use the button style in another project, then we only need to use this sass in the corresponding item on it, and we can color it easy fine-tuning.
So the above example would show high maintainability, scalability and reusability is high, it means that efficiency becomes higher. Sass functions more than that, there are flow control statements, built-in functions, operators, all of us can improve coding efficiency, which are described in detail in our basic grammar section.