Campass + Scss, let's write CSS more elegantly

If you often write CSS, you should find that the traditional way of writing CSS is more or less dull, not smart? Not elegant? At least that's what I think.

Examples of defects

1. Assuming that the background color values for most of the HTML elements in the page are the same, we need to add Background-color to each element: #fff duplicate CSS code, and of course, you can define a class for this class by itself. Background-color: #fff, and then apply the class to the HTML element you want to, if the use of reasonable, still say the past, otherwise the result is your HTML element may have a lot of class, in my opinion this is ugly.

2. Suppose your HTML element has a lot of layers, you need to write some CSS for each layer, and the result may be

. div1{width:800px;}

. Div1. div1-1{width:600px;}

. div1. div1-1. div1-1-1{width:400px;}

. div1. div1-1. div1-1-1. div1-1-1-1{width:200px;}

Writing to the fourth floor, I have been a bit dull, because I have to repeat the parent element to include, and later also very bad maintenance

Because now the traditional way has a variety of defects, so the birth of SCSS, referring to the official website http://sass-lang.com/View detailed introduction, simply said, this is a CSS framework, through the syntax to more intelligently write CSS

Use

1. Because you want to rely on the ruby environment, if you are using a Windows system, first please download Rubyinstaller, http://www.rubyinstaller.org/

2. After installation, if you are a win 8 system, please search and run ' command prompt with Ruby '

3. Command input gem install compass, indicating that to install the Compass Framework, compass is a very convenient framework for writing CSS, later on, interested please see the official website http://compass-style.org/

Campass + Scss, let's write CSS more elegantly