本文共 4677 字，大约阅读时间需要 15 分钟。
一、CSS预处理
目前CSS预处理语言主要有：Less,SASS,Stylus等。浏览器不能编译.less/.scss/.sass/.styl等文件，在html文件引入前面这些样式文件，必须先编译成.css文件。
二、在VSCode中编译less
1、安装插件：按Ctrl + Shift + x，打开扩展面板，安装Easy LESS。
2、修改设置文件（settings.json），在settings.json中添加如下代码：
"[less]":{ "editor.suggest.insertMode": "replace" }, "less.compile": { "compress": false, /* 是否进行压缩处理 */ "sourceMap": false,/* 是否生成map（映射文件)文件，如果为true，则可以在控制台看到less的行数 */ "out": true,/* 编译后输出 */ "outExt": ".css" /* 设置编译后的文件的扩展名 */ }三、Less官网：http://lesscss.cn
四、CSS预处理
CSS预处理是一种将CSS作为目标生成文件的，使用变量、函数及简单的逻辑实现更加简洁、适应性更强、可读性更好、更易于代码维护的兼容浏览器的页面样式文件。通过编程来写CSS。
五、Less
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。形成的文件的扩展名为：.less。
使用的目的：是为了提升开发效率。
六、Less语法
1、变量
格式：@变量名: 值;
注意：在less中引用变量时，要把变量当成一个常量处理。
创建的后缀一定是xxx.less
@bgColor:pink;div{ background-color: @bgColor;} 2、混合用法
在less中定义一些通用的属性集为一个class，然后再在另一个样式中去调用它。
@color:rbg(255,189,91);@boxShadow:0px -2px 2px 2px #999;.box{ color: @color; width: 200px; height: 50px; box-shadow: @boxShadow; margin-bottom: 10px;}p{ color: @color; width: 200px; height: 100px; border: 1px solid #000;}@cl:#eee;@highlight:"cl";#header{ color: @@highlight;} 3、带参数的混合用法
用法1：
.类名(){/*css样式表;*/
}
.bd{ border-top: 1px solid #000; border-bottom: 1px solid #999;}.txtOverflow{ width: 200px; overflow: hidden;}#box{ color: red; .bd;}p{ .bd; .txtOverflow;} 用法2：
.类名(参数列表){ 属性名： 参数1； 属性名： 参数2； .... }用法3：
.类名(参数1:默认值,参数2:默认值,...){ 属性名： 参数1； 属性名： 参数2； .... }.bd(@lineWidth:3px){ border-top: @lineWidth solid #000; border-bottom: @lineWidth solid #000;}.txtOverflow{ width: 200px; overflow: hidden;}#box{ color: red; .bd(2px)}p{ .bd(1px); .txtOverflow}span{ .bd(); .bd}.shadow(@x1,@y1,@blur1,@color1,@x2:2px,@y2:2px,@blur2:3px,@color2:gray){ box-shadow: @x1 @y1 @blur1 @color1; text-shadow: @x2 @y2 @blur2 @color2;}article{ .shadow(3px,3px,5px,green,1px,0,2px,#000);}address{ .shadow(3px,3px,5px,green);}.txtOver(){ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.p1{ .txtOver();} 4、嵌套规则
格式： 父级（父类）｛ 属性：属性值; ... 子级（子类）｛ 属性：属性值; ... &:hover{ 属性：属性值; ... } &:before{ 属性：属性值; ... } &:nth-of-type(n){ 属性：属性值; ... } ... ｝ ｝.box{ width: 100%; height: 200px;overflow: hidden; span{ color: red; display: block; } ul{ list-style: none; li{ float: left; margin-right: 10px; &:nth-child(2){ color: blue; } p{ line-height: 1.5em; span{ color:red; font-style: italic; } a{ text-decoration: none; color: #123456; position: relative; &:hover{ text-decoration: underline; color: red; } &:before{ content:""; display: block; width: 100%; height: 1px; position: absolute; left: 0; top: 0; border-top: 1px solid #000; } } } } }} 5、运算
在Less中可以使用加、减、乘和除运算。
注意：减号左右要加空格，其它运算符可以不加。
@w:100px;@num:10px;p{ width: @w*2.5;}.contain1{ margin: @num * 2 @num *1.5 @num @num - 2;}.container2{ margin: (@num+5)*2 @num*1.5 @num @num - 20; /* 减号左右要加空格，其它运算符左右可以不加空格 */ } 6、作用域
作用域在编译采用最近原则。首先会从当前作用域内查找变量或混合模块，如果没找到，则去父级作用域中查找，直到找到为止。
@var:red;header{ @var:blue; nav{ background-color: @var; }}section{ border: 1px solid @var;}footer{ @var:pink; color: @var;} 7、函数
（1）Color函数
颜色会先被转化为HSL色彩空间，然后在通道级别中操作。
设置颜色或饱和度： lighten(@color, 10%); 返回一个比@color浅10%的颜色 darken(@color, 10%); 返回一个比@color 深10%的颜色 saturate(@color, 10%); 返回一个比color饱和比高10%的颜色 desaturate(@color, 10%); 返回一个比color饱和比低10%的颜色 fadein(@color, 10%); 返回一个比@color 透明度低10%的颜色 fadeout(@color, 10%); 返回一个比@color 透明度高10%的颜色 fade(@color, 50%); 返回一个@color颜色的50%透明度的颜色 spin(@color, 10); 返回一个比@color 色调大10度的颜色 spin(@color, -10); 返回一个比@color 色调小10度的颜色 mix(@color1, @color2) 返回一个@color1和@color2混合的颜色提取颜色信息：
hue(@color); 返回@color颜色的色调通道 saturation(@color); 返回@color颜色的饱和度通道 lightness(@color); 返回@color颜色的亮度通道@cl1:rgb(71, 20, 105);@cl2:#fff;p{ color: lighten(@cl1, 20%);}span{ color: darken(@cl2, 100%);}em{ color: saturate(@cl1, 20%); background-color: fadein(@cl1, 20%)}sup{ color: mix(@cl1, @cl2);}a{ background-color: hsl(hue(@cl1),60%,70%);/* h:0-360,s:0-100%,l:0-100% */} （2）Math函数
round（x，y） 对x四舍五入，保留y个小数点 ceil（x） 向上取整 floor（x） 向下取整 percentage（x） 取百分数。eg：percentage（0.6）返回60% min(a,b,c,d,e…); 取最小值 max(a,b,c,d,e…); 取最大值@w: 2.4px;div{ border: round(@w*3) solid #000;}.width(@width){ width: percentage(@width);}.box{ .width(.8); height: max(10px,20px,-9px,-100px);} 8、避免编译
在开发时，可能会现Less不识别的代码，或者不让编译，这时需要用到Less的专用语法-避免编译。用双引号引起来，再在前面加上~。
.calc(@x){ height: @x; } .box{ width: ~"calc(100px - 20px)"; .calc(100px - 20px); }
转载地址：http://mfvrn.baihongyu.com/