(1) Front-end CSS pre-processing language

(2) SASS installation and use in common projects

1. Install ruby

2. Once sass and Compass are installed, create a new test project

gem install sass
gem install compass  
Copy the code

3. Then run the compass Watch command in the project root directory.

Compass Watch is a listener that automatically compiles when sASS content changes.

4. The effect is shown in the figure below

5. Introduce it in index.html

1. The mixer

@mixin rounded-corners{ -moz-border-radius:5px; -wekit-border-radius:5px; border-radius:5px; } You can use this mixer in your stylesheet via @include. notice{ background-color:green; border:2px solid #000; @include rounded-corders; } the result is a normal compilation.Copy the code

2. Use selector inheritance to simplify CSS

// Inherit styles from selectors. Error {border:1px solid red; background-color:#000; } .seriousError{ @extend .error border-width:3 }Copy the code