less grammar

A, less language features

1.1 Overview

　　As an extension of CSS, LESS CSS CSS is not only backward compatible syntax, and even the new features is the use of CSS syntax. This design makes it easy to learn LESS, CSS and you can fall back at any time.

1.2 Variable

1.2.1 the definition and use of variables

　　Definition of variables: less defined variables using the "@ variable name: variable value" approach defined;

　　Using Variables: use the "@ variable name" can be directly behind the need to use css properties defined variables.

For example: In the following code file less

@width: 100px;   // custom variable 
.W { 
    width: @width;    // use variable 
}

1.2.2 variable scope

　　If you define a variable of the same twice, the last time in the current scope of the definition will be used. This is not a mechanism similar to CSS, the last value will be defined by the value of this property. If defined in a nested Ho, then this variable can Gua service properties in the right foot this nested Ho. Variable is no order at all, as long as there are page (which can be used before the variable definition), will be covered by the order, the order load . E.g

@width : 1px;
.meng {
    @width : 2px;
    .long {
        @width : 9000px;
        width:@width;
        @width : 22px;
    }
    width: @width;
}

　　Compiled as follows:

{.meng 
    width: 2px; 
} 
.meng .long { 
    width: 22px; // Note here 22px, instead 9000px 
}

Example 2: Before using the variable definitions:

{.header 
    width: @width; // use the variable before the variable is defined is entirely possible, and that other languages are different 
} 
@width: 50px;

1.2.3 string interpolation

　　Less may be interpolated string (string concatenation) via variable name} {@ manner. E.g

@logoUrl = "http://www.XXX.com";
image {
    background-image: url("@{logoUrl}/image/logo.peg")
}

　　CSS is compiled:

image {
    background-image: url("http://www.XXX.com/image/logo.png")
}

1.2.4 interpolation selector

　　Less CSS may be interpolated by selecting the variable name} {@ manner. E.g:

@mySelected: my-class; // Note here can not use double or single quotes, interpolation selector simply to replace all the variables 

@ {mySelected}: {// foregoing points represent a class selector. selector, if id selector, using # 
    width: 100px; 
}

　　Compiled CSS

.my-class {
   width: 100px;
}

1.2.5 media query as a variable

　　If you wish to use LESS variables in the media query, you can directly use ordinary variable manner. Because the "~" value following Ji is compiled, it can be used as a parameter of the media query. Small examples are as follows

: LESS Code

@singleQuery: ~"(max-width: 768px)";
div{
    background-color: red;
}
@media screen and @singleQuery {
    div {
        background-color: blue;
    }
}

　　Compiled CSS

div{
    background-color: red;
}
@media screen and (max-width: 768px) {
    div {
        background-color: blue;
    }
}

1.2.6 with a variable value of variable

　　Other variables used in the definition of the variable value

Less Code:

@meng: 5201314px;     
@loveDay: Meng; 
div { 
    width: @@ Loveday;   // @ use two, corresponding to @loveDay = meng, a first binding and @loveDay @ is @meng i.e. 5201314px 
}

Compiled CSS

div {
  width: 5201314px;  
}

1.3 Mixed

　　In Less, the mixing may be a defined class A (a set of already defined patterns) easily introduced into another class B, so that a simple implementation of class B inherits all the properties of class A. We also can take parameters call, just like using the same number of Taipa

1.3.1 inherited class name

　　In LESS you can define a common set of attributes for the class, and then in another class to call these properties. If we now need to introduce a set of attributes common to those in the other class, then we Gua need to call on it in any class. Any CSS class, id attribute sets may be introduced in the same way. E.g:

.common-box {
    width: 100%;  
    height: 50%;   
}

.span {
    display: block;  
}

body {
    background-color: #EEEEE;
    .common-box;
    span{
          .span;
          width: 100px;
          height: 100px;
    }
}

　　Compiled CSS

.common-box {
    width: 100%;  
    height: 50%;   
}

.span {
    display: block;  
}

body {
    background-color: #EEEEEE;
    width: 100%;
    height: 50%;
}

body span {
    display: block;
    width: 100px;
    height: 100px;
}

1.3.2 mixed with parameters

　　In LESS, the number can also be defined as a set of attributes, like Dang with parameters, and in the other selectors as call it. Examples are as follows:

.width(@width) {
	width: @width;
	background-color: #000000;
	color: #FFFFFf;
}

#app {
	width: 500px;
	background-color: #ffffff;
	border: 1px black solid;
	p {
		.width(50%);
		font-size: 25px;
	}
	span {
		.width(200px);
		font-size: 14px;
	}
}

　　Compiled CSS

#app {
	width: 500px;
	background-color: #ffffff;
	border: 1px black solid;
}
#app p {
	width: 50%;
	background-color: #000000;
	color: #FFFFFf;
	font-size: 25px;
}
#app span {
	width: 200px;
	background-color: #000000;
	color: #FFFFFf;
	font-size: 14px;
}

　　Equivalent to .width (@width) as a function call, the incoming parameter is the width of the currently selected by the selector element.

Guess you like