CSS Preprocessor Sass Learning Summary

write in front of the words: If you write a lot of CSS, you may wish to write CSS in a different way, may improve efficiency, sass is my favorite one. CSS is not too difficult, so it is only introduced sass common usage, to avoid complications, the follow-up to new things, you can expand.

====== Body begins ======

We can write code in a CSS-like programming language, save the file as a. scss suffix, and then use SASS for processing as a CSS file, and this. scss file can have variables, nesting and other functions, some of the taste of programming At the same time. The. scss file can also be processed by sass to a compressed, indented, and different style of CSS code that facilitates later deployment. Here are some of my learning summaries.

First, the Environment layout

1. Install Rubby:

　　Sass is written in Ruby and requires Ruby's runtime environment to download Rubyinstaller for installation from the following link (Windows): http://rubyinstaller.org/

2. Installing SASS

After the installation completes Ruby, install sass next. Since the domestic Ruby source is now being wall, install sass by the following way, open the cmd command line.

(1) Remove the original ruby source address

Gem Sources--remove https://rubygems.org/

(2) New Ruby Source address available

Gem Sources-a https://ruby.taobao.org

(3) Installation Sass

Gem Install Sass

(4) Sublime support scss file highlighting

Install the Sass plugin with the package control and then set syntax to Sass.

(5) Prevent Sass Chinese Comment garbled

Follow-up write. Scss code in the process of Chinese comments will be garbled, find the Engine.rb file (usually located under the Ruby22\lib\ruby\gems\2.2.0\gems\sass-3.4.18\lib\sass directory), Add the following code after all the Require:

encoding.default_external = Encoding.find (' Utf-8 ')

At this point, the SASS environment deployment is complete.

Second, compile the. scss file as a CSS file

　　Before summarizing the specific SASS syntax format, let's start by saying how to compile the. scss file as a CSS file.

1. Switch to the directory where the. scss file is located

Under the command line switch to the Code folder directory (such as z:\), assuming that there is a file Test.scss file, the contents are as follows: (Sass fully support CSS syntax)

H1 {    font-size:17px;    } H2 {    font-size:18px;}

2. Compiling the Scss file as a CSS file

Run the command: Sass--style compressed Test.scss test.css, you can generate a compressed version of the CSS file, and named Test.css. A few notes:

(1) After the--style can have four parameters can be selected, respectively, expanded, nested, compact, compressed, respectively, choose the effect of different parameters can try their own experience.

(2) test.scss and Test.css file directories can be customized, such as the z disk Sass directory under the Test.scss file compiled into a compressed version of the file, and placed in the Z-disk CSS directory, then the command is: Sass--style compressed Z:\ Sass\test.scss Z:\css\test.css

(3) In the development process, only need to modify the Scss file, and then compile; the front page only needs to refer to the corresponding CSS file.

3. Listening for files and folders

　　You can use the Listen command if you want a scss file or a corresponding folder to be compiled automatically after the file is modified.

(1) Listening file:

Sass--watch--style Compressed TEST.SCSS:TEST.CSS

When the Test.scss file has been modified, it is automatically compiled to TEST.CSS and is compressed.

(2) Listening folder:

Sass--watch--style Compressed SASS:CSS

When the. scss file is modified in the Sass folder, it is automatically compiled into a CSS file with the same name as the file in sass.

remark:

(1) Note the colon between the source and destination files is different from the white space in the compile command.

(2) The generated map file can find the role of the source map file.

Iii. basic usage of SASS

The following summarizes the basic usage of sass, and the SASS syntax has a very high similarity to CSS.

The following demo source code is placed in the Test.scss file , the compiled CSS file is placed in the Test.css file , and the Listening command is:

Sass--watch--style Expanded SASS/TEST.SCSS:CSS/TEST.CSS

1. Variable: Start with $.

Source:

$color 1: #aeaeae;. Div1{background-color: $color 1;}

after compiling:

