less
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
注释
以//开头的注释,不会被显示到css文件中
以/**/包裹的注释会被显示到css文件中
变量
使用@来申明一个变量:@pink:pink;可以作为常数来使用。
注意(如果属性值有单位一般我们都会把单位放到变量上,这样)
1.作为普通属性值只来使用:直接使用@pink
2.作为选择器和属性名URL:@{selector} @{url}的形式
3.变量的延迟加载
@num: 0; .box{ Width:@num; Height:@num; }
Import 引入
@import "./reset/reset.less";
好处:只请求一次
嵌套
我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。
.box{ width: 300px; background: pink; a{ float: left; &:hover{ color: red; } } span{ float: right; } }
运算
运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系
注意:避免编译
从语法上让编译器忽略一些操作。
.box{width:~"calc(200px + 700px)";}
混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1、不带参数的混合
.juzhong{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }
调用:
.box{ Width:@num; Height:@num; .juzhong(); }
2、带参数的混合
.juzhong(@w,@h){ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }
继承
继承是对选择器的组合,而不是对样式集的复制
nav ul { &:extend(.inline); background: blue; }
循环
less本身没有循环的语法是通过递归来构建循环
.test(@n) when(@n > 0){ .test(@n - 1); .box{ width: 100px * @n; } }
.test(12);
多方面对比less和sass
预处理器总结
1.嵌套可以反映层级和约束
2.变量和计算可以减少重复代码
3.Extend 和 Mixin可以复用代码片段
4.循环适用于复杂有规律的样式
5.import css文件模块化