前端less学习笔记
学习总结并转载自[ https://juejin.im/post/5a2bc28f6fb9a044fe464b19#heading-6] 和 [ https://hackycy.github.io/2019/04/15/Less入门/]
感谢一些我忘记的网络博主
less混合
混合就是一种或者一系列属性从一种规则集引入(混合)到另一种规则集的方法
- 注意:
- 使用 . 与 # 皆可作为方法前缀。
- 使用时 .混合名; 和 .混合名;两者等价。
- 可以带选择器混合:
// less
.p{
&:hover{
background:red;
}
}
div{
.p();
}
//css
div:hover{
background:red;
}
- 一个混合中如果可以带有多个参数,每个参数之间用逗号或者分号分割开,不能逗号或者分号一起使用
如. border(@a:10px,@b:50px;@c:30px){} 会报错
一. 普通混合(无参数混合)
- 声明混合时不加双括号(即没有参数时),会导致 混合会编译成样式出现在 css中,如下面建议加上双括号。
less:
.boder{
boder-color:#fbc500;
border-width:1px;
}
.wrap{
color:blue;
.boder;
}
css:
.boder{
boder-color:#fbc500;
border-width:1px;
}
.wrap{
color:blue;
boder-color:#fbc500;
border-width:1px;
}
二. 带多个参数
- 多个参数时,参数之间可以用分号或逗号分隔,不可一起使用
- 实参传的是字符串,可以写多个值,可以用空格分开,要用逗号分开(但会把逗号当值传进去),不过所有实参都要以分号结尾。
//less
.mixinone(@color, @padding,@c:1) {
color:@color;
padding:@padding;
c:@c;
}
.div1{
.mixinone(#000;2px);
}
//多个值
.some{
.mixinone(#000;2px 2px 1px 1px;1,2);
}
// css:
.div1 {
color: #000;
padding: 2px;
c: 1;
}
.some {
color: #000;
padding: 2px 2px 1px 1px;
c: 1, 2;
}
三. 默认参数混合
- less可以使用默认参数,如果没有传参,使用默认参数
- @arguments 犹如 JS 中的 arguments 指代的是 全部参数。
- 传的参数必须带有单位
//less
.border(@a:10px,@b:50px;@c:30px,@color:#000){
border:1px solid @color;
box-show:@arguments; // 指代所有参数
}
#wrap{
.border(10px,5px,30px,red);
//.border(@c:10px,@a:5px,@b:30px,@color:red); //命名参数
}
#content{
.border(0px);
}
#main{
.boder();
}
//CSS
#wrap {
border: 1px solid red;
box-shadow: 0px 5px 30px red;
}
#content {
border: 1px solid #000;
box-shadow: 0px 50px 30px #000;
}
#main {
border: 1px solid #000;
box-shadow: 10px 50px 30px #000;
}
四. 命名参数
引用mixin时,可以通过参数名称而不是参数的位置来为mixin提供参数值, 任何参数都可以通过它的名称来引用,这样就不用按照任意特定的顺序来使用参数。也就是调用某个写好的mixin时,括号里的参数名和值都写上。
注意:如果只写了其中的某个的引用,其他不写,会继续按照位置来匹配参数
//less
.mar(@color:red,@c:2,@pad:1px){
c: @c;
color:@color;
padding: @pad;
}
.div2{
.mar(@c:1;@color:blue;@pad:2px);
}
//只写了其中的某个的引用
.div3{
.mar(@c:1,2,3);
}
//css:
.div2 {
c: 1;
color: blue;
padding: 2px;
}
.div3 {
c: 1;
color: 2;
padding: 3;
}
五.@arguments变量:代表所有可变参数
@arguments代表所有可变参数,参数的先后顺序是你写的()里的先后顺序;值的位置和个数是一一对应的,如果有参数取默认值,需要用命名参数的方式。
//less:
.border(@w:1px; @x:solid; @c:#ccc){
border : @arguments;
}
p{
.border();
}
//css:
p {
border: 1px solid #ccc;
}
六. 匹配模式:定义一个字符,使用时加上那个字符,就调用相应的规则
注意:如果定义一个和匹配模式引用名和形参都相同的混合,外加有一个变量@_(建议放在第一位),代表当匹配模式调用时,这个混合也调用,所以这个这个混合用来作为匹配模式中的所有公共属性的混合
//less:
.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;
}
#triangle{
.triangle(left, 50px, #999)
}
// css:
#triangle {
border-color: transparent transparent transparent #999;
border-style: solid;
border-width: 50px;
}
七. 得到混合中变量的返回值:通过计算来获取值
//less:
.ave(@x,@y){
@cc:@x+@y;
@d:@x/@y;
}
.div{
.ave(6px,3px);
c:@cc;
d:@d;
}
// css:
.div {
c: 9px;
d: 2px;
}
八. 命名空间:有时混合中嵌套了比较多的规则,而我们只需要其中一部分,可使用命名空间获取
-
使用 > 和 空格 效果一样,选择器,选择的是 儿子元素,就是必须与父元素 有直接血源的元素。也可以省略 ‘>’,用空格。
-
在引入命令空间时,如使用 > 选择器,父元素不能加 括号。
-
不得单独使用命名空间的方法 必须先引入命名空间,才能使用 其中方法。但是会执行引入的命名空间。
-
子方法 可以使用上一层传进来的方法,使用方法和使用命名空间方法一样;
//less #card(){ background: #723232; .d(@w:300px){ width: @w; #a(@h:300px){ height: @h; #card .d(100px);//可以使用上一层传进来的方法 } } } #wrap{ #card > .d > #a(100px); // 父元素不能加 括号 } #main{ #card .d() #a(100px); //用空格 } /* #d{ .d();//报错,必须先引入 #card } */ #con{ //不得单独使用命名空间的方法 //.d() 如果前面没有引入命名空间 #card ,将会报错 #card; // 等价于 #card(); .d(20px); //引入了#card,不报错,但是会执行#card; } /* 生成的 CSS */ #wrap { height: 100px; width: 100px; } #main { height: 100px; width: 100px; } #con { background: #723232; width: 20px; }
九. 多个相同混合:定义多个具有相同名称和参数的mixin是合法的。
会把所有相同混合名的属性全部调用,不管多少个参数。
注意:多个相同混合,会把不同值的属性全部展示出来,即使属性名相同;如果值相同,只展示一次
//less:
.mixin(@color:red,@c:1,@pad:1px){
c: @c;
color:@color;
padding:@pad;
border-color: yellow;
}
.mixin(@color:red,@c:2){
c: @c;
color:@color;
border-width: 1px;
border-style: dashed;
}
.mixin(@color:red){
color:@color;
border-style: solid;
border-width: 1px;
}
.div4{
.mixin(blue);
}
生成CSS:
.div4 {
c: 1;
padding: 1px;
border-color: yellow;
c: 2;
border-style: dashed; //不同值的相同属性
color: blue;
border-style: solid; //不同值的相同属性
border-width: 1px; 相同值的相同属性
}