less是一门 CSS 预处理语言的一种,它使用类似CSS的语法,它扩充了 CSS 语言,为CSS赋予了动态语言的特性。
less嵌套
它是一组css属性,允许将一个类的属性用于另一个类,并且包含类名作为其属性,在less可以使用类或id选择器以与css样式相同的方式声明mixin。它可以存储多个值,并且可以在必要时在代码中重复使用。例子
.container{
h1{
font-size:20px;
color:#e45456;
}
p{
font-size:20px;
color:#3C7949;
}
.class{
h1{
font-size: 18px;
color:green;
}
p{
font-size:18px;
color:red;
}
}
}
编译为:
.container p{
font-size:20px;
color:#e45456;
}
.container h1{
font-size:20px;
color:#e45456;
}
.container .class h1{
font-size: 18px;
color:green;
}
.container .class h1{
font-size: 18px;
color:red;
}
less操作(运算)
less支持一些算术运算,例如加号(+),减号(-),乘法(*),除法(/),他们可以对任何数字,颜色或变量进行操作。操作节省了大量的时间,当你使用变量,让你感到就像是简单地数字工作。
例子
@fonsize:10px;
.myclass{
font-size:@fontsize*2;
color:green;
}
编译为
.myclass{
font-size:20px;
color:green;
}
变量范围(作用域)
变量范围指定可用变量的位置。 变量将从本地作用域搜索,如果它们不可用,则编译器将从父作用域搜索。
@var: @a;
@a: 15px;
.myclass {
font-size: @var;
@a:20px;
color: green;
}
编译为
.myclass {
font-size: 20px;
color: green;
}
less注释
注释使代码清晰,并允许用户轻松地理解。 您可以在代码中使用块样式和行内注释,但是当编译LESS代码时,单行注释不会显示在CSS文件中。
例子
@var: @a;
@a: 15px;
.class {
font-size: @var;
@a:20px;
color: green;
}
//单行注释不会显示css文件中
/*多行注释 不会编译会显示在css文件中,
.class1 {
font-size: @var;
@a:20px;
color: green;
}*/
编译为:
.class {
font-size: 20px;
color: green;
}
变量
@nice-blue:#5b83ad;
@light-blue:@nice-blue+#111;
#header{ color:@light-blue:}
输出:
#header{ color:#6c94be;}
甚至可以在定义变量值是使用其他的变量:
@fnord:'I am fnord';
@var:'fnord';
content:@@var;
编译为:content:'I am fnord';
如果对同一个变量定义两次的话,在当前作用域中最后一次定义的将被使用。这与css的机制类似。最后一次定义的值会成为这个属性的值。
@var:0;
.class1{
@var:1;
.class{
@var:2;
three:@var;
@var:3;
}
one:@var;
}
编译为:
.class1.class{
three:3;
}
.class1{
one:1;
}
------------------未完继续更新-----------------