Surely we learn CSS when exposed to certain LESS and SASS bar, but may still have a lot of friends on their fuzzy concept, the following may wish to follow along with the story to find out about them.
background
CSS (Cascading Style Sheets) is a non-procedural language, learning portal is very easy and intuitive to use, but for some of the more complicated or reuse project relatively strong, because CSS is not variable, function, SCOPE (scope), need writing a lot of code does not seem logical, convenient maintenance and expansion, is not conducive to reuse, especially for non-engineers in terms of front-end development, often because of a lack of CSS writing experience is difficult to write well-organized and easily maintainable CSS code. In order to facilitate the workload of front-end development, the emergence of sass and less .
SASS and LESS
SASS (English name: Syntactically Awesome Stylesheets ) Sass was born in 2007 years, the use Ruby to write, is a kind of css an extended promotion, increased regulation, variable, mixed, selector, inheritance and so on characteristics. It can be understood as a js way to write, and then compiled into CSS . For example, Sass may be used repeatedly to css attribute value defined as a variable, and variable names to refer to them, without re-writing the attribute value.
LESS ( 2009 Nian open source project, subject to Sass greater impact, but the use of CSS syntax, so most developers and designers easier to get started. LESS retained the css any function, while providing a number of ways to smoothing the written code into standard CSS code that can be used at any time to switch any css syntax for writing.
SASS and LESS **** Use
Traditional css can be directly html reference, but sass and less due to the use of similar JavaScript way to write, it must be compiled to generate css , and html reference after reference only compiled css file, although the process of multi-layer, but after all sass / less at the time of writing it is a lot easier, so we use sass / less before, as long as we set in advance, you can directly generate the corresponding css file, but we only need to care about our sass / less documents can be .
Sass syntax rules, can refer to the SASS Chinese network: <U> https://www.sass.hk/ </ U> .
SASS file extension technology comes in two forms: .sass and .scss . In fact, both are the same thing, both types may be generated by the browser can recognize compile css file. These two differences:
Different extensions;
SCSS syntax for writing and CSS syntax notation is very similar, .sass file for typesetting code has very strict requirements, and no braces, no semicolon;
Sass syntax
$ font-stack: Helvetica, sans -serif // define the variable
$ primary-color: # 333 // define the variable
body
font: 100% $font-stack
color: $primary-color
SCSS syntax
$ Font stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Compiled by the CSS
body {
are 100% Helvetica, sans-serif;
color: #333;
}
LESS extension technology is only one, is the .less , grammar rules and sass similar, reference may be less Chinese network <U> http://lesscss.cn/ </ U> .
LESS use of two kinds:
- Introduced directly in the browser less compiler js files and less files directly compiled to render css file to the current page.
2.less files compiled into css references after css ;
/* Less */
@color: #999;
@bgColor: skyblue; // Do not add quotes
@width: 50%;
#wrap {
color: @color;
width: @width;
}
/ * After generating CSS * /
#wrap {
color: #999;
width: 50%;
}
By contrast, presumably you've probably learned these language, the next study, on to your own. Of course, you can also continue to focus on my future, I will provide more teaching, hoping to help you further.