CSS预处理——LESS
LESS是什么?
less是一门CSS预处理语言。由于CSS本身并不是程序式语言,不方便维护和扩展,没有变量、函数、作用域等概念。而LESS在CSS的基础语法之上,引入了变量、Mixin混入、运算以及函数等功能,大大简化了CSS的编写,降低了CSS的维护成本。
本质上,LESS包含一套自定义的语法及一个解析器,写好的LESS文件会通过解析器编译生成CSS文件。LESS并没有建材CSS原有的特性,更不是用来取代CSS的,而是在现有的语法基础上,为CSS加入程序式语言的功能特性。所以,标准的CSS文件直接改成.less格式,LESS编译器可以完全识别。
使用
1.标签引入。
link标签rel属性值一定要为stylesheet/less
<link rel="stylesheet/less" href="style.less"> <script src="less.min.js"></script>
2.命令行使用npm安装
npm install -g less 编译: lessc style.less style.css 编译并压缩文件: lessc --clean-css styles.less styles.min.css
3.前端服务热调试(webpack)
需要配置webpack,webpack会帮你编译less文件,可以在js中Import进.less文件,像使用css那样使用less
4.在js中调用编译器调试
var less = require('less'); less.render('.myclass { width: (1 + 1) }', function (e, output) { console.log(output.css); // 输出 .myclass {width:2} });
语法规则
变量
这里的变量指的是常量,只能定义一次。以@开头定义,使用时也要键入@
1.值变量
@color: #5B83AD; @bgColor: @color + #111; @width: 300px; #wrap { color: @color; width: @width-20; height: @width-20*5; margin: (@width-20)*5; background: @bgColor; }
生成后的CSS:
#wrap { color: #999; width: 50%; background: #6c94be; }
2.选择器变量
让选择器变成动态的变量,使用时必须将变量名用花括号括起来
@mySelector: #wrap; @Wrap: wrap; @{mySelector}{ //变量名 必须使用大括号包裹 color: #999; width: 50%; } .@{Wrap}{ color:#ccc; } #@{Wrap}{ color:#666; }
生成的CSS:
#wrap{ color: #999; width: 50%; } .wrap{ color:#ccc; } #wrap{ color:#666; }
3.属性变量
将某CSS属性名当做变量,与选择器变量一样,使用时需要{}
@borderStyle: border-style; @Solid: solid; #wrap{ @{borderStyle}: @Solid;//变量名 必须使用大括号包裹 }
编译后:
#wrap{ border-style:solid; }
4.url变量
@images: "../img"; //需要加引号 body { background: url("@{images}/dog.png"); //变量名 必须使用大括号包裹 }
编译后:
body { background: url("../img/dog.png"); }
5.声明规则集(作用类似于混入)
声明:@name:{属性:值};
使用:@name();
@background: {background:red;}; #main{ @background(); } @Rules:{ width: 200px; height: 200px; border: solid 1px red; }; #con{ @Rules(); }
编译后:
#main{ background:red; } #con{ width: 200px; height: 200px; border: solid 1px red; }
6.变量的作用域
就近原则,与大多数编程语言的原则一样
@var: @a; @a: 100%; #wrap { width: @var; @a: 9%; }
编译后:
#wrap { width: 9%; }
嵌套
&符:代表父选择器的名字
.boring { display: inline-block; &::after{ content:"Hello Less"; } .class { width: 100%; } &>.text{ height: 10px; } }
编译后:
.boring{ display: inline-block; } .boring::after{ content: "Hello Less"; } .boring .class{ width: 100%; } .boring>.text{ height: 10px; }
混入(Mixin)
混入就是将一组CSS属性整体包含入另一个css类中去。提高复用性
1.无参数混入
.bordered { &:hover { color: red; } border-top: dotted 1px black; border-bottom: solid 2px black; } .card { background: #f6f6f6; .bordered; // .bordered()两种写法等价 }
编译后:
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } .bordered:hover { color: red; } .card { background: #f6f6f6; border-top: dotted 1px black; border-bottom: solid 2px black; } .card:hover { color: red; }
2.不输出Mixin
如果只是想创建一个mixin,并不想单独输出,可以这样用
.bordered(){ &:hover { color: red; } border-top: dotted 1px black; border-bottom: solid 2px black; } .card { background: #f6f6f6; .bordered; // .bordered()两种写法等价 }
编译后:
.card { background: #f6f6f6; border-top: dotted 1px black; border-bottom: solid 2px black; } .card:hover { color: red; }
3.有参数混入
注意的点:① 默认参数 ② 命名参数 ③ @arguments ④ @rest
.border-radius(@radius) { border-radius: @radius; } .border(@a:10px, @b:50px, @c:30px, @color:#000) { border:solid 1px @color; box-shadow: @arguments; // 指代的是 全部参数 } .bgColor(@color,@rest...){ width: @rest; // @rest参数可以获得后面违背获取的值。 background: @color; } #main { .border(0px,5px,30px,red); .border-radius(5px); } #main1 { .border(@c: 20px,@color: red); } #main2 { .border(10px); } #main3 { .border; }
4.匹配模式
和面向对象的多态很相似。当调用传参的时候,会根据参数进行匹配,找到匹配程度更高的,如果匹配程度相同,将全部选择,并存在样式覆盖。
.mixin(@color) { color-1: @color; } .mixin(@color; @padding: 2) { color-2: @color; padding-2: @padding; } .mixin(@color; @padding; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } div { .mixin(#008000); }
编译后:
div { color-1: #008000; // "color-1"这种写法对CSS来说是不合法的,在这里只是展示哪些属性被用上了 color-2: #008000; padding-2: 2; }
Demo2:
/* Less */ .triangle(top,@width:20px,@color:#000){ border-color:transparent transparent @color transparent ; } .triangle(right,@width:20px,@color:#000){ border-color:transparent @color transparent transparent ; } .triangle(bottom,@width:20px,@color:#000){ border-color:@color transparent transparent transparent ; } .triangle(left,@width:20px,@color:#000){ border-color:transparent transparent transparent @color; } .triangle(@_,@width:20px,@color:#000){ // @_的作用是,无论选择的是哪个函数,一定运行此函数 border-style: solid; border-width: @width; } #main{ .triangle(left, 50px, #999) } /* 生成的 CSS */ #main{ border-color:transparent transparent transparent #999; border-style: solid; border-width: 50px; }
5.方法的命名空间
不能单独使用命名空间的方法,必须先引入命名空间,才能使用其中的方法。
#card(){ background: #723232; .d(@w:300px){ width: @w; #a(@h:300px){ height: @h;//可以使用上一层传进来的方法 width: @w; } } } #wrap{ #card > .d > #a(100px); // 父元素不能加 括号 } #main{ #card .d(); } #con{ //不得单独使用命名空间的方法 //.d() 如果前面没有引入命名空间 #card ,将会报错 #card; // 等价于 #card(); .d(20px); //必须先引入 #card }
编译后:
#wrap{ height:100px; width:300px; } #main{ width:300px; } #con{ width:20px; }
6.条件筛选
没有逻辑运算符与或非,但是有when not ,(逗号)分别相当于 && ! ||
比较运算符有: > >= = =< <。=代表的是等于。
#card{ // and 运算符 ,相当于 与运算 &&,必须条件全部符合才会执行 .border(@width,@color,@style) when (@width>100px) and(@color=#999){ border:@style @color @width; } // not 运算符,相当于 非运算 !,条件为 不符合才会执行 .background(@color) when not (@color>=#222){ background:@color; } // , 逗号分隔符:相当于 或运算 ||,只要有一个符合条件就会执行 .font(@size:20px) when (@size>50px) , (@size<100px){ font-size: @size; } } #main{ #card>.border(200px,#999,solid); #card .background(#111); #card > .font(40px); }
编译后:
#main{ border:solid #999 200px; background:#111; font-size:40px; }
7.使用!important
.border{ border: solid 1px red; margin: 50px; } #main{ .border() !important; }
编译后:
#main { border: solid 1px red !important; margin: 50px !important; }
8.循环
less并没有提供for循环功能,但是可以借助when实现。
.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration width: (10px * @counter); // code for each iteration } div { .loop(5); // launch the loop }
编译后:
div { width: 10px; width: 20px; width: 30px; width: 40px; width: 50px; }
使用循环可以做成CSS网格类的示例:
.generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }
编译后:
.column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }
9.属性拼接
CSS中有的属性值是空格隔开,有的是逗号隔开。
①逗号隔开,在LESS中使用 +
.boxShadow() { box-shadow+: inset 0 0 10px #555; } .main { .boxShadow(); box-shadow+: 0 0 20px black; } /* 生成后的 CSS */ .main { box-shadow: inset 0 0 10px #555, 0 0 20px black; }
②空格隔开,在LESS中使用 +_
/* Less */ .Animation() { transform+_: scale(2); } .main { .Animation(); transform+_: rotate(15deg); } /* 生成的 CSS */ .main { transform: scale(2) rotate(15deg); }
继承
.animation{ transition: all .3s ease-out; .hide{ transform:scale(0); } } #main{ &:extend(.animation); } #con{ &:extend(.animation .hide); }
编译后:
.animation,#main{ transition: all .3s ease-out; } .animation .hide , #con{ transform:scale(0); }
all全局搜索替换
#main{ width: 200px; } #main { &:after { content:"Less is good!"; } } #wrap:extend(#main all) {}
编译后:
#main,#wrap{ width: 200px; } #main:after, #wrap:after { content: "Less is good!"; }
函数
1.类型函数
- isnumber 判定是否是数字
- iscolor 判断值是否是颜色
- isurl 判断是否是url
2.颜色操作
- saturate 增加一定数值的颜色饱和度
- lighteen 增加一定数值的颜色亮度
- darken 降低颜色亮度
- fade 给颜色设置一定数值的透明度
3.数学函数
- ceil 向上取整
- floor 向下取整
- round 四舍五入
- percentage 将浮点数值转换为百分比字符串
- abs 计算数值的绝对值
- pow 计算一个数的乘方
更多函数参见官方文档:
其他
1.注释
/* CSS注释,会出现在CSS文件中 */
// LESS注释,不会被编译在CSS文件中
2.避免编译
在CSS属性被引号包起来,且前面加上~符号
/* Less */ #main{ width:~'calc(300px-30px)'; } /* 生成后的 CSS */ #main{ width:calc(300px-30px); }
3.使用JS
/* Less */ @content:`"aaa".toUpperCase()`; #randomColor{ @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)"; } #wrap{ width: ~"`Math.round(Math.random() * 100)`px"; &:after{ content:@content; } height: ~"`window.innerHeight`px"; alert:~"`alert(1)`"; #randomColor(); background-color: @randomColor; } /* 生成后的 CSS */ #wrap{ width: 随机值(0~100)px; height: 743px;//由电脑而异 background: 随机颜色; } #wrap::after{ content:"AAA"; }
此乃JS in CSS