Leaaner Style Sheets(Less)

概念：

是一种动态样式表语言，扩展SS的扩展语言。
是CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。

在CSS语法基础上，引入变量，Mixin(混入），运算以及函数等功能。
降低CSS维护成本。

为什么诞生出来LESS

因为CSS是具有弊端的，CSS是一门非程序语言，没有变量、函数、SCOPE（作用域）等概念。需要LESS来提供计算简便的能力。

常见CSS预处理器：Sass、Less、Style。

为什么要使用Less

• 基于JavaScript设计，是超集的CSS；
• 可以定义样式，在整个代码中重复使用；
• 便捷，可以排除代码冗余问题；
• 通过使用CSS变量来实现更快维护。

安装教程

1 在Visual Studio Code中 扩展 搜索 Easy LESS。
2. 点击安装。
3. 重启VS。

 

如何使用

1.在安装完毕后，打开一个新的文件.html;
2.在新文件.html中引入.less;

<link rel="stylesheet" href="next.css">

3.创建一个新的文件.less；
4.在文件.less写下代码的同时会自动生成文件文件.css。

Less变量

没有固定值，可以改变。

格式：

                                       @变量名：变量值；

变量名规范：

• 必须以@为前缀；
• 不能包含特殊字符；
• 不能以数字开头；
• 大小写敏感。

实例：

@color: pink;
body {
    background-color: @color;
}
div {
    color: @color;
}

Less编译

Less是包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则会通过解析器，编译生成对应的CSS文件。

所以，我们需要把我们的Less文件，编译生成为CSS文件，这样我们的html页面才能使用。

Less嵌套

1. 子元素的样式直接写到父元素里面

.header {
    width: 200px;height: 222px;
    background-color: rgb(60, 14, 228);
    a {
        color: aquamarine;
        &:hover {
            color: red;
        }
    }
}

2.交集/伪类/伪元素选择器

• 内层选择器前面无 & 符号，则它被解析为父选器的后代。
• 如果有 & 符号，它被解析为父元素或父元素的伪类。

a {
        color: aquamarine;
        &:hover {
            color: red;
        }
    }

 

Less运算

任何数字、颜色、变量都可以参加运算。
运算包括：+ - * / 。

规范

• 运算符左右隔一个空格；
• 两个数参与运算，只有一个数有单位，以这个单位为准；
• 两个数参与运算，都有单位，以第一个值单位为准。

实例

@border: 5px + 5;
.sha {
    width: 200px;
    height: 200px;
    border:@border solid red;