Css--less

Last year the first contact with less, and he made a less.org home page, but due to the inherent mode of CSS, did not let himself like him. Since the previous period of learning Bootstrap from Twitter again let me touch this less (I have simply mentioned less in "Css--bootstrap from Twitter"), and found his strong and convenient, Then the heart came and began to learn less. In this study, I found that he is more powerful, and thus let himself more like less. Of course everything has good and bad, I still that sentence, he does not affect my desire for knowledge, if you like, we will look down together.

Less is a dynamic style language. Less extends the dynamic behavior of CSS, such as setting variables (Variables), mixed write mode (mixins), Operations (operations), and functions (functions), and, best of all, less uses the existing CSS syntax, which means You can directly change your ready-made style file "Style.css" directly to "style.less", he can also work properly. Such as:

<link rel= "stylesheet/less" href= "less/style.less"/>

Less can now run on clients (such as: Ie+,webkit,firefox) and servers such as node. js. As I said earlier, less is an extension of CSS, not only backwards compatible, but also adds a lot of extra functionality to the existing CSS syntax. If you have a certain base of CSS syntax, learning less will be a breeze, then let's start now, first look at a section of the CSS code with less syntax:

. Box-shadow (@x:0, @y:0, @blur: 1px, @alpha) {  @val: @x @y @blur rgba (0, 0, 0, @alpha);  Box-shadow:         @val;  -webkit-box-shadow: @val;  -moz-box-shadow:    @val;}. box {@base: #f938ab;  Color:        saturate (@base, 5);  Border-color:lighten (@base, 30%);  div {. Box-shadow (0, 0, 5px, 0.4)}}

See here maybe you don't know what this code means right now? But don't be nervous, we'll step-by-step to explain what these grammars mean. Let's move on together, if you don't say anything else.

How to use Less

To successfully use less, a script is required to support this script, which we call less.js. You can download this less script here and put it in your project. After downloading, we need to refer the less.js to the file in a simple way:

<link rel= "stylesheet/less" type= "Text/css" href= "less/styles.less" ><script src= "Js/less.js" type= "text/ JavaScript "></script>

What does less contain?

What is less specific? In fact, I have already said in front of this question, less to CSS syntax based on the expansion, mainly include:variables,mixins, Nested Rules, Functions & Operations, Client-side usage, server-side usage , and so on, we've been focusing on these parts to help us understand and learn less.

1. Variable--variables

The variable in less allows you to define a commonly used value somewhere in the style, and then apply it to the style so that you can change the global effect by changing the value of the variable you define, and we'll start by looking at a piece of code:

Less Code

/*======== defines the variable ===========*/@color: #4d926f;/*======== applied to the element ========*/#header {color: @color;} H2 {color: @color;}

Compiled CSS Code:

/*======= less compiled into CSS ======*/#header {color: #4d926f;} H2 {color: #4d926f;}

The variables in less also have computational functions, such as:

Less Code:

@nice-blue: #5b83ad; @light-blue: @nice-blue + #111; #header {color: @light-blue;}

Compiled Css Code:

#header {color: #6c94be;}

We can also define a variable named variable, such as

Less Code:

@color: #253636; @highlight: "Color"; #header {color: @ @highlight;}

Compiled Css Code:

#header {color: #253636;}

Note: The variables in less are actually a "constant" because they can only be defined once.

Less Code:

@color: #253636; @highlight: "Color"; @color: #ff3636; #header {color: @ @highlight;}

Compiled Css Code:

#header {color: #ff3636;}

The above code clearly illustrates that the @color covered the previous @color.

2, mixed with--mixins

Mixing is actually a nesting, it allows you to embed a class into another class, and the embedded class is also called a variable. In other words, you can define CSS with a class, then use the whole as a variable, embed it in another human as his property, and in addition it is like a functions with parameters, as in the following example:

Less Code:

/*========= defines a class ===========*/.roundedcorners (@radius: 5px) {-moz-border-radius: @radius;-webkit-border-radius: @ Radius;border-radius: @radius;} /*========== defined classes are applied to another class ===========*/#header {. RoundedCorners;} #footer {. roundedcorners (10px);}

Compiled Css Code:

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

Note: Such a style under any CSS class or ID can be used as a variable, using mixed mode as the property value of another element.

Mixing (Mixin) has a noun called "mixed parameter (parametric mixins)", which is also said above. Less has a special type of rule set, that is, a class can be treated as a native value of another element, and can also accept its own parameters, let's look at a typical example:

Less Code:

/*========== defines a rule and does not set the default parameter value ============*/.borderradius (@radius) {-moz-border-radius: @radius;- Webkit-border-radius: @radius; Border-radius: @radius;} /*============ applied to the element ============*/#header {. Borderradius (10px);/* Pass 10px to variable @radius*/}.btn {. Borderradius (3px);/* Pass 3px to Variable @radius*/}

Compiled Css Code:

#header {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}. btn {-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}

We can also define a one-person default value for the Mixins parameter, such as

Less Code:

. Borderradius (@radius: 5px) {-moz-border-radius: @radius;-webkit-border-radius: @radius; Border-radius: @radius;}. btn {. Borderradius;}

Compiled Css Code:

. btn {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}

Another way is to mixins me any parameters, especially if you want to hide the output of the CSS rules, but also want to include his attributes in other rules, using this mixins with no parameters will be very useful, let's look at a piece of code:

Less Code:

. Wrap () {text-wrap:wrap;white-space:pre-wrap;white-space:-moz-pre-wrap;word-wrap:break-word;} Pre {. Wrap;}

Compiled Css Code:

Pre {text-wrap:wrap;white-space:pre-wrap;white-space:-moz-pre-wrap;word-wrap:break-word;}

Mixins also has an important variable:@arguments. @arguments in Mixins is a very special parameter, when mixins refers to this parameter, he will represent all the variables, when you do not want to deal with individual parameters, this will be useful, we look at a shadow instance:

Less Code:

. Boxshadow (@x:0,@y:0, @blur: 1px, @color: #000) {-moz-box-shadow: @arguments;-webkit-box-shadow: @arguments; Box-shadow: @arguments;} #header {. Boxshadow (2px,2px,3px, #f36);}

Compiled Css Code:

#header {-moz-box-shadow:2px 2px 3px #FF36,-webkit-box-shadow:2px 2px 3px #FF36; box-shadow:2px 2px 3px #FF36;}

3. Nested rule--nested rules

Nested rules are mainly for a multi-layered elements of the style rules, we used to write styles in multi-layered elements, either from scratch, or to add a class name or ID name, but in less we do not need to do so, we just use his nested rules can be done, we look at a simple example:

Html Markup:

<div id= "header" >
Less Code:
#header {display:inline;float:left;h1 {font-size:26px;font-weight:bold;a {text-decoration:none;color: #f36; &: Hover {text-decoration:underline;color: #63f;}}} p {font-size:12px;}}
Compiled Css Code:
#header {    display:inline;    Float:left;} #header H1 {    font-size:26px;    Font-weight:bold;} #header H1 a {    color: #FF3366;    Text-decoration:none;} #header H1 a:hover {    color: #6633FF;    Text-decoration:underline;} #header p {    font-size:12px;}
Use the less nested rules to make your CSS code more concise, because his writing is modeled after the DOM structure of the HTML.
From the instance code above, I know very well that nested rules allow us to write styles like DOM tree structure to write code, thus reducing the hierarchical relationship of selectors, more importantly, the use of our code is more concise, more readable, this nesting rules for our manipulation of the elements more convenient and important , such as: Hover,:link,:focus, and so on, his wording is:
Less Code:
A {color:red;text-decoration:none;&:hover {color:blue;text-decoration:underline;}}
Compiled Css Code:
a {color:red;text-decoration:none;} a:hover {color:blue;text-decoration:underline;}
Attention, the & Here is very important, in less nested in writing there is no & difference is a completely different effect, there is a & when parsing is the same element or pseudo-class of this element, no  & Parsing is a descendant element, let's look at a piece of code:
Less Code:
#header {&.fl{float:left;}. mln {margin-left:0;}}
Compiled Css Code:
#header. Fl{float:left;} #header. mln {margin-left:0;}
4, Functions & Operations
These two functions are very interesting. In our usual style, there are a number of elements with attributes that have a certain proportion or multiples. Then these two just can help us achieve this function, first of all to see operations (literal translation "action") he can let you on the element's attribute value, the color arithmetic: add, subtract, multiply, divide. function, like the function in JavaScript, allows you to perform the action of the value you want. Let's consider a simple example:
Less Code:
@the-border:1px; @base-color: #111; @red: #842210; #header {color: @base-color *3;border:1px Solid Desaturate (@red, 100%) ; Border-width: @the-border @the-border*2 @the-border*3 @the-border;border-color:desaturate (@red, 100%) @red lighten (@ Red, 10%) darken (@red, 30%);}
Compiled Css Code:
#header {color: #333; border:1px solid #4a4a4a; border-width:1px 2px 3px 1px;border-color: #4A4A4A #842210 #B12E16 ;}
It is suggested here that the operations in less is mainly for the operation of any number, color, variable, which can be added, minus, multiply, divide or more complex, while functions is mainly for color funtions, Less provides a variety of colors to transform the function, the following many of them to see the use of these two features.
First look at the use of operation
Less Code:
@base: 5; @filler: @base * *, @other: @base + @filler; #header {color: #888/4;height:100%/2 + @filler;}
Compiled Css Code:
#header {    color: #222222;    height:60%;}
Here are some simple arithmetic, they are all operating under the same unit, now let's look at a different unit of operation
Less Code:
@var: 1px + 5; #header {border: @var solid red;}
Compiled Css Code:
#header {    border:6px solid red;}
The above code directly reflects, "@var: 1px + 5", less the final parsed value is "6px". In less we can also use parentheses "()" to change the order of operations, as in elementary school arithmetic, such as:
Less Code:
@var: 20px; #header {width: @var + 5 * 2;height: (@var + 5) * 2;}
Compiled Css Code:
#header {    height:50px;    width:30px;}
From the results, we can clearly draw their differences.
@var: 20px; #header {width: @var + 5 * 2;/* First calculates 5 * 2 = 10 then calculates the @var + 30px, which is actually "@var + (5*2)" */height: (@var + 5) * 2;/* First calculates (@var + 5) = 25px, and then calculates the 25*2=50px, because parentheses have more priority, primary math problem */}
Less also provides a color Functions, he has a variety of functions to transform the color, first convert the color to HSL color, and then operate on this basis, including the following:
Lighten (@color, 10%);     Return a color which is 10% *lighter* than @colordarken (@color, 10%);      Return a color which is 10% *darker* than @colorsaturate (@color, 10%);    Return a color 10% *more* saturated than @colordesaturate (@color, 10%);  Return a color 10% *less* saturated than @colorfadein (@color, 10%);      Return a color 10% *less* transparent than @colorfadeout (@color, 10%);     Return a color 10% *more* transparent than @colorspin (@color, ten);         Return a color with a degree larger in hue than @colorspin (@color, -10);        Return a color with a degree smaller hue than @color
Using this functions method is simple:
Less Code:
@base: #f04615, #header {color: @base; Background-color:fadein (@base, 10%); h1 {Color:lighten (@base, 20%); Background-color:lighten (fadeout (@base, 20%), 5); a {Color:darken (@base, 50%); Background-color:spin (@base, 10); &:hover {color:saturate (@base, 30%), Background-color:fadein (Spin (@base,-5), 20%);}}} P {color:desaturate (@base, 60%);}}
Compiled Css Code:
#header {    background-color: #F04615;    Color: #F04615;} #header H1 {    Background-color:rgba (242, 0.8);    Color: #F69275;} #header H1 a {    background-color: #F06B15;    Color: #060200;} #header H1 a:hover {    background-color: #F03415;    Color: #FF3E06;} #header p {    color: #A56F60;}
You can also extract color values in this way
Hue (@color);        Returns the ' Hue ' channel of @colorsaturation (@color); Returns the ' saturation ' channel of @colorlightness (@color);  Returns the ' lightness ' channel of @color
Let's take a look at how to get his color
Less Code:
@color: #f36, #header {BACKGROUND-COLOR:HSL (Hue (@color), 45%,90%);}
Compiled Css Code:
#header {    background-color: #F1DAE0;}
5. Namespace--namespaces
Sometimes you want to organize some variables or mixins, wrap them up, and take them out when you want them, so we'll expand on the mixins based on the previous ones, for example, we have a library like this:
#bundle {  . button () {    display:block;    border:1px solid black;    Background-color:grey;    &:hover {background-color:white}  }  . tab {...}.  Citation {...}}
Now in the actual operation, the a style in our header is the same as the. button, then we can do this:
#header a {  color:orange;  #bundle > button;}
In other words, if there are a few parts of the page that are exactly the same, or just partially different, we can write like this, as in the code above, #bundle可是以web页面中已存在的元素, and then #header in the A element and # The. Button style in the bundle is the same, so we can reference all the styles in #bundle. button to the a element in #header.
6. Variable Range--scope
The variables in less are like other programming languages, and his variables have a scope concept, which is a bit like local variables and global variables, except that the nearest principle is taken in less, in other words, if the element first looks for itself there is no such variable exists, if itself exists, take the variable in itself, If it doesn't exist, look for the parent element, and so on, until we find the corresponding variable, let's look at a simple example:
@var: red; #page {  @var: white;  #header {    color: @var;//White  }} #footer {  color: @var;//Red  }
7, less of the annotated--comments
There are two ways to annotate in less, and a single-line annotation is much like JS, such as:
Hi, I ' m a silent comment, I won ' t show up in your Css.class {color:white}
The multiline annotation in less is the same as using CSS:
/* Hello, I ' m a  css-style comment */.class {color:black}
Of course, the single-line annotation can also be used to annotate CSS, I emphasize the use of CSS in the annotation method:
/* Hello, I ' m a css-style comment */.class {color:black}
8, the use of the client--client-side usage
The use of the client is actually very simple, we start to refer to the use of the client, the prerequisite is to use a Less.js script support, you can first click to download Less.js and then refer him to the page head, as follows:
<script src= "Less.js" type= "Text/javascript" ></script>
Where SRC specifies the path is the relative path in your project, of course, you can also put this JS on the server you think is safe to use, the absolute path is also possible. Then we need to introduce the less file into the project, the introduction of the way and CSS is the same, just a little bit different, CSS is "rel=" stylesheet "" and Less Is "rel=" stylesheet/less "", Take a look at the following code:
<link rel= "stylesheet/less" type= "Text/css" href= "styles.less" >
In particular, the client uses less, it is important to note that the "less style files must be placed before the less script file".
In my eight sections on the introduction of less, actually less not only contains these things, he also includes "server-side use", "Import files and variables", "string interpolation" and so on, because these parts are relatively less used, and I do not fully understand, deliberately cut off these parts of not making statements, If you have a complete understanding or a clearer study of him, you can hit his official website. (but you have to go through the wall to read normally.) ）