less笔记

1.初识less

• less 是一个 css 扩展，让 css 变成支持变量，嵌套等操作的 css 语言
• 可以去 Less官方文档 去学习
• less是一门css的预处理语言
• less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
• 在less中添加了许多的新特性：像对变量的支持、对mixin的支持… …
• less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

2.less 基础

• less 可以在浏览器端使用也可以在服务端使用

• 在浏览器端使用CDN：

  HTML
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
  

• 并且需要告诉浏览器我们写的是 less 代码：

  HTML
  <style type="less"></style>
  

• 但是上面的方法是运行时编译 (也就是运行这个网页时才把 less 文件转化为 css)，影响网页加载时间

• 我们想让我们写好 less 文件之后直接转换成 css 文件，这里 vscode 安装 EasyLESS 插件，写好之后会自动生成语义相同的 css 文件

关于EasyLESS扩展的配置

在settings.json文件中添加以下代码（注意json文件中尽量不要添加中文注释，会报错）

JSON
{    
    "less.compile": {
        "compress":  true,
        "sourceMap": true,  
        "out":       true, 
    }
}

• compress 代表压缩css。

• sourceMap 代表生成地图（在浏览器控制台可以追踪到less文件位置）

• out代表输出对应的css文件

  所以一般全部都为true

  当然你也可以这样

CODE
"less.compile": {
    "out": "${workspaceRoot}\\src\\assets\\css\\"
}

• ‘${workspaceRoot}’ 代表的是根目录；
• 这样就可以更改生成.css文件的路径了，但是上面代码配置是我的.css文件的目录地址，这个自行配置就行；

3.less语法

3.1 导入与注释

在 less 中导入文件用 @import

import用来将其他的less引入到当前的less

可以通过import来将其他的less引入到当前的less中

HTML
@import "../test.less";

less 注释

• less 里面的注释分为在编译之后仍然显示和在编译以后不显示两种

HTML
/* 我在编译之后仍然显示 */  css中的注释，内容会被解析到css文件中
// 我在编译之后不显示 less中的单行注释，注释中的内容不会被解析到css中

3.2 less变量

• less 中使用 \@ 来定义变量
• less 中的变量是块级作用域

HTML
@color:pink;

• 选择器和属性名同样可以作为变量 (但是这种形式用的很少)

CSS
@m:margin;
@selector:#wrap;
* {
    // 使用的时候要加大括号
    @{m}:0;
}
@{selector} {
    color: pink;
}
// 网址在使用的时候也要加大括号
@image: "../image";
div {
    background: url("@{image}");
}

• 变量的延迟加载 (变量提升)：less 会等到块级作用域加载完成才会替换里面的变量

HTML
div {
    //可以先使用后定义
    z-index: @var;
    @var: 3;
}
// z-index 属性值为 3

• 变量发生重名时，会优先使用比较近的变量

CSS
@d:200px;
@d:300px;
@h:200px;
@h:300px;

div{
    // 变量发生重名时，会优先使用比较近的变量
    @d:115px;
    width: @d;  //此处使用115px
    height: @h; //此处使用115px
    //可以在变量声明前就使用变量
    @h:115px;
}

• 其实 css3 中也支持变量，以两个横线开头定义一个变量--

CSS
html{
    /* css原生也支持变量的设置 */
    --color:#ff0;
    --length:200px;
}

新版本语法$

CSS
div{
    width: 300px;
    // 新版的语法
    height: $width;
}

• css3的变量详解

3.3 less嵌套规则

• 父标签的样式可以嵌套子标签的样式 (像在 html 里面的结构一样)

CSS
#father {
    color:pink;
    .inner {
        color: purple;
    }
}

• 假如要让 子元素 .inner 添加一个 hover 属性

  & 表示父类的名称

CSS
#father {
    color:pink;
    .inner {
        color: purple;
        // 不能直接在里面写 :hover,这样写他会直接变成inner的子元素
        // 要这样写
        &:hover {
            background: pink;
        }
    }
}

