Sass, sass

Sass, sass

Background:

Although I have read some basic sass knowledge before when I took over the company's project for the first time, the knowledge has been scattered with the wind for a long time, now let's take a look at some important points in common sense .. Sass is written in ruby. Before using sass, make sure that your machine has a ruby development environment.Ruby-vCommand to view the current ruby version.

Overview:

  Sass is cssPreprocessing toolsWhen we have a large amount of css code, we can simplify our development to facilitate subsequent maintenance. A simple understanding of what a preprocessing tool is to generate real css code.BeforeThe work to be done incorporates some features of advanced languages to improve the efficiency of css writing, and sass also supports css3.

 

Do you still remember preprocessing in C? There are many types of preprocessing in C language, the least known of which is "macro definition". The role of macro definition is to define a preset constant and then show the part of this constant in the code, replace all values with the preset values of this constant, for example# Define A 5He means to directly replace all A in the code below with 5, which is required before code compilation, so macro is defined as A kind of preprocessing.

 

Back to our above, we know that css code must be written in a file suffixed with css to compile and parse. Since sass is a pre-compilation tool, we can imagine that sass will be used before css is generated. Well, it is true that there are two most common sass writing methods, which correspond to different suffix names.Sass, scssThe former follows the syntax of ruby, python, and other languages, and uses spaces as part of the language syntax, while the latter is closer to the majority of front-end enthusiasts, the most common curly braces in css are used as syntax support. The differences between the same Code Section are as follows:

Sass Syntax: use space as part of the syntax. This should be a space. If there are two spaces, the syntax will report an error, and the div width: 100px height: 100pxscss at the end of the semicolon is not required: as we write css, div {width: 100px; height: 100px ;}

Note that the two syntaxes cannot be mixed in the same file, but they can be converted using tools.

 

 

Common tips:

 

1. Class Name nesting

Css code :. div1. div2 {background-color: red;} sass code :. div1 {. div2 {background-color: red ;}you can see that sass makes the nesting of class names clearer and the weight of class names clearer.

 

2. Variables

Use $ to define a variable $ mainColor: red. css syntax :. div1. div2 {background-color: red;} sass :. div1 {. div2 {background-color: $ mainColor ;}more convenient for maintenance and Modification

 

3. Writing pseudo-classes/pseudo elements

I did not know how to use this method at the time. I also wondered why it was used. Later I checked the information and found that it was only a pseudo-element method. css method :. clearfix: before {content :"";...} sass Syntax :. clearfix {&: before {// & is called the parent element selector. all elements in the clearfix class content :"";...}}

Here is a small note: the difference between pseudo-classes and pseudo-elements: pseudo elements are concepts that appear in css3 and are represented by two, a pseudo-class is used to add special effects to certain selectors, while a pseudo-element is used to add some special effects to certain selectors, common pseudo-classes such as link, visited, hover, and active. It is worth mentioning that you must pay attention to the order of writing. When these four pseudo-classes need to appear and be used at the same time, his writing order must be consistent with mine; otherwise, it is invalid? Have you heard of the LV package? How is it? Well! Lvha .. Remember the entire word with the start letter. Common pseudo elements do not need to be mentioned, such as after, before, first-letter, and first-line. Therefore, you must know two points: When to write a few semicolons, second, the sequence problem when multiple pseudo classes are used at the same time.

 

4. Inheritance of code reuse

When zookeeper sees this, everyone must think of the 2nd point mentioned above. The definition of a variable is to reuse a specific value. What should we do if we want to reuse a large segment of code? You can use the inheritance that you want to introduce now. There are two pairs of keywords inherited in sass.@ Mixin/@ include and @ extendThe working principles of the two are also quite different. @ mixin is fast for defining a code, and @ include is fast for introducing the defined code, @ extend introduces the defined class style. anyone familiar with the C language knows that include is a macro definition in C language. It can be understood as synonymous here, which is equivalent to copying code, so when our sass parses this keyword, it will directly copy the code in @ mixin, if @ extend appears in a class, it means that the current class name is tied to the class name to be inherited, that is, the name of B in the example will appear in, the final result is. a ,. b, that is, Class a B, will have this attribute. Inheritance is an object-oriented concept. sass uses the @ extned keyword, which means tailism. Simply understanding what your father has, you can leave it alone. Just take it and use it, we often use sass for repeated code references. The product gave me a requirement the day before yesterday. He said that he clicked the search box to jump to a new search page for search, most of the search boxes on the new page are the same as those on the home page. Only the font colors are inconsistent. Do I need to rewrite the css of both parts? Smart kids shoes come to mind, inherit from the first part, and rewrite different ones.

Css code :. a {background-color: red ....}. B {// assume that B also needs the background to be red and so on @ extend. a; font-size: 24px ;}

Keywords such as include are also available in php. Front-end students can refer to relevant materials to add their own knowledge, such as the differences between include and require in php.

 

5. Notes

There are two types of annotations in   sass, one is the/**/we use in css, and the other is // annotation, the former will be retained in both the encoding phase and the compiled phase, while the latter only exists in the encoding phase, which is shown to the program ~

 

6. File Definition

The file definition in   sass is also very simple. We only need to know a little about it. The file name starting with _ won't be compiled into a css file by the sass compiler, so he has a well-known name calledLocal fileFiles starting with _ are usually used to define all the variables, such as the font size and color. At least I did this for this project, such as _ var. there is only one form of scss file, that is, the file ending with the scss suffix, and aa. files such as scss will be compiled into css files after the sass compiler. We know that the rendering engine of the browser only recognizes css files. But now the problem arises again. How should we use _ var. scss?

 

7. Differences between import in sass and import in css

Callback callback _ var. since the scss file will not be compiled as a css file, it means that it cannot be parsed by the browser. As mentioned above, it is usually used to declare some variables, how can these variables be referenced by the main file? Here, we still use a keyword @ import command in css, but this command is enhanced to some extent in sass. here we need to be clear, in sass, * _ var and var represent the same file *. Therefore, when _ var is introduced, you only need to write var, when using @ import to introduce sass files in sass, you only need to write the file name without the suffix. This is similar to using require in node to introduce a module, for example, @ import "var ", here you may have questions about how to use this command to introduce css files. In fact, we have mentioned that @ import is an enhancement of sass's command of the same name in css, therefore, when sass determines that the @ import command is followed by a keyword such as a suffix, url function, or http, it will assume that you are using the @ import command originally generated in css.

 

For the best practices of @ import in css, the @ import command is not often used in css for performance optimization, we know that when the browser engine obtains a webpage file, it becomes a dom tree, followed by a rendering tree, while @ import is embedded in css, that is, it will be executed one step later than the css code in the link tag. Therefore, using this command will cause the page to be stuck and left blank.

 

8. Write splitting of attributes

  Has a concept called attribute concatenation in css, such as padding: 5px. In fact, we can also write it into padding-left and padding-right, it can be seen that there is a redundant padding keyword in this case. How can we replace it in sass?

Css code. a {padding-left: 2px; padding-right: 2px;} sass code. a {padding {left: 2px; right: 2px ;}}

 

9. Others

The sass is the most simple and commonly used part. It is also an inevitable part for beginners, other sass skills include unit-based computing, @ if, @ at-root, and other commands. if you need them, you can refer to relevant materials to supplement them.

 

10. Post-processing

Preprocessing is prior to generating the css code, while the content included in the post-processing is the compression and obfuscation of the Code, which can constitute a complete css workflow.