1. Variables
1. The property value as a variable
@color:#333;
div{
background：@color；
}
2. The selector as a variable
@mySelector: #wrap;
@Wrap: wrap;
@ {MySelector} {// variable name must be wrapped in braces
color: #999;
width: 50%;
}
.@{Wrap}{
color:#ccc;
}
#@{Wrap}{
color:#666;
}
/ * Generated CSS * /
#wrap{
color: #999;
width: 50%;
}
.wrap{
color:#ccc;
}
#wrap{
color:#666;
}
3. The attribute value as a variable
@borderStyle: border-style;
@Soild:solid;
#wrap{
@ {BorderStyle}: @Soild; // variable name must use braces wrap
}
/ * Generated CSS * /
#wrap{
border-style:solid;
}
4.url path as a variable
@images: "../img";// requires quotes
body {
background: url ( "@ {images} /dog.png"); // variable name must surrounding braces
}
/ * Generated CSS * /
body {
background: url("../img/dog.png");
}
5. The method as stated variables eg: @name {};
@background: {background:red;};
#main{
@background();
}
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#with{
@Rules();
}
/ * Generated CSS * /
#main{
background:red;
}
#with{
width: 200px;
height: 200px;
border: solid 1px red;
}
6. Variable operation
rule:
When the addition and subtraction, in a first unit of data as a reference.
When multiplication and division, note that the unit must be unified.
@width:300px;
@color:#222;
#wrap{
width:@width-20;
height:@width-20*5;
margin:(@width-20)*5;
color:@color*2;
background-color:@color + #111;
}
/ * Generated CSS * /
#wrap{
width:280px;
height:200px;
margin:1400px;
color:#444;
background-color:#333;
}
7. The scope of variables
The principle of proximity does not refer to the location code, but to the hierarchical structure of the code.
@color:red;
div{
@color:blue;
background: @color;
}
8. variables defined by the variable
Order to resolve a parsing layer by layer from back to front.
@fnord: "I am fnord.";
@var: "fnord";
#wrap::after{
content: @@ var; // replace its value will @var content: @fnord;
}
/ * Generated CSS * /
#wrap::after{
content: "I am fnord.";
}
2. Nesting
1. & symbols, represents the upper-stage selector names.
#header{
&: After {// Note: & can not be omitted, if omitted, will each add a child element after.
content:"Less is more!";
}
.title{
font-weight:bold;
}
& _Content {// understood manner: & directly replace #header
margin:20px;
}
}
/ * Generated CSS * /
#header::after{
content:"Less is more!";
}
#header .title {// nested
font-weight:bold;
}
#header_content {// no nested!
margin:20px;
}
2. Nested overwrite the original style
div{
width:200px;
height:200px;
background:red;
.show{
display: none;
}
}
.show{
display: block; // are covered only when covered in div using show
}
3. Media inquiries
css writing:
@media only screen and {max-width：1200px；}{
div{}
}
@media only screen and {min-width:992px;}{
div{}
}
@media only screen and {min-width:768px}{
div{}
}
less writing:
#main{
@media screen{
@media (max-width:768px){
width:100px;
}
}
@media tv {
width:2000px;
}
}
/ * Generated CSS * /
@media screen and (max-width:768px){
#main{
width:100px;
}
}
@media tv {
#main{
width:2000px;
}
}
4. The method of mixing
1. Basic Method
Highlights: "." And "#" prefix can be used as a method. Can not apply parentheses, but to avoid confusion css format, it suggested adding parentheses "()."
.card(){
background: red;
}
#post(){
color: #fff;
}
// or
.card{
background: red;
}
#post{
color: #fff;
}
#wrap{
.card();
#post();
}
// generated css
.card {
background: red;
}
#post {
color: #fff;
}
#wrap {
background: red;
color: #fff;
}
2. The method of parameter passing, a first default parameter passing, a second variable parameters can be passed, a similar function
.setSize(@width_size,@height_size){
width:@width_size;
height:@height_size;
}
.card(){
background: red;
}
.setFont(@color:#fff,@fontSize:20px){
color: @color;
font-size: @fontSize;
}
.boxShadow(...){
box-shadow: @arguments;
}
.textShadow(@a,...){
text-shadow: @arguments;
}
#wrap{
.setSize(100px,200px);
.card();
.setFont();
.boxShadow(1px,4px,30px,blue);
.textShadow(1px,4px,30px,green);
}
// generated css
#wrap {
width: 100px;
height: 200px;
background: red;
color: #fff;
font-size: 20px;
box-shadow: 1px 4px 30px blue;
text-shadow: 1px 4px 30px green;
}
In the case where a plurality of matching 3. The method of
Similar to polymorphism. Somewhat similar to the switch case
Multiple methods of the same name, which passed due to the different parameters for different functions.
.triangle(top,@width:20px,@color:#000){
border-color:transparent transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
border-color:transparent @color transparent transparent ;
}
.triangle(bottom,@width:20px,@color:#000){
border-color:@color transparent transparent transparent ;
}
.triangle(left,@width:20px,@color:#000){
border-color:transparent transparent transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
border-style: solid;
border-width: @width;
}
#main{
.triangle(left, 50px, #999)
}
/ * Generated CSS * /
#main{
border-color:transparent transparent transparent #999;
border-style: solid;
border-width: 50px;
}
The method of use of nested, similar objects js
>
selector, choice is the son of an element, the element must have a direct blood is the source of the parent element. - when the command space is introduced, such as the use of
>
a selector, not the parent element parentheses. - Do not use a separate namespace methods must be introduced namespace, which method to use. - sub-method can be used on the one passed in the method
#card(){
background: #723232;
.d(@w:300px){
width: @w;
#a(@h:300px){
height: @h; // can be passed in a layer on the method used
width: @w;
}
}
}
#wrap{
#card> .d> #a (100px); // can not be bracketed parent element
}
#main{
#card .d();
}
#with{
// method should not be used alone namespace
//. D () if not preceded by the introduction of namespaces #card, will be thrown
#card; // equivalent to #card ();
.d (20px); // must be introduced #card
}
/ * Generated CSS * /
#wrap{
height:100px;
width:300px;
}
#main{
width:300px;
}
#with{
width:20px;
}
5. Use conditions: less having a when, and, not the "," syntax
Comparison operators are:>> = = = <<
= Representatives are equal
Remove keywords true value other than the default will be to other fales
#card{
// and operator, and is equivalent && operator must comply with all the conditions will be performed
.border(@width,@color,@style) when (@width>100px) and(@color=#999){
border:@style @color @width;
}
// not the operator, the equivalent of a non-operational!, Do not meet the conditions will be performed
.background(@color) when not (@color>=#222){
background:@color;
}
//, comma separator: || operation or equivalent, as long as there will be executed a qualifying
.font(@size:20px) when (@size>50px) , (@size<100px){
font-size: @size;
}
}
#main{
#card>.border(200px,#999,solid);
#card .background(#111);
#card > .font(40px);
}
/ * After generating CSS * /
#main{
border:solid #999 200px;
background:#111;
font-size:40px;
}
6. loop syntax
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
.generate-columns(4);
/ * After generating CSS * /
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
7. important: this method corresponds to each of the properties are set again important, can not be overwritten
.border{
border: solid 1px red;
margin: 50px;
}
#main{
! .Border () important; // each property border inside will be important
}
/ * After generating CSS * /
#main {
border: solid 1px red !important;
margin: 50px !important;
}
8. inherit properties: extend is less of a pseudo-class. It can inherit all style declarations in the match.
Plus all can inherit all properties
Between the selector and the extension spaces are allowed: pre: hover: extend (div pre).
You can have multiple extensions: pre: hover: extend (div pre): extend (.bucket tr) - Note that this is pre: hover: extend (div pre, .bucket tr) the same.
Extension must be the last: pre: hover: extend (div pre) .nth-child (odd). If a rule set contains a plurality of selectors, all selectors can extend the use of keywords.
.mainBg{
background: red;
.fontSize{
color: #fff;
}
}
#main{
background: green;
width: 100px;
height: 100px;
&:extend(.mainBg);
}
#with{
background:blue;
width: 100px;
height: 100px;
&:extend(.mainBg .fontSize);
}
#wrap:extend(.mainBg all) {
width: 100px;
height: 100px;
font-size: 30px;
}
// generated css
.mainBg,
#main,
#wrap {
background: red;
}
.mainBg .fontSize,
#with,
#wrap .fontSize {
color: #fff;
}
#main {
background: green;
width: 100px;
height: 100px;
}
#with {
background: blue;
width: 100px;
height: 100px;
}
#wrap {
width: 100px;
height: 100px;
font-size: 30px;
}
9. Import
In less file can introduce other less files. Use the keyword import.
Less import file, the suffix may be omitted.
import “index.less”; import “index”;
@import can be placed anywhere
@import 'index.less'
Plus reference attribute, not compile the introduction of file, but you can use variables of the file
@import (reference) “bootstrap.less”;
Plus once-attribute that same file will only be imported once, and repeat the code then import the file will not be resolved.
@import (once) "foo.less"; @import (once) "foo.less"; // this statement will be ignored
Plus multiple attribute, allowing import multiple files with the same name
@import (multiple) "foo.less"; @import (multiple) "foo.less";
10. Avoid compilation
#main{
width:~'calc(300px - 30px)';
}
/ * After generating CSS * /
#main{
width:calc(300px - 30px);
}
11. Use js less in the