3.4 less混合

• 混合是为了避免大量重复的样式代码，可以将一部分样式打包成代码块 (长得很像函数)

CSS
// 可以传参，即使没有参数也要加括号，加了括号后在 css 文件中不会显示
.template(@w,@h) {
    color: pink;
    width: @w;
    height: @h;
}
div {
    // 上面的样式就添加到里面了
    .template(100px,100px);
}

• less 混合支持默认参数，例如：

CSS
.template(@w:100px,@h:200px) {
    color: pink;
    width: @w;
    height: @h;
}
div {
    // 这时里面可以不用传参数
    .template();
}

• less 也支持命名参数，解决了参数不匹配的问题

CSS
.template(@w:100px,@h:200px,@c:pink) {
    color: @c;
    width: @w;
    height: @h;
}
div {
    // .template(black);
    // 显示错误，w 参数把 black 接收了过去，导致显示错误
    .template(@c:black);
    // 正确写法
}

小知识：haslayout：是 ie6 版本之前的兼容性问题，可以开启 haslayout 来解决兼容性问题 开启的方法：overflow: hidden

• less 匹配模式：例如想要弄四个方向的三角型，可以在函数的第一个参数上弄一个标识符，然后就可以定义四个混合，这时就可以根据传入的参数来判断想要用的是哪个方向的三角型

CSS

// 向左的三角型
.template(L,@w:100px,@h:200px,@c:pink) {
    // 假如里面是画三角型的方法
    color: @c;
    width: @w;
    height: @h;
}
// 向右的三角型
.template(R,@w:100px,@h:200px,@c:pink) {
    // 假如里面是画三角型的方法
    color: @c;
    width: @w;
    height: @h;
}
div {
    // 想要一个向左的三角型
    .template(L);
}

• 当混合里面的第一个参数是 @_ 时并且也拥有其他形参时，调用同名混合也会把拥有这个参数的混合调用上
  • arguments 变量：和 js 中的 arguments 是一样的，是包含实参的伪数组

CSS
.border() {
    border: @arguments;
}
div {
    .border(1px,solid,black);
}
// 可以把合并语法传入进去

3.5 less 计算

• 在 less 中，计算的双方只需要一方带单位就可以了
• 例如：100 + 100px == 200px
• 为了和 css 保持兼容，less 不会把 calc() 属性计算出来，会留到 css 中计算
  在less中所有的数值都可以直接进行运算

CSS
.box1{
    // 在less中所有的数值都可以直接进行运算
    // + - * /
    width: 100px + 100px;
    height: 100px/2;
    background-color: #bfa;
  
    .box1{
      /* calc()计算函数 */
      width: calc(200px*2);
      height: var(--length);
      background-color: var(--color);
    }
    
}

3.6 less 继承

• 继承同样是为了压缩代码，混合有时候两个类似的功能，他们的 css 代码相差不多，但是里面有很多的重复，这时我们可以使用继承来写这部分代码
• 在继承中不支持参数
• 语法格式：div:extend(.jicheng) (实质就是在两个选择器中加了一个逗号)

CSS

//:extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: red;
}

.p3{
    //直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
    //mixin 混合
    .p1();
}

// 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
.p4(){
    width: 100px;
    height: 100px;
}

.p5{
    .p4;
}

或者我们这样来看更直观

CSS
// less 文件
.jicheng {
    width: 100px;
    height: 100px;
    margin: 0;
    padding: 0;
}
.header:extend(.jicheng) {
    /* header 里的代码 */
}

• less 编译后

CSS
/* css 文件 */
.jicheng,
.header {
    width: 100px;
    height: 100px;
    margin: 0;
    padding: 0;
}
.header {
    /* header 里的代码 */
}

• 想要继承类的所有状态需要在 extend 后面加上 all div:extend(.jicheng all)

