Campass + Scss, let's write CSS more elegantly

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.