1.嵌套
.container{
width:100%;
height 100%;
h1{
font-size: 25px;
color:#E45456;
}
}
经过less编译以后为
.container{
width:100%;
height 100%;
}
.container h1{
font-size: 25px;
color:#E45456;
}
2.使用变量
@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}
经过less编译以后为
.myclass {
font-size: 20px;
color:green;
}
3.转义
p {
color: ~"green";
}
经过less编译以后为,~“some_text"中的任何内容将显示为 some_text
p {
color: green;
}
4.函数
@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
width: percentage(@width);
}
经过less编译以后为,percentage相当于是转换为百分比。1就是100%，如果是0.6那就是60%
.mycolor {
color: #FF8000;
width: 100%;
}
5.命名空间以及访问器
.class1 {
.class2 {
.val(@param) {
font-size: @param;
color:green;
}
}
}
.myclass {
.class1 > .class2 > .val(20px);
}
经过less编译以后为,用于将mixins分组在通用名称下。 使用命名空间可以避免名称冲突，并从外部封装mixin组，通过命名来降低代码的冗余度
.myclass {
font-size: 20px;
color: green;
}
6.变量范围
@var: @a;
@a: 15px;
.myclass {
font-size: @var;
@a:20px;
color: green;
}
经过less编译以后为,变量范围指定可用变量的位置。 变量将从本地作用域搜索，如果它们不可用，则编译器将从父作用域搜索,因为@var指向的是@a，在.myclass中定义了@a的值为20px，所以font-size的值为20px，如果在.myclass中未定义，那么指向的值为父作用域中的15px
.myclass {
font-size: 20px;
color: green;
}
7.导入外部文件，后面指向的是文件路径@import
@import "myfile.less";
8.扩展extend
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
经过less编译以后为,Extend是一个Less伪类，它通过使用:extend 选择器在一个选择器中扩展其他选择器样式,&相当于h2，有点类似js中的this，指向它的本身，extend指向了.style，相当于h2具有了.style这个类中的所有样式
h2 {
font-style: italic;
}
.style,h2 {
background: green;
}
也可以类似理解为
h2 {
font-style: italic;
background: green;
}
.style{
background: green;
}
9.混合Mixins
.p1{
color:red;
}
.p2{
background : #64d9c0;
.p1();
}
.p3{
background : #DAA520;
.p1;
}
经过less编译以后为,混合类似于编程语言中的函数。 Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。 在Less中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。相当于你的所有类或者id选择器都是可以复用的，相当于js中的方法
.p1 {
color: red;
}
.p2 {
background: #64d9c0;
color: red;
}
.p3 {
background: #DAA520;
color: red;
}
10.混合参数
.border(@width; @style; @color) {
border: @width @style @color;
}
.myheader {
.border(2px; dashed; green);
}
经过less编译以后为,参数mixin使用一个或多个参数，通过参数和其属性来扩展Less的功能，以便在混合到另一个块时自定义mixin输出,相当于js中的方法传参,不过要注意中间的参数用;分割
.myheader {
border: 2px dashed green;
}
10.Mixin Guards
.mixin (@a) when (lightness(@a) >= 50%) {
font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
font-size: 16px;
}
.mixin (@a) {
color: @a;
}
.class1 {
.mixin(#FF0000)
}
.class2 {
.mixin(#555)
}
经过less编译以后为,如果你想在表达式上匹配简单的值或参数数量，那么你可以使用Guards。 它与mixin声明相关联，并包括附加到mixin的条件。 每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。Less使用Guards的mixins而不是if / else语句，并执行计算以指定匹配的mixin,个人理解有点像是js中的switch，进行条件的匹配，选择相应的结果。lightness()函数是取得颜色值的亮度，返回值0~100%，rgb()里的三个值越大，亮度越高，值越小，亮度越低。这段代码从下往上理解会更方便一些,首先是第一个.class1，调用了.mixin，传参为#FF0000,相当于@a的值定义为#FF0000，然后进入when的的条件判断，由于lightness('#FF0000')的值大于等于50%，所以字体大小为14px,第二个.class2同理
.class1 {
font-size: 14px;
color: #FF0000;
}
.class2 {
font-size: 16px;
color: #555;
}
10.CSS Guards，不仅Mixins可以使用Guards，CSS也可以使用Guards
@usedScope: global;
.mixin() {
@usedScope: mixin;
.cont when (@usedScope=global) {
background-color: red;
color: black;
}
.style when (@usedScope=mixin) {
background-color: blue;
color: white;
}
@usedScope: mixin;
}
.mixin();
经过less编译以后为,Guard用于匹配表达式上的简单值或参数个数。 它应用于CSS选择器。 它是用于声明mixin并立即调用它的语法。 要成功地引出if类型语句; 将此功能与功能＆结合使用，您可以将多个guards分组。由于本地作用域中定义了变量usedScope的值为mixin，（如果本地作用域中未定义，那么将访问父作用域中的值，那么usedScope的值将为global）。在进行判断，那么.style的Guard将成立，输出结果为.style
.style {
background-color: blue;
color: white;
}
11.循环
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
经过less编译以后为,Loops语句允许我们多次执行一个语句或一组语句。 当递归mixin与 Guard表达式和模式匹配组合时，可以创建各种迭代/循环结构。可以看到传入的值为7，每次循环-1，当数值=0的时候，循环就停止了，总共循环了7次，每次累加25px
div {
width: 25px;
width: 50px;
width: 75px;
width: 100px;
width: 125px;
width: 150px;
width: 175px;
}
12.父选择器&，其实前面的案例中已经有所使用了
a {
color: #5882FA;
&:hover {
background-color: #A9F5F2;
}
}
经过less编译以后为,&可以理解为js中的this，指向了它的父级a
a {
color: #5882FA;
}
a:hover {
background-color: red;
}
参考于w3cschool.
网友评论