CSS
.jicheng {
    // 继承的东西...
}
.jicheng:hover {
    // :hover 继承的东西...
}
.header:extend(.jicheng all) {
    // header 自己的样式
}

• 这样就可以继承本身的和 :hover 的了

CSS
.jicheng,
.header {}
.jicheng:hover,
.header:hover {}

3.7 函数

1.数学函数
1.1 ceil()函数：表示向上取整
less:

.ceil{
width:ceil(555.99999px);
}
css:

.ceil {
width: 556px;
}
1.2 floor()函数：表示向下取整
less:

.floor{
height:floor(333.77777px);
}
css:

.floor {
height: 333px;
}
1.3 percentage()函数：表示把浮点数转换为百分比
less:

.percentage{
width:percentage(0.30px);
}
css:

.percentage {
width: 30%;
}
1.4 round()函数：表示取整和四舍五入
less:

.round{
font-size:round(5.7px);
}
css:

.round {
font-size: 6px;
}
1.5 sqrt()函数：表示计算一个数的平方根，原样保持单位
less:

.sqrt{
width: sqrt(49px);
}
css:

.sqrt {
width: 7px;
}
1.6 abs()函数：表示计算数字的绝对值，原样保持单位
less:

.abs{
height: abs(-888px);
}
css:

.abs {
height: 888px;
}
1.7 sin()函数：表示正弦函数（可忽略）
less:

.sin{
width:sin(1);
}
css:

.sin {
width: 0.84147098;
}
1.8 asin()函数：表示反正弦函数（可忽略）
less:

.asin{
height:asin(1);
}
css:

.asin {
height: 1.57079633rad;
}
1.9 cos()函数：表示余弦函数（可忽略）
less:

.cos{
width:cos(1);
}
css:

.cos {
width: 0.54030231;
}
1.10 acos()函数：表示反余弦函数（可忽略）
less:

.acos{
width:acos(1);
}
css:

.acos {
width: 0rad;
}
1.11 tan()函数：表示正切函数（可忽略）
less:

.tan{
width:tan(5);
}
css:

.tan {
width: -3.38051501;
}
1.12 atan()函数：表示反正切函数（可忽略）
less:

.atan{
width:atan(3);
}
css:

.atan {
width: 1.24904577rad;
}
1.13 pi()函数：表示返回π(pi)（可忽略）
less:

.pi{
height:pi();
}
css:

.pi {
height: 3.14159265;
}
1.14 pow()函数：表示乘方运算
less:

.pow{
width:pow(2,3)px;
}
css:

.pow {
width: 8 px;
}
1.15 mod()函数：表示取余运算
less:

.mod{
width: mod(9,5)px;
}
css:

.mod {
width: 4 px;
}
1.16 min()函数：表示最小值运算
less:

.min{
height:min(5,3,10)px;
}
css:

.min {
height: 3 px;
}
1.17 max()函数：表示最大值运算
less:

.max{
width:max(100,300,200)px;
}
css:

.max {
width: 300 px;
}

2.字符串函数
1.escape()表示将输入字符串的url特殊字符进行编码处理

2.e()表示css转义 用~“值”符号代替

3.%()表示 函数%(string,arguments…) 格式化一个字符串

4.replace()表示用另一个字符串替换文本

3.长度函数
1.length()函数表示返回集合中值的个数

2.extract()函数表示返回集合中指定索引的值

4.类型函数
1.isnumber()表示如果值是一个数字，返回真（true），否则返回假（false）

2.isstring()表示如果值是一个字符串，返回真（true），否则返回假（false）

3.iscolor()表示如果值是一个颜色，返回真（true），否则返回假（false）

4.iskeyword()表示如果值是一个关键字，返回真（true），否则返回假（false）

5.isurl()表示如果值是一个url地址，返回真（true），否则返回假（false）

6.ispixel()表示如果值是带px单位的数字，返回真（true），否则返回假（false）

