Less

发表于 分类于 ， 阅读次数： Waline： 本文字数： 2.7k 阅读时长 ≈ 2 分钟

CSS的弊端

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

CSS在一定程度上，有下面这些弊端：

  1. 冗余度较高 (特别是在选择器上嵌套的层次过多)
  2. 不方便维护及扩展，不利于复用
  3. 没有很好的计算能力 (虽然css3中引入了calc()函数，但是计算能力有限，并且效率不高)

Less

less（Leaner Style Sheets的缩写）是一门CSS扩展语言，也称为CSS预处理器。 可以理解为css的超集。
它在css的语法基础上，引入了变量、Mixin(混入)、运算以及函数等功能，使得css更加简洁，Write less, do more！

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

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

Less编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。
所以我们需要把less文件，编译生成为css文件，html页面才能使用。

  • Easy LESS插件
    Easy LESS插件可以在我们保存less文件的时候自动编译less文件，并生成对应的css文件。
    当我们修改less文件的时候，生成的css文件会自动更新。
    我们只需要在页面引入生成的css文件即可。

  • Less文件中的注释是 //
    Less文件是通过js来解析的，所以注释是js的注释。而不是css的注释/* /
    Less文件生成的css文件，//注释不会保留。
    Less文件也支持多行注释 /     */，且会保留在css文件中。

Less变量

1
@变量名: 值;

变量命名规范：

  • 变量名必须以@开头
  • 不能包含特殊字符
  • 不能以数字开头
  • 区分大小写
1
2
3
4
5
6
// 定义一个粉色的变量
@color: pink;
// 引用变量
body {
  backgroud-color: @color;
}

Less嵌套

Less支持嵌套写法

  1. 子元素样式直接写到父元素里面
1
2
3
4
5
6
7
8
.header{
  width: 200px;
  height: 200px;
  background-color: pink;
  a {
    color: red;
  }
}

编译后：

1
2
3
4
5
6
7
8
.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
}
  1. 如果遇见 交集|伪类|伪元素选择器
  • 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代
1
2
3
4
5
6
7
8
9
10
11
12
13
a{
  color: red;
  :hover{
    color: blue;
  }
}
// 会被解析为：
a{
  color: red;
}
a :hover{ // 就不是a的伪类的，而是a的子元素
  color: blue;
}
  • 如果有 & 符号，则被解析为父元素自身或父元素的伪类
1
2
3
4
5
6
7
8
9
10
11
12
13
a{
  color: red;
  &:hover{
    color: blue;
  }
}
// 会被解析为：
a{
  color: red;
}
a:hover{
  color: blue;
}

Less运算

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

1
2
3
4
5
6
  @border: 5px + 5;
div{
  width: (200px - 50) * 2;
  height: (200px / 2); // 除法运算，需要用()括起来
  border: @border solid blue + 222; // #666 - 222 = #444
}

通过运算，我们在去写rem的时候就方便很多。比如：
html的font-size: 50px;
某元素大小为82px，换成rem就直接写成 82/50 rem 就可以了，不用再去计算。

注意：

  1. 运算符左右两侧必须有一个空格(现在可以不加空格了)
  2. 除法运算需要用()括起来
  3. 两个数参与运算，如果只有一个数有单位，则结果以这个单位为准
  4. 两个数参与运算，如果2个数都有单位，且是不一样的单位，则以第一个单位为准

Sass

Sass中文网：https://www.sass.hk/
Sass官网：https://sass.bootcss.com/index.html
Sass用法指南 - 阮一峰的网络日志

Sass和Less的区别：

  1. 语法风格：
    • Sass有两种语法风格，一种是使用缩进(类似Python)的缩写语法(.sass)，一种是SCSS(Sassy CSS)，它与CSS语法几乎完全相同，只是添加了额外的功能(使用.scss扩展名)。SCSS现在更为普遍。
    • Less语法更接近传统的css，使用大括号{}界定代码块，使得css开发正更易上手。
  2. 编译环境：
    • Sass 最初是基于Ruby的，需要Ruby环境来运行。尽管后来推出了Dart实现的dart-sass，它不依赖Ruby，但编译速度可能较慢。Sass通常作为开发流程的一部分在服务器端编译。
    • Less 是基于JavaScript的，可以借助Less.js在客户端（浏览器）直接处理，也可以在构建过程中服务器端编译。由于客户端处理可能会增加页面加载时间和CPU负担，生产环境中通常选择预先编译。
  3. 变量和Mixin（混入）:
    • 在Sass 中，变量以 $ 符号开始，Mixin 使用 @mixin 定义，提供了更强大的继承、占位符和模块化功能。
    • Less 也支持变量（以 @ 开头）和Mixin，但Sass在高级功能（如嵌套、继承、函数）方面通常被认为更强大和灵活。
  4. 循环和逻辑：
    • Sass 支持 for、each、while 等循环以及条件语句，使数据驱动的样式生成更加灵活。
    • Less 虽然可以通过递归来模拟循环，但它原生并不支持除数值递增外的循环结构，这在复杂逻辑处理上可能不如Sass方便。
  5. 扩展性和生态系统:
    • Sass 拥有悠久的历史和庞大的社区，提供了如Compass这样的强大框架，以及丰富的插件和库。
  6. 编译工具和集成:
    • 两者都有良好的集成工具和编译器，比如Grunt、Gulp、Webpack等前端构建工具都可以方便地集成Sass和Less的编译过程。

Sass和Less的选择往往取决于个人或团队的偏好、项目需求以及对特定特性的需求。Sass在功能和生态系统方面可能更成熟一些，提供了更多的功能和灵活性。而Less在学习曲线和即用性方面可能对新手更友好，且在一般情况下，Less足以满足我们的需求。