css预处理器（less、sass）_css pre-processors命令-CSDN博客

本文链接：https://blog.csdn.net/weixin_43847807/article/details/109187942

less

代码编译风格

less安装

需要先安装nodejs（因为sass/less都是基于js开发的。node -v 检查是否安装成功）
全局安装less命令：npm i less -g（权限不够：sudo npm install less -g 最高权限安装。vscode不用装，直接用插件）
vscode安装less：直接加一个easy less插件
vscode使用less：直接新建一个.css和.less文件，html中引入.css或.less文件
webstorm安装less：设置–工具–File Watchers–左下方“+”号–点击less–修改Program为：node安装路径下的lessc（比如：C:\Users\Administrator\AppData\Roaming\npm\lessc）
webstorm使用less：新建stylesheet–less file ，新建的less里面自带css

less语法使用

可使用css语法
嵌套 ------------后代直接写在里面，不超过三层
父选择器-----&符号-----可以解决嵌套不超过三层的问题
变量 ----------@定义变量，后代用@名字取值
作用域：只能在同一个{}
变量在字符串中需要用{}包起来：比如"@{url}01.png"
混合 -----------引用其他类的样式，直接写其他类
有参混合：无参数，比如：.box;或.box();或.box()
无参混合：有参数，比如：.box(参数值); 缺点：有多个参数时，引用传值需要一一对应
@arguments ：所有参数按顺序填写时可用@arguments代替
运算 ----------基本运算或运算函数。比如round、ceil取整等等
继承 ----------:extend 伪类选择器，结果与混合一样的。但是继承不能有参数
判断 ----------关键词when（与and 或, 非not）
可导入其他文件@import

//全局变量---局部变量朝具体类中写
@width:200px;
@url:'../img/';
.box1{
	width:@width;
	background:url("@{url}01.png");
}
//无参混合
.box2{
	.box1;
	height:100px;
}
//有参混合---不能直接生成css，需要引入到其他地方
.box3(@width:1px;@style:solid;@color:red){
	//border:@width @style @color 原本有参混合需要依次写入参数，可用@arguments会替代
	border:@arguments;
}
.box3_last{
	.box3()
}
//运算
.box4{
	width: 200px + 200px; //基本运算
	height: 400px / 4;  //基本运算
	height: round(120.54) ; //可用函数
}
//继承
//与无参混合一样的效果
.box5:extend(.box1){
	height:100px;
}
//判断
.box6(@w) when(@w>0){width:@w}   //基础判断
.box6(@w) when(@w>0) and when(@w<50){width:@w}  //与
.box6(@w) when(@w>0),when(@w>10){width:@w}   //或
.box6(@w) when(@w<10) not when(@w>100){width:@w}   //非
.box7{
	.box6(40px);//这里的有参混合，使用的时候可以自动省略px再比较
}

//使用变量进行计算
@bigsize:60px;
div{
	height:calc(@{bigsize}-20px)
}

sass安装

也要先安装nodejs
vscode安装sass：直接加一个live sass compiler插件。重启点右下角 watching
vscode使用sass：直接新建一个.css和.sass文件，html中引入.css或.sass文件

sass语法使用

与less大多相同。
sass声明变量用符号 $, 使用也用$ (sass变量在字符串中用#{$},less用@{})
sass用混合前面加上@mixin ，调用加上@include
控制指令判断@if 、循环@for @each @while
函数更强大：比如random()等，更可以自定义函数@function(){}
可导入其他文件@import

$width:200px;
@url:'../img/';
@mixin box1{
	width:$width;
	background:url("#{$num}01.png")
}
//无参混合
.box2{
	@include box1;
	height:100px;
}
// 判断 @if
.box3{
    @if 1+1==2{
        width: 500px;
    }
}

//循环 @for
//from to 从1到5，不包括5
//from through 从1到5，包括5
@for $num from 1 through 5 {
    // .item{
    //   width:$num * 1px;
    // }
    .item:nth-child(#{$num}){  //less中写@{num}
        width: $num * 1px;
    }
  }
  
// 循环 @each （遍历列表）
@each $color in red,blue,green,yellow,pink {
    // .eachbox{
    //     width: $color;
    // }
    .#{$color}{
        width: 300px;
    }
}

// 循环 @while
$numb : 0;
@while $numb < 5 {
    .box{
        width: $numb * 2px;
    }
    $numb : $numb + 1;
}

// 函数
.box1{
    //random() 取0-1随机值
    width: random(); 
    //rgba颜色范围0-255  重点：动画时候可以随机渐变颜色
    background: linear-gradient(45deg,rgba(random() * 255, random()*255, random()*255, 0.5),
                                rgba(random() * 255, random()*255, random()*255, 0.5) );
}

//自定义函数
@function add($a,$b){
    @return $a + $b;
}
.myhanshu{
    width: add(5,6) * 1px;
}

//sass使用变量进行计算
$bigsize:60px;
div{
	height:calc(#{$bigsize}-20px)
}