7.issem()表示如果值是带em单位的数字，返回真（true），否则返回假（false）

8.ispercentage()表示如果值是一个带%单位的数字，返回真（true），否则返回假（false）

9.isunit()表示如果值是带指定单位的数字，返回真（true），否则返回假（false）

5.颜色值定义函数
1.rgb()表示通过十进制红、绿、蓝（RGB）创建不透明的颜色对象

2.rgba()表示通过十进制红、绿、蓝（RGB），以及alpha四种值（RGBA）创建带alpha透明的颜色对象

3.argb()表示创建格式为#AARRGGBB的十六进制颜色 ，用于IE滤镜，.net和安卓开发

4.hls()表示通过色相，饱和度，亮度（HLS）三种值创建不透明的颜色对象

5.hsla()表示通过色相，饱和度，亮度，以及alpha四种值（HLSA）创建带alpha透明的颜色对象

6.hsv()表示通过色相，饱和度，色调（HSV）创建不透明的颜色对象

7.hsva()表示通过色相，饱和度，亮度，以及alpha四种值（HSVA）创建带alpha透明的颜色对象

6.颜色值通道提取函数
1.hue()从HSL色彩空间中提取色相值

2.saturation()从HSL色彩空间中提取饱和度

3.lightness()从HSL色彩空间中提取亮度值

4.hsvhue()从HSV色彩空间中提取色相值

5.hsvsaturation()从HSV色彩空间中提取饱和度值

6.hsvvalue()从HSV色彩空间中提取色调值

7.red()提取颜色对象的红色值

8.green()提取颜色对象的绿色值

9.blue()提取颜色对象的蓝色值

10.alpha()提取颜色对象的透明度

11.luma()计算颜色对象luma的值（亮度的百分比表示法）

12.luminance()计算没有伽玛校正的亮度值

7.颜色值运算函数
1.saturate()表示增加一定数值的颜色饱和度

2.desaturate()表示降低一定数值的颜色饱和度

3.lighten()表示增加一定数值的颜色亮度

4.darken()表示降低一定数值的颜色亮度

5.fadein()表示降低颜色的透明度（或增加不透明度），令其更不透明

6.fadeout()表示增加颜色的透明度（或降低不透明度），令其更透明

7.fade()表示给颜色（包括不透明的颜色）设定一定数值的透明度

8.spin()表示任意方向旋转颜色的色相角度

9.mix()表示根据比例混合两种颜色，包括计算不透明度

10.greyscale()表示完全移除颜色的饱和度，与desaturate（@color，100%）函数效果相同

11.contrast()表示旋转两种颜色相比较，得出哪种颜色的对比度更大就倾向于对比度最大的颜色

8.颜色混合函数
1.multiply()表示分别将两种颜色的红绿蓝三种值做乘法运算，然后再除以255，输出结果更深的颜色（对应ps中的“变暗/正片叠底”）

2.screen()表示与multiply函数效果相反，输出结果更亮的颜色。（对应ps中“变亮/滤色”）

3.overlay()表示结合multiply与screen两个函数的效果，令浅的颜色更浅，深的颜色更深（对应ps中的叠加），输出结果由第一个颜色参数决定

4.softlight()表示与overlay函数效果相似，只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色（对应ps中的“柔光”）

5.hardlight()表示与overlay函数效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，而不是第一个颜色参数决定（对应ps中“强光/亮光/线性光/点光”）

6.difference()表示从第一个颜色值中减去第二个（分别计算RGB三种颜色值），输出结果更深的颜色（对应ps中“差值/排除”）

7.exclusion()表示效果与difference函数效果相似，只是输出结果差别更小（对应ps中“差值/排除”）

8.average()表示分别对RGB三个颜色值取平均值，然后输出结果。

9.negation()表示与difference函数效果相反，输出结果是更亮的颜色。（效果相反不代表做加法运算