维护 CSS 的弊端
css本质上不是一门语言,是一个简单的样式表,代码维护相对老套,不够灵活
.
Less介绍
less预处理器 : 依然使用css语法, 引入了变量, 混合, 运算, 嵌套等功能, 大大简化了css 的编写,并且 降低了 css 的维护成本
常见的css预处理器 : Less | SASS | stylus 等
复制代码
变量
☞@自定义变量名: 值;
例如:
@nav_bgcolor: red;
nav {
color: @nav_bgcolor;
}
☞变量的运算:
@width: 10;
nav {
width: @width * 3px;
}
复制代码
混合
☞ 定义一个公共的样式(可以式类选择的语法,可以是ID选择器的语法)
例如:
.test() {
width: 50px;
height: 50px;
}
nav {
调用样式
.test();
}
header {
.test();
}
☞ 可以设置参数
例如:
.test(@width) {
width: @width;
}
nav {
.test(100px);
}
☞ 可以为参数设置默认值
例如:
.test(@width: 100px) {
width: @width;
}
nav {
.test();
}
header {
.test(50px);
}
复制代码
嵌套
例如:
nav {
ul {
li {
}
}
}
复制代码
在浏览器中预览LESS文件(了解)
1. HTML页面直接沟通link标签引用 less文件
<link rel="stylesheet/less" type="text/css" href="less文件.less">
2. HTML页面中引用用来解析less文件的一个js文件
<script type="text/javascript" src="less.js"></script>
备注:
1. 以上执行过程需要在服务器环境下进行
2. webstorm开发工具下,可以执行运行,因为webstorm自带一个服务器环境
复制代码