CSS 预处理器语言Less
文章目录
-
- 概览
-
- Less 是什么？
- Less安装
-
- 通过 [npm](https://www.npmjs.org/) 安装
- Less转换为CSS
- 变量（Variables）
- 注释（Comments）
- 混合（Mixins）
- 嵌套（Nesting）
-
- 1. 选择器嵌套
- 2. 父选择器 `&`
- @规则嵌套和冒泡
- 运算（Operations）
- 转义（Escaping）
- 函数（Functions）
- 命名空间和访问符
- 映射（Maps）
- 作用域（Scope）
- 导入（Importing）
概览
Less 是什么？
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
Less安装
通过 npm 安装
npm install less -g
-g:表示全局安装
若想安装特定版本号可以在less后加上@+版本号
Less转换为CSS
less是没有办法直接使用在浏览器上面的，只有css才能直接使用到浏览器的上面。所以我们要把less转化成css。
-
通用方式
- 新建一个less文件（a.less）
@color: blue; a { color: @color; background-color: @color; }- 打开cmd，cd到less文件目录，输入以下命令：
lessc a.less a.css这样a.less文件的代码就会编译为css代码并保存到a.css文件中
a { color: blue; background-color: blue; } -
在VSCode中使用less（可以使用插件）
- 在vscode拓展插件中搜索Easy LESS点击安装即可。
- 安装后只要新建了一个.less后缀的文件，软件就会在同一目录下自动创建一个.css的文件，并且在.less文件编写代码并按下Ctrl+S保存的同时，css文件会编译生产相应的css代码。
变量（Variables）
使用变量可以方便修改属性值。
在Less中可以使用变量：
表达式：@+变量名 : 属性值
@color: #1a2a3a; // 变量声明
body { // 使用变量
background-color: @color;
}
div {
color: @color;
}
编译为：
/* css */
body {
background-color: #1a2a3a;
}
div {
color: #1a2a3a;
}
注释（Comments）
在less中可以进行代码注释，方式有单行注释（//）、*多行注释（/ */）**两种，但是只有多行注释才能在编译后的文件中出现。
@color: #1a2a3a;
body {
// 使用变量
/*使用变量*/
background-color: @color;
}
编译为：
/* css */
body {
/*使用变量*/
background-color: #1a2a3a;
}
混合（Mixins）
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
.length {
width: 100px;
height: 200px;
}
#apple a {
color: #222;
.length();
}
.happy a {
color: blue;
.length();
}
编译为：
/* css */
.length {
width: 100px;
height: 200px;
}
#apple a {
color: #222;
width: 100px;
height: 200px;
}
.happy a {
color: blue;
width: 100px;
height: 200px;
}
嵌套（Nesting）
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。
1. 选择器嵌套
div {
h1 {
color: #333;
}
p {
margin-bottom: 1.4px;
a {
color: #999;
}
}
}
编译为：
/* css */
div h1 {
color: #333;
}
div p {
margin-bottom: 1.4px;
}
div p a {
color: #999;
}
2. 父选择器 &
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline;
}
body.firefox & { font-weight: normal;
}
}
编译为：
/* css */
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body.firefox a {
font-weight: normal;
}
@规则嵌套和冒泡
@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。
.component {
width: 300px;
@media (width: 567px) {
width: 600px;
@media (resolution: 192dpi) {
background-image: url(/img/1.png);
}
}
@media (width: 1120px) {
width: 400px;
}
}
编译为：
/* css */
.component {
width: 300px;
}
@media (width: 567px) {
.component {
width: 600px;
}
}
@media (width: 567px) and (resolution: 192dpi) {
.component {
background-image: url(/img/1.png);
}
}
@media (width: 1120px) {
.component {
width: 400px;
}
}
运算（Operations）
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。
.class {
width: @width;
color: @color;
}
@width: 0.4 + 0.4;
@base: 0.1 ;
@sub: @width - @base;
@color: #121a2a * 2; // 颜色运算
#div {
color: @color;
width: @sub;
}
编译为：
.class {
width: 0.8;
color: #243454;
}
#div {
color: #243454;
width: 0.7;
}
转义（Escaping）
转义（Escaping）允许使用任意字符串作为属性或变量值，编译后会原样输出。
格式：~"(任意字符串)"
@min678: ~"(min-width: 678px)";
.element {
@media @min678 {
font-size: 0.8rem;
}
}
编译为：
@media (min-width: 678px) {
.element {
font-size: 0.8rem;
}
}
注意，从 Less 3.5 开始，可以简写为：(任意字符串)
@min678: (min-width: 678px);
.element {
@media @min678 {
font-size: 0.8rem;
}
}
在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。
函数（Functions）
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。
@width: 0.4;
@color: #1a2a3b;
.class {
width: percentage(@width);
color: saturate(@color, 5%);
background-color: spin(lighten(@color, 25%), 8);
}
编译为：
/* css */
.class {
width: 40%;
color: #182a3d;
background-color: #415e94;
}
了解更多函数：函数手册
命名空间和访问符
为了组织结构、为了以后方便重用或分发、为了提供一些封装的目的，或是为了对混合（mixins）进行分组。可以将一些混合（mixins）和变量置于 #bundle 之下：
#bundle() {
.button {
border: 1px solid red;
&:hover {
background-color: black;
}
}
}
#header a {
color: blue;
#bundle.button(); // 还可以书写为 #bundle > .button 形式
}
编译为：
#header a {
color: blue;
border: 1px solid red;
}
#header a:hover {
background-color: black;
}
映射（Maps）
从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
@width: 0.4;
@color: blue;
#div {
color: @color;
width: @width;
}
.span{
color: #div[color];
width: #div[width];
}
编译为：
#div {
color: blue;
width: 0.4;
}
.span {
color: blue;
width: 0.4;
}
作用域（Scope）
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
@width: 0.4;
@color: blue;
#div {
@color: white;
#header {
color: @color; // white
width: @width; // 0.4
}
}
编译为：
#div #header {
color: white;
width: 0.4;
}
与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。
.class {
width: @width;
color: @color;
}
@width: 0.4;
@color: blue;
编译为：
.class {
width: 0.4;
color: blue;
}
导入（Importing）
可以通过@import "要导入的文件名（可以省略文件拓展名）"引用其他less文件中的内容，将其输出在同一个css文件中。
// _test2.less
body{
text-align: center;
}
// test.less
@import "_test2"; // 导入_test2.less文件内容
@width: 0.4;
@color: #1a2a3b;
.class {
width: @width;
color: @color;
}
编译为：
/* css */
body {
text-align: center;
}
.class {
width: 0.4;
color: #1a2a3b;
}