Less预处理学习笔记

1.前言

CSS预处理是一种将CSS作为目标生成文件的，使用变量、函数及其简单的逻辑实现更加简洁、适应性更强、可读性更好、更加易于代码维护的兼容浏览器的页面样式文件

1.1为什么要进行CSS预处理

​ CSS自但诞生以来，基本语法和核心机制一直没有本质上的变化，它的发展几乎全是表现力层面上的提升。最开 始 CSS 在网页中的作用只是辅助性的装饰，轻便易学是最大的需求；然而如今网站的复杂度已经不可同日而语，原 生 CSS 已经让开发者力不从心。

​ 而CSS预处理用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就 只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，无需 考虑浏览器的兼容性问题，然后再编译成正常的CSS文件，以供项目使用。例如你可以在CSS中使用变量、简单的 逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护。

一些常见的CSS缺憾：

1. 语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
2. 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

1.2 三大预处理语言

分别是Less、Sass和Stylus

1. Sass: 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
2. Less: 2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS
3. Stylus: 2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。

1.3 Less的功能与简介

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合、函数等功能，让 CSS 更易维护、 方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

​ 本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终 会通过解析器，编译生成对应的 CSS 文件。Less并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现 有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

1.4 引入Less的方式

Less既可以运行在Node服务端，也可以运行在浏览器客户端。

一般来说，客户端运行Less分为两种情况：

1. 第一种方式是直接在html页面引用.less文件，然后借助less.js去编译less文件动态生成CSS样式而存在于当 前页面，这种方式适用于开发模式。

 <link rel="stylesheet/less" href="style.less">
 <script src="less.min.js"></script>

2.第二种方式是我们首先写好.less文件的语法，然后借助工具生成对应 的CSS文件，然后客户端直接引用CSS文件即可。比如我们常用的bootstrap.css就是通过工具编译而成，这种方式更适合运行环境。

下面我写一下在vscode中如何使用：

1. 安装Ease LESS插件
2. 在setting.json中添加以下配置

  "[less]":{
		"editor.suggest.insertMode":"replace"
	},
	"less.compile": {
        "compress": false, // 是否删除多余空白字符
        "sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件
        "out": true, // 是否编译输出文件
        "outExt": ".css", // 输出文件的后缀,默认为.css
    }

​ 3. 检测是否搭建成功，建立.less文件，写入相关代码后会自动编译CSS文件

2.正文

Less的语法以及其他特性

2.1 变量

Less中的允许我们在某个地方对常用的值进行定义，然后应用到样式中。以后当我们改变定义的变量参数值就可以达到改变全局的效果

值得一提的是在Less中的变量实际上是一个常量，因此它们只能被定义一次。

那么我们可以将CSS中的什么定义为变量呢？

几乎有复用的可以，例如值、选择器、属性名称、URL地址等（还可以使用变量去定义变量）

详细请看实例：

@color:rgb(255,189,91);//值
@box_showdow:0px -2px 2px 2px #999;
@boxname:box;//选择器
.@{boxname}{
    color: @color;
    width: 200px;
    height: 50px;
    box-shadow: @box_showdow;
    margin-bottom: 20px;
}
p{
  color: @color;
  width: 200px;
  height: 100px;
  border: 1px solid #000;
}
@cl:#000;
@hightlight:'cl';//使用变量去定义变量
#header{
    color: @@hightlight;
}

对应CSS：

.box {
  color: #ffbd5b;
  width: 200px;
  height: 50px;
  box-shadow: 0px -2px 2px 2px #999;
  margin-bottom: 20px;
}
p {
  color: #ffbd5b;
  width: 200px;
  height: 100px;
  border: 1px solid #000;
}
#header {
  color: #000;
}

2.2 混合用法

首先我们需要清楚的是这种使用方式和函数的使用是类似的

1.不带参使用：

直接引用其类名即可

.style{
    color: aqua;
    font-family: 'Courier New', Courier, monospace;
}
.box1{
    .style;
}

生成CSS：

.style {
  color: aqua;
  font-family: 'Courier New', Courier, monospace;
}
.box1 {
  color: aqua;
  font-family: 'Courier New', Courier, monospace;
}

1.带参使用：

带参数时可以给定默认值或者不给，并且可以带多个参数。

.bg(@fontsize:3px){
    background: #000;
    font-weight: 100;
    font-size: @fontsize;
}
.box{
    .bg(5px)
}

对应CSS：

.box {
  background: #000;
  font-weight: 100;
  font-size: 5px;
}

2.3 嵌套

关于less的嵌套我们需要知道&符号是表示上一层选择器的名，常用在表示伪类或伪元素等时使用

实例：

div{
    width: 100px;
    height: 100px;
    ul{
        width: 100%;
        li{
            list-style-type: none;
            text-align: center;
            &:hover{
                color: red;
            }
        }
    }
    p{
        font-size: 24px;
        color: aqua;
    }
}

生成对应CSS：

div {
  width: 100px;
  height: 100px;
}
div ul {
  width: 100%;
}
div ul li {
  list-style-type: none;
  text-align: center;
}
div ul li:hover {
  color: red;
}
div p {
  font-size: 24px;
  color: aqua;
}

2.4 运算

运算时变量需要带单位，然后直接进行运算

实例：

@num:20px;
div{
    margin: @num+10 @num - 10 @num*10 (@num/10);
}

生成的CSS：

div {
  margin: 30px 10px 200px 2px;
}

2.5 作用域

作用域在编译时采用就近原则。首先会从当前作用域内去查找变量或者混合模块，如果没有找到，则去父级作用域查找，知道找到为止。

实例：

@color:red;
div{
    color: @color;
}
p{
@color:yellow;
color: @color;
}

生成的CSS

div {
  color: red;
}
p {
  color: yellow;
}

2.6 函数

2.6.1 Color函数

Less提供了一系列的颜色运算函数。颜色会先被转换为HSL色彩空间，然后在通道级别操作。常用的有以下几种：

函数	解释
lighten(@color, 10%);	返回一个比@color浅10%的颜色
darken(@color, 10%);	返回一个比@color 深10%的颜色
saturate(@color, 10%);	返回一个比color饱和比高10%的颜色
desaturate(@color, 10%);	返回一个比color饱和比低10%的颜色
fadein(@color, 10%);	返回一个比@color 透明度低10%的颜色
fadeout(@color, 10%);	返回一个比@color 透明度高10%的颜色
fade(@color, 50%);	返回一个@color颜色的50%透明度的颜色
spin(@color, 10);	返回一个比@color 色调大10度的颜色
spin(@color, -10);	返回一个比@color 色调小10度的颜色
mix(@color1, @color2) 返回	返回一个@color1和@color2混合的颜色

2.6.2 Math函数

LESS提供了一组方便的数学函数，可以使用它们处理一些数字类型的值。常用的有以下几种：

函数	解释
round（x，y）	对x四舍五入，保留y个小数点
ceil（x）	向上取整
floor（x）	向下取整
percentage（x）	取百分数。比如percentage（0.6）返回60%
min(a,b,c,d,e…)	最小值
max(a,b,c,d,e…)	最大值

2.7 避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 Less不认识的专有语法，要输出这样的值我们可以将 要避免编译的值用 “”包含起来，然后在字符串前加上一个“ ~ ”。

#main{
    width:~'calc(300px-30px)';
} 

生成：

#main {
  width: calc(300px-30px);
}