Less记录
2020-04-02 本文已影响0人
cs0710
参考地址：https://less.bootcss.com/
Less是在CSS语言的基础上，保留了CSS语言的所有特性，对CSS语言的扩展的预处理语言，最终编译为CSS脚本。(V3.10.3)
Less转换CSS
为方便调试less的编译结果，可以使用lessc或者一些GUI编译工具，将less编译为css
// 1. 手动编译less为css文件，需要全局安装less依赖包才可以
npm install -g less
lessc styles.less styles.css
// 2. koala、winless桌面应用工具
Less功能特性
注释
/* 1.会被编译到css文件中 */
// 2.不会被编译到css文件中，减少文件体积
嵌套规则
同css规则，起到继承父级的最用，目前使用场景比css多了个‘&’，指代当前选择器的父级选择器，减少选择器的重复书写
变量
普通变量
// @开头，:作为分配符
@color: red;
作为选择器和属性名
// 方式：@{var}
@width: width;
.@{width} {
@{width}: 150px;
}
作为url
// 用'引号'括起来,使用时@{var}
@url: "https://cs-static-assets.oss-cn-beijing.aliyuncs.com/";
.img-box {
background-image: url("@{url}less-share/2215.jpg_wh300.jpg");
}
延迟加载
// 变量可以先使用后声明(不推荐，可读性不太好)
.div: {
font-size: @fz;
@fz: 28px;
}
多个相同变量名
// 当前作用域中最后定义的变量，会向上搜索，覆盖掉同级或者父级先定义的同名变量
.div1 {
@c: red;
.div2 {
@c: green;
color: @c; // blue
@c: blue;
}
color: @c; // purple
@c: purple;
}
混合（mixin）
混合：从一个规则集引入到另一个规则集的方式，实现继承属性。可以用‘#’定义，但官网推荐以'.'来定义
会被编译到css中的混合
// 不推荐，加大文件体积
.cb: {
color: red;
border: 1px solid red;
}
h1 {
font-size: 24px;
.cb();
}
h2 {
font-size: 28px;
.cb();
}
不会被编译到css中的混合
// 推荐
.cb() {
color: red;
border: 1px solid red;
}
h1 {
font-size: 24px;
.cb();
}
h2 {
font-size: 28px;
.cb();
}
带选择器的混合
.h() {
&:hover { // 选择器
color: red;
}
}
h1 {
.h();
}
带参数的混合
.b(@c) {
border: 1px dashed @c;
}
h1 {
.b(green);
}
带参数并且有默认值的混合
.b(@c: blue) {
border: 1px dashed @c;
}
h1 {
.b();
}
h2 {
.b(pink);
}
带多个参数的混合
// 用‘,’分割(推荐：日常使用‘,’，更易理解)。也可以使用‘;’分隔,但是';'会把前面的所有数值都当作一个参数传递（不推荐）
.bfc(@border, @fontSize: 24px, @color: red) {
border: @border;
font-size: @fontSize;
color: @color;
}
div {
.bfc(1px solid blue, 48px, green);
.bfc(1px solid blue, 48px, green;); // 会把前面的所有数值都当作一个参数传递
}
多个相同名称的混合
// 会将其下的所有属性都会引入到一个规则集中，根据参数的个数进行调用
.fb(@fz) {
border: @fz solid green;
}
.fb(@fz, @color: red) {
border: @fz solid red;
color: @color;
}
h1 {
.fb(16px); // 第一个和第二个都会被调用（第二个有默认值）
}
h2 {
.fb(18px, red); // 只有第二个被调用
}
命名参数
// 指定参数的名称，跨顺序传递参数
.name(@c: red, @border) {
color: @c;
border: @border;
}
div {
.name(@border: 1px solid red);
}
arguments参数模式
// 会把所有的‘形参’都作为一个属性的值依次排列
.b(@s, @c) {
border: 1px @arguments; // 1px @s @c
}
div {
.b(dashed, green);
}
匹配模式
// 参数的第一个值作为匹配值
.border(all, @c) {
border: 1px solid @c;
}
.border(top, @c) {
border-top: 1px solid @c;
}
.border(right, @c) {
border-right: 1px solid @c;
}
div {
.border(all, red);
}
混合的返回值
// 里面定义的变量可以作为返回值使用
.calc(@w, @h) {
@average: (@w + @h) / 2;
}
div {
.calc(10px, 180px);
padding: @average;
background-color: red;
}
运算
可以对属性集和颜色进行加减乘除运算操作
至少一个数值带单位，进行自动推断
数值之间用空格分开增强可读性
涉及到优先级时，用()括起来
简单运算
div {
background-color: red;
width: 200 + 200px; // 400px
height: (100 - 20) * 2px; // 160px
border-width: 6% / 2; // 3%
}
颜色值运算
先将颜色转换为rgb格式（0-255），再将rgb转换为16进制
大于等于255的数值，都会转换为255（白色）
div {
background-color: red + green + blue; //
color: #006 + 28;
border-color: #000 + 255; // 超过255，转换为#ffffff
}
命名空间
将需要的混合组合在一起，打包封装，可通过嵌套实现，更好的组织css属性集的重复使用
'>'可以省略，用空格代替
.mixin() {
.inner1 {
border: 1px solid red;
.inner2 {
.inner1 {
border: 1px solid green;
}
}
}
}
.box1 {
// .mixin .inner2(); 找不到inner2，中间层级不能省略
.mixin > .inner1 > .inner2 > .inner1(); // 不省略 >
}
.box2 {
.mixin .inner1 .inner2 .inner1(); // 省略 >
}
importing(引入)
reference：引用less文件，将未用到的样式不编译输出，可以混合、变量等引用
less：无论什么格式文件都作为less文件操作，可以混合、变量等引用
inline: 引用less，但不能进行混合、变量等引用
css：无论什么格式文件都作为css文件操作，不可以混合、变量等引用
// test.less
.div() {
border: 1px solid green;
}
.extra {
padding: 10px;
}
reference参数
// 去除未用到之外的样式，不编译到css中，可以进行混合引用
@import (reference) 'test.less';
.box {
.div();
padding: 6px;
}
less参数
// 只使用less参数，会将css中所有的样式引入，加上reference，可将未用到的样式去除，不编译到最终的css中，可以进行混合引用
@import (less, reference) 'test.css';
.box {
.div();
padding: 6px;
}
inline参数
// 混合报错，不能在外引用混合
@import (inline) 'test.less';
.box {
.div(); // 报错
padding: 6px;
}
css参数
// 混合报错，不能在外引用混合
@import (css) 'test.less';
.box {
.div(); // 报错
padding: 6px;
}
条件表达式
比较运算
比较运算符：>、>=、<、<=、=、true、false
.compare(@fz) when(@fz >= 18px) { // 比较
border: 1px solid red;
}
.compare(@fz) when(@fz < 18px) { // 比较
border: 1px solid green;
}
.compare(@fz) when(@fz = 18px) { // 比较，只有一个'='
border: 1px solid blue;
}
.box1 {
.compare(24px);
}
.box2 {
.compare(12px);
}
.box3 {
.compare(18);
}
基本类型函数检查
.compare(@var) when(ispercentage(@var)) {
padding: @var;
}
.compare(@var) when(iscolor(@var)) {
color: @var;
}
.compare(@var) when(isnumber(@var)) {
border: @var solid red;
}
.compare(@var) when(isstring(@var)) {
background: url("@{var}") no-repeat;
}
.box {
.compare(24px);
.compare(blue);
.compare(50%);
.compare('https://cs-static-assets.oss-cn-beijing.aliyuncs.com/less-share/2215.jpg_wh300.jpg');
}
Loop（循环）
// 可以针对一些标签进行样式计算
.compare(@var) when(@var <= 4) {
h@{var} {
font-size: @var * 12px;
}
.compare(@var + 1);
}
.box {
.compare(1);
}
函数库
主要用于混合中的条件和循环判断中代码逻辑编写
length
@list: red, green, blue, pink;
@len: length(@list); // 获取长度
.bgcolor(@len) when(@len > 0) {
@curr: extract(@list, @len); // 'red'
.@{curr} {
color: color(@curr); // red
}
.bgcolor(@len - 1)
}
div {
.bgcolor(@len);
}
each
对规则集进行便利，index从1开始，暴露出key，index，value
// 普通变量遍历
@list: red, green, blue, pink;
each(@list, {
.color-@{value} {
color: @value;
}
});
// 对对象进行遍历
@list-set: {
blue: blue;
green: green;
red: red;
default: white;
};
each(@list-set, {
.@{key}-@{index} {
color: @value;
}
});
color
// 解析字符串的颜色值为16进制
.box {
color: color('red'); // #ff0000
color: color('#000'); // #000000
}
image函数
// image计算函数,只能计算本地图片，不能计算网络资源
.box {
margin: image-size('../../2215.jpg_wh300.jpg'); // w h
padding-left: image-width('../../2215.jpg_wh300.jpg'); // w
padding-top: image-height('../../2215.jpg_wh300.jpg'); // h
}
data-uri
可接收两个以将比较小的图片转换为base64格式，减少网络请求，但是目前只支持本地图片，不支持网络资源转换
接收两个参数：mimetype, url
// 可以解决小图片相对路径找不到和小图片发送网络请求的问题，不适用于懒加载
.box {
background-image: data-uri('../../2215.jpg_wh300.jpg');
}
