心得笔记

// 双斜杠注释不会被编译

/**/ 区间注释会被编译

@test:10px;//定义一个变量

a{

width:@test; //使用变量

}

@mySelector: #wrap; @Wrap: wrap;

@{mySelector}{ ==》 #wrap{

.@{Wrap}{ ==》 .wrap{

#@{Wrap}{ ==》 #wrap{

@images: "../img";//需要加引号

background: url("@{images}/dog.png");//变量名 必须使用大括号包裹

定义：@name：{ Key：value； Key：value； }

@Rules:{ width: 200px; height: 200px; border: solid 1px red; }; #con{ @Rules(); }

加减法时，以第一个数据的单位为基准。

乘除法时，注意单位一定要统一。

@width:300px; @color:#222;

#wrap{ width:@width-20; height:@width-20*5; margin:(@width-20)*5; color:@color*2; background-color:@color + #111; #333 }

解析的顺序是从后向前逐层解析

@fnord: "I am fnord."; @var: "fnord"; #wrap::after{ content: @@var; //将@var替换为其值 content:@fnord; } /* 生成的 CSS */ #wrap::after{ content: "I am fnord."; }

&:after

&_content

#main{ //something... @media screen{ @media (max-width:768px){ width:100px; } }

要点：“.”与“#”都可以作为方法前缀。可以不适用小括号，但是为了避免css格式混淆，建议加上小括号“（）”。

.card(){ //something.... } #wrap{ .card(); }

.setSize(@width_size,@height_size){ width:@width_size; height:@height_size; }

.border(@a:10px,@b:50px,@c:30px,@color:#000){ border:solid 1px @color; box-shadow: @arguments;//指代的是 全部参数 }

.boxShadow(...){ box-shadow: @arguments; } .textShadow(@a,...){ text-shadow: @arguments; } #main{ .boxShadow(1px,4px,30px,red); .textShadow(1px,4px,30px,red); }

.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) }

#card(){ background: #723232; .d(@w:300px){ width: @w; #a(@h:300px){ height: @h;//可以使用上一层传进来的方法 width: @w; } } }

使用：

#wrap{ #card > .d > #a(100px); // 父元素不能加 括号 } #main{ #card .d(); }

#con{

//不得单独使用命名空间的方法 //.d() 如果前面没有引入命名空间 #card ，将会报错 #card; // 等价于 #card(); .d(20px); //必须先引入 #card

}

条件运算符

比较运算有：> >= = =< <

=代表是等于

除去关键字true以外的值其他都会被默认为fales

#card{ // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行 .border(@width,@color,@style) when (@width>100px) and(@color=#999){ border:@style @color @width; } // not 运算符，相当于 非运算 !，条件为 不符合才会执行 .background(@color) when not (@color>=#222){ background:@color; } // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行 .font(@size:20px) when (@size>50px) , (@size<100px){ font-size: @size; } } #main{ #card>.border(200px,#999,solid); #card .background(#111); #card > .font(40px); } /* 生成后的 CSS */ #main{ border:solid #999 200px; background:#111; font-size:40px; }

Less并没有提供一个for等循环的方法但是可以使用递归的方法实现

.generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); } /* 生成后的 CSS */ .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }

方法使用了important，相当于这个方法中的每一个属性都设置了一遍important，不允许覆盖。

.border{ border: solid 1px red; margin: 50px; } #main{ .border() !important; } /* 生成后的 CSS */ #main { border: solid 1px red !important; margin: 50px !important; }

+代表的是逗号，+_代表的是空格。

.Animation() { transform+_: scale(2); } .main { .Animation(); transform+_: rotate(15deg); } /* 生成的 CSS */ .main { transform: scale(2) rotate(15deg); }

extend是less的一个伪类。它可以继承所匹配声明中的全部样式。

.animation{ transition: all .3s ease-out; .hide{ transform:scale(0); } } #main{ &:extend(.animation); } #con{ &:extend(.animation .hide); } /* 生成后的 CSS */ .animation,#main{ transition: all .3s ease-out; } .animation .hide , #con{ transform:scale(0); }

在less文件中可以引入其他的less文件。使用关键字import。

导入less文件，可以省略后缀。

import “index.less”; import “index”;

@import可以放在任何地方