CSS--LESS语法

1.什么是less:一种权限的css预处理语言

   可以理解为,对原有css语法进行了拓展,让我们的css代码变得更灵活,更好的维护

2.LESS开发环境搭建

3.变量

• 变量(variable)作用：存储数据

  • 类似于数学中的字母，例如 a = 10, ax5 = 50.这个a就代表10，好处就是便于维护css代码

• 2.语法：@变量名 : 值

  • @w:100px,定义一个变量w，存储宽度100px

  • @bgc:hotpink,定义一个变量bgc，存储颜色hotpink

4..注意点：less中的变量可以使用 + - * / 进行数学计算  加减乘除(注意:加减乘除前后需要有空格)

5.less语法-混合

• .less混合语法作用：在一段css代码中通过类名插入另一段css代码

• 2.语法: .类名()

• less代码如下

6.==less语法-嵌套==

• less嵌套语法作用：将后代选择器写在一个大括号中，提高代码阅读性

• less代码如下

.box{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    
    span{//相当于css的后代选择器: .box span
        color: green;
    }
​
    >span{//相当于css子代选择器： .box>span
        color: purple;
    }
​
    a{//相当于css后代选择器： .box a
        color: blue;
        &:hover{//less支持多层嵌套，注意伪类前面需要加上&,相当于css： .box a:hover
            color: black;
        }
    }
}

less语法-导入

• 1.less导入语法作用：在一个文件中导入多个css文件，可以减少html文件中link标签数量(提高代码简洁性)

  • 其实就是将多个css文件代码合并到一个css文件中

  • 项目一般是会有多个css文件，那么现在我们使用less的方式来写css，相对来讲，文件数目会翻倍。 如果每个css文件我都导入，那相对来讲是一件非常麻烦的事情,所以我们可以利用LESS中的导入语法

• 2.导入语法: @imports "需要导入的less文件名;"

  • 注意点

    • a.注意less文件名需要使用双引号引起来

    • b.最后面那个分号不能省略

    • c.后缀名less可以省略

//导入：相当于把多个文件css代码合并到一个css文件中

//将base和index两个文件css代码合并到total文件中

@import "base.less";//后缀名less也可以省略， @import "base"

@import "index.less";