【前端学习笔记】13-less简介

less简介

less的概念

less是css的一门预处理语言

• less是css的一个增强版，通过less可以编写更少的代码实现更强大的样式

• 在less中增添了许多新特性：像对变量的支持丶对mixin的支持

• less的语法大体上和css语法一致，但是less中增添了许多对css的扩展

• 所以浏览器无法直接执行less代码，要执行必须先将less转换成css，然后再有浏览器执行

安装扩展插件

• 在vscode的的扩展中搜索easy-less并安装
• 插件作用：在编写less文件时保存自动生成css后缀文件

less用法

• 创建一个less文件后缀，如style.less，在文件中编写如下代码

body{
    width: 500px;
    height: 500px;

    div{
        width: 200px;
        height: 200px;
        background-color: red;
    }
}

• ctrl+s保存后生成对应style.css,代码如下

body {
  width: 500px;
  height: 500px;
}
body div {
  width: 200px;
  height: 200px;
  background-color: red;
}

• 在HTML中引入style.css文件，有如下效果

基本语法

注释

• // less中的单行注释，内容不会被解析到css中;需要注释的代码前//即可
• / *css中的注释，内容会被解析到css文件中 */

//less中的单行注释，注释中的内容不会解析到css中
/* css中的多行注释，内容会被解析到css文件中*/

关系嵌套

• 在less中，父子关系可以直接嵌套，书写起来结构更加清晰
  less文件

.box{
    width: 500px;
    height: 500px;
    background-color: #bfa;

    .box1{
        width: 200px;
        height: 200px;
        background-color: orange;

        .box3{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
    }

    .box2{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
}

自动生成css代码

.box {
  width: 500px;
  height: 500px;
  background-color: #bfa;
}
.box .box1 {
  width: 200px;
  height: 200px;
  background-color: orange;
}
.box .box1 .box3 {
  width: 100px;
  height: 100px;
  background-color: greenyellow;
}
.box .box2 {
  width: 200px;
  height: 200px;
  background-color: blue;
}

变量

• 变量：在变量中可以存储一个任意的值
• 并且我们可以在修改时，任意改变变量的值
• 变量的语法：@变量名

//变量,在变量中可以存储一个任意的值
//并且我们可以在修改时，任意改变变量的值
//变量的语法：@变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
    //使用变量时，如果是直接使用则以@变量名的形式使用即可
    width: @a;
    color: @b;
}
//作为类名或者一部分值来使用时，必须以@{变量名}的形式使用
.@{c}{
    width: @a;
    background-image: url("@{c}/1.png ");
}
@d:150px;
@d:200px;
div{
    //变量发生重名时，按优先级使用。此处涉及作用域和变量提升等问题
    @d:120px;
    width: @d;
    height: @e;
}
//可以在变量声明前就使用变量（变量提升）
@e:335px;

div{
    width: 300px;
    height: $width;
}

混合函数

• 混合函数:在混合函数中可以直接设置变量,，可给参数设置初始变量

.test(@w:100px, @x:200px, @y:1px){
    width: @w;
    height: @x;
    
    border: @y;
}
div{
    //调用混合函数，按顺序传递（此处涉及参数，传参等概念）
     .test(200px,200px,1px)
    //不按顺序传方法
    //.test(@y:1px,@w:200px,@x:200px)
}
//less提供了许多设定好的函数，如average，darken等

补充

• 以下详细用法见代码注释

& ：extend（） .p4（）

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

.p1{
    width: 100px;
    height: 200px;
  }
//extend(),对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: red;
}
.p3{
    //直接对指定的样式进行引用，这里就相当对p1的样式进行了复制
    //mixin 混合
    .p1();
}