less学习笔记

Less基础

1.维护CSS的弊端

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

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

2.Less介绍

Less（Leaner Style Sheets 的缩写）是一门 CSS 扩展语言，也称为 CSS 预处理器。

做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为 CSS 加入程序式语言的特性。

它在 CSS 的语法基础上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。

Less 中文网址：Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com)

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

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

3.Less安装（注意如果使用VSCode无需安装Less）

用node运行Less

1. 安装 node.js，可选择版本（8.0），网址：http://nodejs.cn/download/
2. 检查是否安装成功，使用 cmd 命令输入 node -v 查看版本即可
3. 基于 node.js 在线安装 Less，使用 cmd 命令输入 npm install -g less 即可
4. 检查是否安装成功，使用 cmd 命令 lessc -v 查看版本即可

vscode使用Less

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

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

【VSCode Less 插件】

vscode 的 Easy LESS 插件

这个插件可以自动将less文件转义成css文件
关于配置

settings.json配置如下

"less.compile": {
   
        "compress": true, // true => remove surplus whitespace
        "sourceMap": true, // true => generate source maps (.css.map files)将浏览器审查元素中css代码在css文件中的位置改成对应的less文件中的位置
        "out": true // false => DON'T output .css files (overridable per-file, see below)生成对应的css文件
    }
1
2
3
4
5
6

只要保存一下 less 文件，会自动生成 CSS 文件。

4.注释(Comments)

• 多行注释保留
• 单行注释不被保留在编译生成的 CSS 中

/* 
 * 一个块注释
 * style comment! 
*/

// 这一行被注释掉了！
div {
  color: red;
}
1
2
3
4
5
6
7
8
9

5.变量(Variables)

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

@变量名: 值;

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

@变量名: 值;

5.1 变量命名规范

• 必须有 @ 为前缀
• 不能包含特殊字符
• 不能以数字开头