凹凸学习

# 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 使用

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

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

# Less 变量

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

@变量名: 值;
1

1. 变量命名规范

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

# Less 编译

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

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

vscode Less编译 ★

Easy LESS 插件用来把Less文件编译为css文件。安装完毕插件，重新启动vscode。只要保存一下Less文件，会自动生成css文件。

# Less 嵌套

我们经常用到选择器的嵌套

#header .logo {
    widht: 300px;
}
1
2
3

Less 嵌套写法

#header {
    .logo {
        widht: 300px;
    }
}
1
2
3
4
5

如果遇到（交集|伪类|伪元素选择器）

  • 内层选择器的前面没有&符号，则它被解析为父选择器的后代；
  • 如果有&符号，他就被解析为父元素自身或父元素的伪类。
a:hover {
    color: red;
}
1
2
3

Less 嵌套写法

a {
    &:hover {
        color: red;
    }
}
1
2
3
4
5

# Less 运算 ★

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

/* Less */
@width: 10px + 5;
div {
    border: @width solid red;
}
/* Css */
div {
    border: 15px solid red;
}
/* Less甚至可以这样写 */
width: (@width + 5) * 2;
1
2
3
4
5
6
7
8
9
10
11

注意：

  • 乘号（*）和除号（/）的写法
  • 运算符中间左右有个空格隔开 1px + 5
  • 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
  • 如果两个值之间只有一个值有单位，则运算结果就取该单位

# Less 导入

在 index.less 中导入 common.less 文件，语法如下

@import "common";
1

注意：一定要写分号。

← rem适配方案 →