CSS预处理器 Less的基本使用

Less的基本使用

简介

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，功能更加强大，开发更加方便。

工作流程

Less 包含一套自定义的语法及一个解析器，Less代码会先被编译成CSS，这样才会被浏览器识别，并引用编译后的CSS文件为元素添加样式。

注意

1.less可以在服务器端，浏览器端被引用；
2.在浏览器端引用外部less文件会出现跨域问题* 可以直接在html中使用less* 或使用live server开启本地服务。
3.less中的注释* 以//开头的注释不会被编译到css文件中* 以/**/包裹的注释会被编译到css文件中

基本使用

1.定义变量

（1）以@开头> @color:pink 当文件中所有的pink都要改成deeppink时，直接修改定义就可以了；> 也可以设置属性/选择器变量/类名> @m:margin：使用到margin的地方都可以用 @{m} 的格式使用；> @selector:#wrap 使用到#wrap的地方都可以用 @{selector} 的格式使用；> @url:路径 使用到该路径的地方都可以用 @{url} 的格式使用。> （2）以$开头> $color:pink>background-color:$color;

2.变量的延迟加载

@var:0;
.class{@var:1;.brass:{@var:2; /* 编译后是3 当某一个位置需要@var这个变量的值时 他会解析一整个作用域中间的@var,再确定@var的值 */three:@var;@var:3;}// 编译后是1one:@var;
} 

3.less的嵌套规则

• CSS不支持代码嵌套，Less支持，嵌套代表选择器的父子关系
• &的使用(使平级) &表示外层的父元素

#wrap{.inner{/*直接写:hover时由于嵌套把hover当成inner的子元素去解析，hover没有效果 */&:hover{}}
} 

4.less混合

有重复样式时,可以将样式提前写好放在一个类里面，然后下面在引用时可以直接写该段样式代码的类名。

// (1)普通混合：
.juzhong{xxxxx
}
// 下面有需要用到重复代码时可以这样
.a{.juzhong
}
/*普通混合的样式编译之后会在css文件中出现但其实我们不想要这个编译结果，我们要的是.a的样式能够编译即可
*/

// (2)不带输出的混合:
.juzhong(){xxxxx
}
// 与上述类似,区别在于加了个括号,该部分样式不会出现在编译后的css文件里面

// (3)带参数混合:
.juzhong(@w,@h,@color){width:@w;height:@h;background-color:@color;
}
// 使用时记得传参
.a{.juzhong(100px,50px,pink);
}

// (4)带参数且有默认值的混合:
// 与上述类似，只是在调用时如果不传参就有默认参数
.juzhong(@w:10px,@h:10px;@color:pink){

}

// (5)命名参数混合:
// 当形参和实参个数不匹配时可以使用命名参数
.juzhong(@w,@h,@color){

}
.a{// 只给color赋值,若不指定@color,只传一个参数,默认会给第一个形参即width赋值.juzhong(@color:black);
}

// (6)匹配模式
.triangle(L,@w,@c){

}

.triangle(R,@w,@c){

}
// 调用时 .triangle(L,40px,pink); .triangle(R,30px,black)

// (7)还有第7种arguments变量，不过以上6种已经满足大部分的开发需求。 

5.less计算

在less中可以进行加减乘除的运算> width:(100+100px) 计算双方只要有一方携带单位,结果就带有单位

6.less继承

 .p1{display:inline-block;color:red;}.p2:extend(.p1){font-size:12px;}

 // 相当于p2继承了p1的样式,p2还有新的样式font-size:12px 

7.函数

如：> 对颜色取中间值的函数:average(red,yellow)> 取更深的颜色 darken(#bfa,15%) 取比#bfa更深15%的颜色

8.@import同样地，也可以引入外部的Less文件。

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享