接触css预处理器-Less

维护css的弊端

CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念

• CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的
• 不方便维护及扩展，不利于复用
• CSS没有很好的计算能力
• 非前端开发工程师来讲，旺旺会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目

Less 介绍

• Less （Leaner Style Sheets 的缩写） 是一门CSS扩展语言，也称为CSS预处理器
• 做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现在有的CSS语法上，为CSS加入程序式语言的特性
• 它在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS维护的成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情

Less中文网址：http://lesscss.cn/

常见的CSS预处理器：Sass、Less、Stylus

一句话：Less是一门CSS预处理语言，它扩展了CSS的动态特性

Less安装

1. 安装node.js，可选择最新的版本，网址：https://nodjs.org/en/download/
2. 检查是否安装成功，使用cmd命令（win10 是 windows + r 打开 运行输入cmd）---输入 "node -v" 查看版本即可
3. 基于node.js 在线安装Less，使用cmd命令 "npm install -g less"即可
4. 检查是否安装成功，使用cmd命令 "lessc -v" 查看版本即可

Less 使用

我们首先新建一个后缀名为 .less的文件，在这个 .less 文件里面书写 Less 语句

• Less 变量
• Less 编译
• Less 嵌套
• Less 运算

Less变量

• 变量是指没有固定的值，可以动态改变的。因为我们CSS中的一些颜色和数值等经常使用
• @变量名:值;

1、变量名命名规范

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

@color:pink

2、变量使用规范

//直接使用
@color:pink;
body {
    color:@color;
}
a:hover {
    color: @color;
}

Less 编译

• 本质上，less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件
• 所以，我们需要把我们的 .less文件，编译生成为 .css 文件，这样我们的 html 页面才能使用
• 推荐方法（node.js）：在当前文件夹，使用 cmd 命令 “lessc style.less>style.css”

*常用方法：Vscode Less 插件

• Easy Less 插件用来把less文件编译为css文件
• 安装完毕插件，重新打开 vscode
• 只要保存下Less文件，就会自动生成CSS文件

Less 的嵌套

之前我们需要用空格来表示元素的嵌套关系

#header .logo {
    width: 300px;
}

而在 Less 中嵌套写法略微有些不同

#header {
    .logo {
        width: 300px;
    }
}

那么如果遇见（交集|伪类|伪元素选择器）该怎么写呢？

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

我们经常用的选择器

a:hover {
  color: rebeccapurple;
}

Less嵌套写法

a{
    &:hover {
        color: rebeccapurple;
    }
}

Less 运算

• 任何数字、颜色或者变量都可以参与运算。Less 提供了-- 加（+）、减（-）、乘（*）、除（/）算数运算

/* Less 里面写 */
@width: 10px + 5;
div {
    border: @width solid red;
}
/* 生成的css */
div {
    border: 15px solid red;
}
/* Less 甚至还可以这样 */
div {
    width: (@width + 5) * 2;
}

• 注意

1. 参与运算的两个数字，可以一个有单位，一个没有单位，最终单位就是唯一的那个单位
2. 参与运算的两个数字，两个都有单位，最终的单位取第一个数字的单位
3. less的运算符左右必须加空格
4. 颜色也可以参与运算

目录：