CSS 笔记(十二):预处理器 —— Less
什么是 CSS 预处理器
CSS 预处理器就是使用某一种语言为 CSS 增加一些动态语言的特性,使用 CSS 预处理器可以使 CSS 具有简洁,适应性强,代码直观等优点,常见的 CSS 预处理器如下:
- Less
- Sass
- Stylus
什么是 Less
Less(Leaner Style Sheets)是一种 CSS 预处理语言,为 CSS 赋予了动态语言的特性,扩展了 CSS 语言,增加了变量、Mixin(混合)、嵌套、函数和运算等特性,使 CSS 更易于维护和扩展
如何使用 Less
引入
- 编写(引入) Less 代码
- 内嵌方式时,必须说明文本类型
<style type="text/less">...</style>
- 外链方式时,以 .less 为文件扩展名,并以 link 导入
<link rel="stylesheet/less" type="text/css", href="style.less">
- 引入 less.js 文件
<script src="./js/less.js"></script>
使用 Less 时,必须先引入 Less 代码,之后引入 less.js 文件,此外,使用外链方式引入 .less 文件时,必须在服务端环境才能生效
预编译
使用引入的方式时,将损耗浏览器性能,可以使用预编译将 .less 文件编译为 .css 文件,之后引入 .css 文件即可
- 编写 .less 文件
- 预编译生成 .css 文件
- 引入 .css 文件
使用此方式不用引入 less.js 文件,也无需在服务端环境运行
注释
类似于 JavaScript,Less 也有单行注释与多行注释
// 单行注释
/*
多行注释
*/
必须注意的是,将 .less 文件编译为 .css 文件时,单行注释并不参与编译,因此在 .css 文件中不存在 .less 文件中的单行注释
变量
类似于 JavaScript,Less 也有变量,其特性与 ES6 之前使用 var 相似,示例如下:
@w: 200px; // 初始化
@h: @w; // 赋值
@bc: pink;
.box {
@bc: blue; // 作用域
width: @w;
height: @h;
background-color: @bc; // 蓝
}
.reyn {
width: @w;
height: @h;
background-color: @bc; // 红
}
@bc: red; // 延迟加载、覆盖
在上述示例中,展示的特性如下:
- 作用域
- 延迟加载
- 赋值
- 初始化
- 覆盖
插值
除了可以将属性值赋予变量之外,也可以将选择器与属性名称赋予变量,不过,必须以插值的形式使用,示例如下:
@size: 200px;
@w: width;
@s: div;
@{s} {
@{w}: @size;
height: @size;
background-color: red;
}
运算
在 Less 中,支持简单的加、减、乘、除运算,示例如下:
@size: 200px;
@bc: red;
div {
width: @size;
height: @size;
background-color: @bc;
position: absolute;
left: 50%;
margin-left: (-@size / 2px); // 居中
}
在上述示例中,运算时必须指明单位,可以指定任意一个操作数,也可以均指定
混合
混合(Mix in),即将重复使用的代码封装到一个类中,在需要使用的地方调用此类即可,示例如下:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@size: 300px;
.reyn {
width: @size;
height: @size;
background-color: red;
.center;
.morales {
width: (@size - 100px);
height: (@size - 100px);
background-color: blue;
.center;
}
}
通过观察编译之后的 .css 文件,混合的本质即将某个被引用的类中的所有代码拷贝到引用此类的位置,此外,在 .css 文件中保存了被引用的类,使用以下写法时,在 .css 文件中不会保留被引用的类
.center() {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@size: 300px;
.reyn {
width: @size;
height: @size;
background-color: red;
.center();
.morales {
width: (@size - 100px);
height: (@size - 100px);
background-color: blue;
.center();
}
}
在上述示例中,引用类时的
()
不是必须的
参数
类似于 JavaScript 中的函数,Less 中的混合也可以使用参数以及相关特性,示例如下:
.whbc(@w: 100px, @h: 100px, @bc: pink) {
width: @w;
height: @h;
background-color: @bc;
}
.box1 {
.whbc(200px, 200px, red);
}
.box2 {
.whbc(300px, 300px);
}
.box3 {
.whbc(@bc: blue);
}
在上述示例中,Less 中的混合可以使用默认参数,此外,可以在传递实参时指定哪一个形参接收此参数,此外,Less 中的混合可以使用
...
,也可以使用 arguments,来使用所有参数,示例如下:
.animate(@name, @time, ...) {
transition: @arguments;
}
@size: 200px;
div {
width: @size;
height: @size;
background-color: red;
.animate(all, 4s, linear, 0.5s);
}
div:hover {
width: (@size * 2);
height: (@size * 2);
background-color: blue;
}
匹配模式
在若干同名的混合中使用一个特定的混合时,可以使用匹配模式匹配某一个混合,示例如下:
.triangle(topLoc, @width, @color) {
width: 0;
height: 0;
border-width: @width;
border-style: solid;
border-color: @color transparent transparent transparent;
}
.triangle(rightLoc, @width, @color) {
width: 0;
height: 0;
border-width: @width;
border-style: solid;
border-color: transparent @color transparent transparent;
}
.triangle(downLoc, @width, @color) {
width: 0;
height: 0;
border-width: @width;
border-style: solid;
border-color: transparent transparent @color transparent;
}
.triangle(leftLoc, @width, @color) {
width: 0;
height: 0;
border-width: @width;
border-style: solid;
border-color: transparent transparent transparent @color;
}
.box {
.triangle(downLoc, 20px, red);
}
在 Less 中,在所有形参之前添加一个混合标识,在引用时说明此标识即可,此外,在上述示例中,存在冗余代码,可以使用通用匹配模式减少冗余,示例如下:
.triangle(@_, @width, @color) {
width: 0;
height: 0;
border-style: solid;
}
.triangle(topLoc, @width, @color) {
border-width: @width;
border-color: @color transparent transparent transparent;
}
.triangle(rightLoc, @width, @color) {
border-width: @width;
border-color: transparent @color transparent transparent;
}
.triangle(downLoc, @width, @color) {
border-width: @width;
border-color: transparent transparent @color transparent;
}
.triangle(leftLoc, @width, @color) {
border-width: @width;
border-color: transparent transparent transparent @color;
}
.box {
.triangle(downLoc, 20px, red);
}
在上述示例中,将之前所有混合中的相同代码封装在另一个同名混合中,使用
@_
标识此混合(通用混合),如此,在匹配任意一个同名混合时,均将同时匹配通用混合
导入
在 .less 中可以导入其它 .less 文件,且可以省略文件扩展名,示例如下:
@import "triangle";
.box {
.triangle(downLoc, 20px, red);
}
层级结构
在 Less 中使用伪类选择器时,具有特殊的写法,示例如下:
.center() {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@size: 300px;
.reyn {
width: @size;
height: @size;
background-color: red;
.center();
.morales {
&:hover {
background-color: skyblue;
}
width: (@size - 100px);
height: (@size - 100px);
background-color: blue;
.center();
}
}
在 Less 中,如果使用嵌套的形式定义 CSS 类,那么在编译之后的 .css 文件中将以后代选择器的形式组织嵌套类,使用
&
符号可以关闭此功能,因此,可以使用此符号编写伪元素选择器,示例如下:
.center() {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@size: 300px;
.reyn {
width: @size;
height: @size;
background-color: red;
.center();
&::after {
content: "";
display: block;
width: 100px;
height: 100px;
}
}
继承
在 Less 中,可以使用继承减少代码的冗余度,示例如下:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@size: 300px;
.reyn:extend(.center) {
width: @size;
height: @size;
background-color: red;
.morales:extend(.center) {
width: (@size - 100px);
height: (@size - 100px);
background-color: blue;
}
}
在上述示例中,实现的功能与使用混合时相同,区别在于,使用继承时,在编译之后的 .css 文件中以并集选择器的方式处理,而非拷贝
条件判断
在 Less 中,可以使用 when 条件判断决定在引用一个混合时,是否执行此混合,在条件中可以使用的运算符如下:
- 比较
>
<
>=
<=
=
- 逻辑
,
and
- 内置函数
示例如下:
.size(@w, @h) when (@w < 50) {
width: @w;
height: @h;
}
.size(@w, @h) when (@w > 50)and(@h <= 50) { // 与
width: @w;
height: @h;
}
.size(@w, @h) when (@w = 50),(@h >= 50) { // 或
width: @w;
height: @h;
}
.size(@w, @h) when (ispixel(@w)) {
width: @w;
height: @h;
}