【尚硅谷】HTML5+CSS3学习笔记（八）LESS入门（含大量源码）

（八）LESS入门

---

== 本部分更多内容欢迎订阅专栏HTML+CSS学习专栏，将持续更新==

8.1 对于变量的设置：

css原生也支持变量的设置

并拥有calc（）计算函数

但是兼容性并不好

        html{
            /* css原生也支持变量的设置 */
            --color:#ff0;
            --length:200px;
        }
        .box2{
            width: var(--length);
            height: var(--length);
            color: var(--color);
        }
        .box1{
            /* calc()计算函数 */
            width: calc(200px*2);
            height: var(--length);
            background-color: var(--color);
        }

8.2 什么是less:

less是一门css的预处理语言

• less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
• 在less中添加了许多的新特性：像对变量的支持、对mixin的支持… …
• less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

less文件：可以直接体现后代关系

body{
    width: 100px;
    height: 100px;
    
    div{
        color: red;
    }
}

转为css文件（运用Easy LESS插件）：

body {
  width: 100px;
  height: 100px;
}
body div {
  color: red;
}

8.3 less变量：

变量，在变量中可以存储一个任意的值

并且我们可以在需要时，任意的修改变量中的值

变量的语法： @变量名

@a:200px;
@b:#bfa;
@c:box6;

使用变量是，如果是直接使用则以 @变量名 的形式使用即可

.box5{
    width: @a;
    color:@b;
}

作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用

.@{c}{
    width: @a;
    background-image: url("@{c}/1.png");
}

就近原则：变量发生重名时，会优先使用比较近的变量

且可以在变量声明前就使用变量

@d:200px;
@d:300px;
div{
    @d:115px;
    width: @d;
    height: @e;
}
@e:335px;

可以将已有变量值赋给变量

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

8.4 父元素扩展：

& 就表示外层的父元素

less文件：

.box1{
    .box2{
        color: red;
    }

    >.box3{
        color: red;

        &:hover{
            color: blue;
        }
    }
    //为box1设置一个hover
    //& 就表示外层的父元素
    &:hover{
        color: orange;
    }

    div &{
        width: 100px;
    }
}

css文件：

.box1 .box2 {
  color: red;
}
.box1 > .box3 {
  color: red;
}
.box1 > .box3:hover {
  color: blue;
}
.box1:hover {
  color: orange;
}
div .box1 {
  width: 100px;
}

extend() 对当前选择器扩展指定选择器的样式（选择器分组）

.p1{
    width: 100px;
    height: 200px;
}
.p2:extend(.p1){
    color: red;
}
.p3{
    //直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
    //mixin 混合
    .p1();
}

使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins

这个时候p4不会出现在css文件中，但p4可以被其他样式引用

.p4(){
    width: 100px;
    height: 100px;
}

.p5{
    .p4;
}

8.5 混合函数：

混合函数 在混合函数中可以直接设置变量

可以指定参数，并且传值引用

传值时按顺序传或者按照名字传

//混合函数 在混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}

div{
    //调用混合函数，按顺序传递参数
    // .test(200px,300px,#bfa);
    .test(300px);
    // .test(@bg-color:red, @h:100px, @w:300px);
}

average取平均值：

span{
    color: average(red,blue);
}

darken加深：

body:hover{
    background-color: darken(#bfa,50%);
}

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

@import "syntax2.less";

参考教程：尚硅谷 HTML+CSS b站教程

以上就是本章节的笔记整理，后续也会继续坚持更新我的HTML+CSS学习笔记。

如有错误，欢迎提出指正，在评论区和我一起交流。

往期回顾：
（一）HTML简介
（二）CSS基础
（三）CSS布局
（四）CSS浮动
（五）CSS定位
（六）CSS字体背景
（七）CSS动画