心得笔记

less变量的定义使用@符号 less申明变量(代码块) less语法嵌套 extend是less的一个伪类。它可以继承所匹配声明中的全部样式。 在less文件中可以引入其他的less文件。使用关键字import。

less语法,前端less常用技巧总结

作者:何兴林 发布时间: 2020-04-07 阅读:


// 双斜杠注释不会被编译
/**/ 区间注释会被编译

1变量的定义使用@符号 然后冒号隔开分号结束 可以是值或者属性

@test:10px;//定义一个变量
a{
width:@test; //使用变量
}

2选择器变量

@mySelector: #wrap; @Wrap: wrap;
@{mySelector}{ ==》 #wrap{
.@{Wrap}{ ==》 .wrap{
#@{Wrap}{ ==》 #wrap{

3、url变量

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

4、申明变量(代码块)

定义:@name:{ Key:value; Key:value; }
@Rules:{ width: 200px; height: 200px; border: solid 1px red; }; #con{ @Rules(); }

5、运算变量

加减法时,以第一个数据的单位为基准。
乘除法时,注意单位一定要统一。
@width:300px; @color:#222;
#wrap{ width:@width-20; height:@width-20*5; margin:(@width-20)*5; color:@color*2; background-color:@color + #111; #333 }

6、用变量的定义变量

解析的顺序是从后向前逐层解析
@fnord: "I am fnord."; @var: "fnord"; #wrap::after{ content: @@var; //将@var替换为其值 content:@fnord; } /* 生成的 CSS */ #wrap::after{ content: "I am fnord."; }

7、&符号,表示的是上1级选择器的名字。

&:after
&_content

8、媒体查询

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

9、混合方法

1) 无参数方法 方法如声明的集合,使用值直接键入名称即可。

要点:“.”与“#”都可以作为方法前缀。可以不适用小括号,但是为了避免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); }

可以方法的匹配模式 类似switch case

.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

Less没有if / else 但是less具有一个when,and,not与“,”语法。

#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); }

10、继承扩展

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

11、导入

在less文件中可以引入其他的less文件。使用关键字import。
导入less文件,可以省略后缀。
import “index.less”; import “index”;
@import可以放在任何地方


文章地址:http://blog.yunzhancms.com/index.php?s=/Article/detail/id/316 欢迎转载,转载时请注明出处

分享到: