CSS预处理器
CSS 预处理器定义了一种新的语言,其基本思想是:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。
到目前为止,最常用的CSS预处理器有Sass、Less和Stylus。
less的介绍
less 是一款比较流行的预处理 CSS,支持变量、混合、函数、嵌套、循环等特点。
less的使用
安装依赖
nom install --save-dev less less-loader
在main.js中引入
import less from 'less'
Vue.use(less)
注释
less的注释有两种
第一种:模版注视
// 模板注释 这里的注释转换成CSS后将会删除
因为 less 要转换为 css才能在浏览器中使用。转换成 css 之后,这种注释会被删除(毕竟 css 不识别这种注释)。
第二种:css注释语法
/* CSS 注释语法 转换为CSS后让然保留 */
总结:如果在less中写注释,我们推荐写第一种注释。除非是类似于版权等内容,就采用第二种注释。
定义变量
我们可以把重复使用或经常修改的值定义为变量,在需要使用的地方引用这个变量即可。这样可以避免很多重复的工作量。
在less文件中,定义一个变量,并使用
@变量名: 变量值; //格式
@bgColor: #f5f5f5; //格式举例
// 引用变量
body{
background-color: @bgColor;
}
我们将上面的less文件编译成css文件后,会自动生成如下代码:
body{
background-color: #f5f5f5;
}
嵌套
在css中经常用到的子代选择器,代码如下“:
.container {
1024px;
}
.container > .row {
height: 100%;
}
.container > .row a {
color: #f40;
}
.container > .row a:hover {
color: #f50;
}
用 less 的嵌套语法来写这段代码,就比较简洁清晰:
.container {
@containerWidth;
> .row {
height: 100%;
a {
color: #f40;
&:hover {
color: #f50;
}
}
}
Mixin
Mixin的作用是把重复的代码放到一个类当中,每次只要引用类名,就可以引用到里面的代码了,非常方便。
在less文件中定义一个类:
/* 定义一个类 */
.roundedCorners(@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
其中,@radius为参数,5px为默认值,可以空。
在less文件中使用上面定义的这个类:
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
参数可以有多个,有多个参数时用分号隔开,调用时就是通过变量名称,而不是位置。
.mixin(@radius:10px;@color:green;) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
color:@color;
}
使用:
#header{
.mixin(@color:green);
}
.button{
.mixin(@color:green);
}
less的内置函数
percentage(百分比)
.button {
percentage(.5);
}
编译之后的css为:
.button {
50%;
}
混合
抽取公共类,例如下面的css代码可以用less这样编写
css代码如下:
在css中的代码:
#header a {
color: #111;
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
#header span {
height: 16px;
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
#header p {
color: red;
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
.borde_style {
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
less文件中,我们可以定义一个公共的样式名borde_style,代码如下:
.borde_style {
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
#header a {
color: #111;
.borde_style;
}
#header span {
height: 16px;
.borde_style;
}
#header p {
color: red;
.borde_style();
}
文件引入 Import
在开发阶段,我们可以将不同的样式放到多个文件中,最后通过@import 的方式合并。意思就是,当出现多个 less 文件时,怎么引用它们。
定义一个被引用的less文件,名为_button1.less:
.btn{
line-height: 100px;
color: @btnColor;
}
在另一个less文件中引用:
@btnColor: red;
@import url(`_button1.less:'); //这里的路径写的是相对路径
body{
1024px;
}
编译之后的代码如下:
.btn {
line-height: 100px;
color: red;
}
body {
1024px;
}
总结:less的优势和劣势
优势
开发速度提升
代码优化效率提高(对开发者而言)
代码更通俗易懂(对开发者而言)
代码更干净,优美
维护简单便捷
功能更多更强
劣势
舍弃用户体验来提高开发的效率
舍弃网页打开速度换取开发效率提升
需要多一个编译器来重新编译一次CSS代码,也就是给浏览器多了一道工序,网页显示的速度会减慢