Since using less to write CSS, you are faster than before ~ (Sublime compilation)

The reason why use this title, mainly is recently teased Jay too interesting.

All right, that's a joke.

If you know less and are familiar with it, you don't have to look down.

If you have not used, congratulations, this is an entry-level tutorial, learned it, can save you 10% of the rope life.

First, we need to know what less can do. Such as:

@width: 300px; @fonts: 12px bold "Arial, Verdana";. Block-header{    color:#5c5c5c;    . elem-title{        font:@fonts;         Width:@width;    }     . elem-content{        width:@width;         Height:300px;    } }.block-footer{    font:@fonts;     Width:@width + 100px;}

The final compiled CSS is this:

{  color: #5c5c5c;}  {  font: 12px bold "Arial, Verdana";   Width: 300px;}  {  width: 300px;   Height: 300px;}  {  font: 12px bold "Arial, Verdana";   Width: 400px;}

How to install (mainly based on the sublime editor, other editors themselves Google)

Using less to compile CSS, there are many ways to use Nodejs. Of course we want to do it in the simplest way, for example: Create a new Test.less file and press CTRL +s to compile to test.css.

To implement the functionality I've described, you just need to download a sublime editor,

1) Open Sublime:

CTRL + SHIFT + P

The following interface will appear:

2) Input: Lesstocss

Install after you click

3) Note: Lesstocss is dependent on lessc.cmd, if it is a Mac, it is relatively simple, only need to enter in the terminal:npm install less -gd

When the download is finished, all configurations are completed. Skip 4).

4)under Windows,Lesstocss is dependent on lessc.cmd, please download:

After https://github.com/duncansmart/less.js-windows/releases, add its path (i.e:e:/less) to the system environment variable:

5) Restart the sublime.

6) Create a new file: Test.less. Copy what I wrote above, Ctrl+s. You can see that the TEST.CSS is automatically generated in your directory.

Note: XX.CSS is generated by default in the sibling directory of the Xx.less file and is automatically compressed.

By:preference--package settings--less2css--setting default configuration is available:

{  "Lessccommand": false,  "Lessbasedir": "./",     "OutputDir": "./",    "OutputFile": "",//[ EXAMPLE.CSS] If left blank uses same name of the. less file  "minify": true,   //default compression  "Minname": false,  "AutoCo Mpile ": True,  " Showerrorwithwindow ": false,  " Main_file ": false,  " Ignoreprefixedfiles ": false}

If you do not want to compress in the dev environment, you can add by Preference--package settings--less2css--setting User:

{"minify": false}

Here, you should have learned how to install it.

Quick preview of language Features--here you can actually refer to the official website, where I copied it from.

1) variables: variables allow us to define a series of common styles individually and then invoke them when needed. So when we do a global style adjustment, we may just need to modify a few lines of code.

Less Source:

{    color: @color;}  {    color: @color;}

Less after compiling:

{    color: #4D926F;}  {    color: #4D926F;}

2) Hybrid (mixins): blending can easily introduce a defined class A into another class B, thus simply implementing Class B inherits all the attributes in Class A. We can also call them with parameters, just as with a function.

Less Source:

{     //Tears of rain AH: With this function, no longer have to write in each style so many compatible, every time as long as. Rounded-corners (8px)   . Rounded-corners (10px).  Awesome    -webkit-border-radius: @radius;     -moz-border-radius: @radius;     -ms-border-radius: @radius;     -o-border-radius: @radius;     Border-radius: @radius;}  {    . rounded-corners;}  {    . rounded-corners (10px);}

Less after compiling:

#header{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;Border-radius:5px;}#footer{-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;Border-radius:10px;}

3) Nesting: We can nest another selector in one selector to implement inheritance, which greatly reduces the amount of code and the code looks clearer.

Less Source:

{    h1 {        font-size: 26px;         Font-weight: bold;    } {font-size: 12px;                      A {            text-decoration: none;             &:hover {                border-width:1px            }     }}}

Less after compiling:

{    font-size: 26px;     font-weight: bold;}  {    font-size: 12px;}  {    text-decoration: none;}  {    border-width: 1px;}

4) functions and Operations: operations provide addition, subtraction, multiplication, except operation; we can do the attribute value and color operation, so we can realize the complex relationship between the property values. function one by one in less maps JavaScript code and can manipulate property values if you want.

Less Source:

@the-border:1px; @base-color: #111; @red:         {    color: (@base-color * 3);     border-left: @the-border;     border-right: (@the-border * 2);}  {    color: (@base-color + #003300);     Border-color: desaturate (@red, 10%);}

Less after compiling:

{    color: #333;     border-left: 1px;     border-right: 2px;}  {    color: #114411;     Border-color: #7d2717;}

That's all, isn't grammar so easy?

Reference:

Http://www.lesscss.net/article/home.html

Http://www.cnblogs.com/wuya16/p/LessToCss.html

Since using less to write CSS, you are faster than before ~ (Sublime compilation)