目录
什么是CSS预处理器
简单来说,CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用,它为CSS增加了一些编程的特性,不用考虑浏览器的兼容性问题,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
less的介绍
less 是一款比较流行的预处理 CSS,支持变量、混合、函数、嵌套、循环等特点。
less的使用方法
方法一:写完 less 文件,自动编译为 css ,在 html 中引用 css。
方法二:在 html 中直接引用 less 文件。
注意:一般使用方法一,方法二会多出编译的时间,因为 less 需要编译,就需要引入 less.js ,多了一个 HTTP 请求,同时当浏览器禁用了 js ,你的样式就不起作用了。
1、方法一的使用:
步骤一:在 vscode 中安装插件 Easy LESS 。
步骤二:重启 vscode。
步骤三:文件—>首选项—>设置—>搜索 settings.json
在 settings.json 中增加属性:
{
"less.compile":{
"outExt":".css"
}
}
在 vscode 中编写 less 文件,即可自动生成 css 文件 。
2、方法二的使用:
其实是浏览器在本地在线地把 less 文件转换为 css 文件。
步骤一:在 less 官网下载 less.js 文件:
把下载好的文件放在工程文件的lib文件夹里。
步骤二:在 html 中引入 less.js 和我们自己写的 wode.less。
引入代码为:
<link rel="stylesheet/less" href="../wode.less">
注意:我们要在服务器中打开 html 文件,否则,看不到效果。
less语法
1、注释:
less 的注释可以有两种:
第一种注释:模板注释
// 模板注释 这里的注释转换成CSS后将会删除
因为 less 要转换为 css 才能在浏览器中使用,css 不识别这种注释。
第二种注释:CSS注释
/* CSS 注释语法 转换为CSS后依然保留 */
总结:如果在 less 中写注释,我们推荐写第一种注释。除非是类似于版权等内容,就采用第二种注释。
2、定义变量
我们可以把重复使用或经常修改的值定义为变量,在需要使用的地方引用这个变量即可,可以避免很多重复的工作量。
(1)在 less 文件中,定义一个变量:
@变量名: 变量值; //格式
@bgColor: #bfa; //格式举例
(2)在 less 文件中引用这个变量。
wode.less:
// 定义变量
@bgColor: #bfa;
// 引用变量
body{
background-color: @bgColor;
}
我们将上面 less 文件编译为 css 文件后,自动生成的代码如下:
body{
background-color: #bfc;
}
3、使用嵌套
css 中经常会用到子代选择器,效果可能是这样的:
.outer {
width: 10px;
}
.outer .nav {
height: 10px;
}
.outer .nav a {
color: #bfa;
}
上面的代码嵌套了很多层,写起来很繁琐,如果使用 less 的嵌套语法,就比较简洁。
嵌套的举例如下:
wode.less:
.outer {
width: @outerWidth;
.nav {
height: 10px;
a {
color: #bfa;
&:hover {
color: #fff;
}
}
}
}
4、Mixin
Mixin 的作用是把重复的代码放到一个类当中,每次只要引用类名,就可以引用到里面的代码了,非常方便。
(1)在 less 文件中定义一个类:(将重复的代码放到自定义的类中)
/* 定义一个类 */
.banner(@radio: 5px) {
border-radio: @radio;
}
上方代码中,第一行括号里的内容是参数:这个参数是缺省值。
(2)在 less 文件中引用上面这个类:
#pointer {
.banner;
}
#clear {
.banner(10px);
}
上方代码中,pointer 中的引用没有带参数(无括号),表示参数为缺省值; clear 中的引用带了参数,那就用这个参数。
5、Import
在开发时,css 文件可以有很多个,less文件也可以有很多个,我们可以将不同的样式放到多个文件中,最后通过@import 的方式合并。意思就是,当出现多个 less 文件时,怎么引用它们。
(1)定义一个被引用的less文件:
_button.less:(
被引用的 less 文件,我们一般在前面加下划线,表示它是部分文件。)
.button{
color: @buttonColor;
}
在这个自定义的 less 文件中可以引用 wode.less 里的自定义变量
(2)在 wode.less
中引用上面的 _button.less
wode.less:
@buttonColor: #bfa;
@import url('_button.less:'); //这里的路径写的是相对路径
body{
width: 10px;
}
将上面的 wode.less 编译为 wode.css之后,自动生成的代码如下:
.button {
color: #bfa;
}
body {
width: 10px;
}