. div1 {  background-color: #aeaeae;} /*# Sourcemappingurl=test.css.map */

2. Variables are nested within the string: should be wrapped in #{}.

　　Source:

$left: Left;. div1{border-#{$left}-width:5px;}

　　After compiling:

. div1 {  border-left-width:5px;} /*# Sourcemappingurl=test.css.map */

3. Allow the calculation:

　　Source:

$left: 20px;. Div1{margin-left: $left +12px;}

　　After compiling:

. div1 {  margin-left:32px;} /*# Sourcemappingurl=test.css.map */

4. Allow selectors to be nested:

　　Source:

. div1{.span1{height:12px;}. div2{width:16px;}}

　　After compiling:

. div1. span1 {  height:12px;}. Div1. div2 {  width:16px;} /*# Sourcemappingurl=test.css.map */

5. Using & Referencing parent elements

　　Source:

. Div1{&:hover{cursor:hand;}}

　　After compiling:

. div1:hover {  Cursor:hand;} /*# Sourcemappingurl=test.css.map */

6. Notes:

There are three kinds of forms:

(1)//comment: The note is only available in the. Scss source file, not in the compiled CSS file.

(2)/*! */: Important note, any style of CSS file will have, generally placed CSS file Copyright description and other information.

(3)/* * *: This note is not in the CSS of the compressed style, and other style CSS files will be included.

Remark: usually (1) (2) Use more

7. Allow Inheritance: @extend class name

　　Source:

. class1{font-size:19px;}. class2{@extend. Class1;color:black;}

　　After compiling:

. Class1,. class2 {  font-size:19px;}. Class2 {  color:black;} /*# Sourcemappingurl=test.css.map */

　　Note: If the Class1 property is set after Class2, the Class2 will also be affected, as follows:

　　Source:

. class1{font-size:19px;}. class2{@extend. Class1;color:black;}. Class1{font-weight:bold;}

　　After compiling:

. Class1,. class2 {  font-size:19px;}. Class2 {  color:black;}. Class1,. class2 {  font-weight:bold;} /*# Sourcemappingurl=test.css.map */

　　Visible sass is not a single-pass compilation.

8. Referencing an external CSS file

Sometimes the different parts of a Web page are divided into multiple files to write styles, or refer to some common styles, so you can use @import.

Source:

@import "Test1.scss", @import "Test2.scss", @import "test3.scss";

　　After compiling:

h1 {  font-size:17px;} h2 {  font-size:17px;} h3 {  font-size:17px;} /*# Sourcemappingurl=test.css.map */

Where Test1.scss, Test2.scss, test3.scss files are respectively set H1 H2 H3.

9.mixin and include:

　　Mixin is similar to a C voice macro, which stores generic modules, referenced by @include.

　　Source:

@mixin common{display:block;margin:0 Auto;}. class1{font-size:16px; @include Common;}

　　After compiling:

. class1 {  font-size:16px;  Display:block;  margin:0 Auto;} /*# Sourcemappingurl=test.css.map */

You can also be more flexible, like a function, as follows:

　　Source:

@mixin Common ($value 1, $value 2, $defaultValue: 12px) {display:block;margin-left: $value 1;margin-right: $value 2; padding: $defaultValue;}. class1{font-size:16px; @include Common (12px,13px,15px);}. class2{font-size:16px; @include Common (12px,13px);}

　　After compiling:

. class1 {  font-size:16px;  Display:block;  margin-left:12px;  margin-right:13px;  padding:15px;}. Class2 {  font-size:16px;  Display:block;  margin-left:12px;  margin-right:13px;  padding:12px;} /*# Sourcemappingurl=test.css.map */

Finally, bootstrap version fourth released the download , and transferred from less to sass, you can download the inside of it to see the SCSS code, experience, perhaps you will find more interesting usage.

Finish

Document Information

• Copyright Disclaimer: Free Reprint-Non-commercial-non-derivative-maintain attribution (Creative Commons 3.0 license)
• This article is for original articles, welcome reprint, follow up this blog will be updated constantly, so please keep this document information.
• This address: http://www.cnblogs.com/wuguanglei/p/4782403.html

CSS Preprocessor Sass Learning Summary