less
less（Leaner Style Sheets）是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。用类似JS的语法去写CSS。
CSS预处理器
CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)，CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处，简而言之: CSS预处理器就是升级版CSS
常见的CSS预处理器
🔮Less、 🔮Sass 、🔮Stylus
🧨 需要less的原因：
- CSS的语法虽然简单, 但它同时也带来一些问题
- CSS需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用
- CSS是一门非程序式的语言, 没有变量/函数/作用域等概念
less基本使用
编写less文件-->引入less文件-->引入less.js-->运行
<link rel="stylesheet/less" href="css/index.less">
<script src="js/less.js"></script>
💡 注意点:
一定要先引入less.css再引入less.js。如果less代码是写到单独的文件中, 一定要在服务端环境运行才能生效。
提前预编译
编写less文件-->利用工具转换为css文件-->引入css文件
1.考拉客户端: http://koala-app.com/index-zh.html
2.开源中国 : https://tool.oschina.net/less 👍
3;构建工具配置loader自动编译
/* 注意点: */
无需引入less.js, 无需在服务端运行
注释
less中的注释和JS中的注释一样, 也有单行注释和多行注释，less中单行注释和多行注释最大的区别在于：是否会被编译，单行注释不会被编译(不会出现在编译后的文件中)，多行注释会被编译 (会出现在编译后的文件中)。
变量
和js中的概念基本一样
1.格式:
@变量名称: 值;
@w: 400px;
2.使用变量的格式:
@变量名称;
3.将一个变量赋值给另外一个变量
@变量名称 : @变量名称;
@h: @w;
4.全局变量和局部变量
定义在{}外面的就是全局的变量, 什么地方都可以使用
定义在{}里面的就是局部变量, 只能在{}中使用
/*注意点:*/ less中的变量是延迟加载的, 写到后面也能在前面使用
.box1{
@c: blue;
width: @w;
height: @h;
background: @c;
@c: pink; /* box1粉色 */
}
.box2{
width: @w;
height: @h;
background: @c; /* box2红色 */
}
@c: red;
变量插值
在less中属性的取值可以直接使用变量，但是属性名称或者选择器名称并不能直接使用变量，如果属性名称或者选择器名称想使用变量中保存的值，那么必须使用变量插值的格式。
1.变量插值的格式
格式: @{变量名称}
@size: 200px;
@w: width;
@s: div;
@{s}{
@{w}: @size;
height: @size;
}
运算
div{
/*以下的方式不利于编码, 因为需要我们自己口算元素宽度的一半是多少*/
margin-left: -100px;
/* 以下的方式不利于兼容, 因为transform属性是CSS3新增的, 只有支持C3属性的浏览器才可以使用 */
transform: translateX(-50%);
/* 在CSS3中新增了一个calc函数, 可以实现简单的+ - * / 运算 */
margin-left: calc(-200px * 0.5);
}
div{
/* less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算 */
margin-left: (-200px / 2);
}
混合
混合(Mix in)，将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可。在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来。
💡 注意点:
- 如果混合名称的后面没有(), 那么在预处理的时候, 会保留混合的代码
- 如果混合名称的后面加上(), 那么在预处理的时候, 不会保留混合的代码
带参数的混合
.whc(@w, @h, @c){
width: @w;
height: @h;
background: @c;
}
/* 带参数并且有默认值的混合 */
.whc(@w:100px, @h:100px, @c:pink){
width: @w;
height: @h;
background: @c;
}
.box1{
width: 200px;
.whc(200px, 200px, red);
/* 这里是给混合的指定形参传递数据 */
.whc(@c:red);
}
.box2{
width: 300px;
.whc(300px, 300px, blue);
}
可变参数
less中的@arguments和js中的arguments一样，可以拿到传递进来的所有形参。less中的...表示可以接收0个或多个参数，如果形参列表中使用了...，那么...必须写在形参列表最后。
.animate(@name, @time, @mode, @delay){
transition: @name @time @mode @delay;
// transition: @arguments; /* 也可以 */
}
.animate(@name, @time, ...){
// transition: @name @time @mode @delay; // ❌
transition: @arguments;
}
div{
width: 200px;
//.animate(all, 4s, linear, 0s); /* transition: all 4s linear 0s; */
.animate(all, 4s, linear, 0s);
}
匹配模式
@_: 表示通用的匹配模式，无论同名的哪一个混合被匹配了，都会先执行通用匹配模式中的代码。
混合的匹配模式： 就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合。
.triangle(@_, @width, @color){ /* 通用匹配 */
width: 0;
height: 0;
border-style: solid solid solid solid;
}
.triangle(Down, @width, @color){
width: 1px; /* 能匹配上Down的,也能匹配上通用匹配,就会有两个width,第一个width:0;第二个width:1px */
border-width: @width;
border-color: @color transparent transparent transparent;
}
div{
.triangle(Down, 80px, green); /*通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合 */
/* 同时也会匹配上通用匹配 */
}
导入其它less文件
@import "triangle"; @import "triangle.less";
内置函数
https://less.bootcss.com/functions/
// 单位转换
convert(9s, "ms"); // => 9000ms
convert(14cm, mm); // => 140mm
convert(8, mm); // => 8
// 列表
@list: "A", "B", C, "D";
length(@list); // => 4
extract(@list, 3); // => C
// 数学
ceil(2.1); // => 3 向上取整
floor(2.1); // => 2 向下取整
percentage(.3); // => 30% 转百分比
round(1.67, 1); // => 1.7 四舍五入，保留一位小数点
sqrt(25cm); // => 5cm 取平方根
abs(-5cm); // => 5cm 取绝对值
pi(); // => 3.141592653589793 圆周率π
max(3px, 42px, 1px, 16px); // => 42px
min(3px, 42px, 1px, 16px); // => 1px
// 字符串
replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"
// 判断类型
isnumber(56px); // => true 是否含数字
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
// 颜色操作
saturate(color, 20%); /* 增加饱和度 */
// 颜色混合
multiply(color1, color2); /* 每个RGB 通道相乘，然后除以255 */
div{
background: desaturate(yellow, 50%);
}
层级结构
.father{
width: 300px;
.son{
&::before{ /* 这里的&的作用, 是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可 */
content: "子元素";
display: block;
}
}
}
/* 如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器 */
.father .son
继承
💡 继承和混合的区别:
- 使用时的语法格式不同
- 转换之后的结果不同（混合是直接拷贝, 继承是并集选择器）
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father:extend(.center){
width: 300px;
height: 300px;
background: red;
.son:extend(.center){
width: 200px;
height: 200px;
background: blue;
}
}
/* 转换后的css代码 */
.center,
.father,
.father .son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.father {
width: 300px;
height: 300px;
background: red;
}
.father .son {
width: 200px;
height: 200px;
background: blue;
}
条件判断
less中可以通过when给混合添加执行限定条件，只有条件满足(为真)才会执行混合中的代码，when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断。
.size(@width,@height) when (ispixel(@width)){
width: @width;
height: @height;
}
div{
.size(100rem,100px);
background: red;
}
/* 转换后的css代码 */
div {
background: red;
}
.size(@width,@height) when (@width = 100px){}
.size(@width,@height) when (@width = 100px),(@height = 100px){}
