CSS 编写的痛点

CSS 作为一种样式语言,本身用来给HTML元素添加样式是没有问题的CSS 常见单位详解

但是目前前端项目已经越来越复杂,不再是简简单单的几行CSS就可以搞定的,我们需要几千行甚至上万行CSS来完成页面的美化工作

随着代码量的增加,必然会造成很多编写不便
- 比如大量重复的代码,虽然可以用类来勉强替代和抽取,但是使用起来依然不方便
- 比如无法定义变量(目前已支持),如果一个值被修改,那么需要修改大量的代码,可维护性差(比如主题颜色)
- 比如没有专门的作用域和嵌套,需要定义大量的 id/class 来保证选择器的准确性,避免样式混淆
- 等一系列问题

所以有一种对CSS称呼是:面向命名编程

社区为了解决CSS面临的大量问题,出现了一系列的CSS预处理器(CSS preprocessor)
- CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成 CSS 的程序
- 市面上有很多 CSS 预处理器可以选择,且绝大多数 CSS 预处理器会增加一些原生 CSS 不具备的特性
- 代码最终还是会转换成 CSS 来运行,因为浏览器只识别 CSS

常见的CSS预处理器

常见的预处理器有哪些,目前使用较多的是三种预处理器

Sass/Scss
- 2007 年诞生,最早也是最成熟的 CSS 预处理器,拥有 ruby 社区的支持,是属于 haml(一种模板系)的一部分
- 目前受 Less影响,已经进化到了全面兼容 CSS 的 SCSS

Less
- 2009 年出现,受 Sass 影响比较大,但是又使用 CSS 的语法,让大部分开发者更容易上手
- 比起 Sass 来,可能编程能力不够,不过优点是使用方式简单、便携、兼容 CSS,并且已经足够使用
- 另外反过来也影响到了 Sass 演变成 Scss 的时代
- 著名的 Twitter Bootstrap 就是采用 less 做底层语言的,也包括 React 的框架 AntDesign

Stylus
- 2010 年产生,来自 NodeJS 社区,主要用来给 Node 项目进行 CSS 预处理支持
- 语法偏向于 Python,使用率比 Sass/Less 少很多

认识 Less

什么是 Less
- It’s CSS,with just a little more.

Less (Leaner Style Sheets 的缩写) 是一门 CSS 扩展语言,并且兼容CSS
- Less 增加了很多相比 CSS 更好用的特性
- 比如定义变量、混入、嵌套、计算等等
- Less 最终需要被编译成 CSS 运行于浏览器中(包括部署到服务器)

编写 Less 代码

我们可以编写类似如下的 Less 代码

less代码的编译

这段代码如何被编译成 CSS 代码运行

方式一:下载 Node 环境,通过 npm 包管理下载 less 工具,使用 less 工具对代码进行编译

方式二:通过VSCode插件 Easy Less 来编译
- 该插件会在 less 文件保存后自动生成 css 文件

方式三:引入 CDN 的 less 编译代码,对 less 进行实时的处理

 <link rel="stylesheet/less" href="./less的基本使用.less">
 <script src="https://cdn.jsdelivr.net/npm/less@4"></script>

方式四:将 less 编译的 js 代码下载到本地,引入本地 js 代码对 less 进行编译

<link rel="stylesheet/less" href="./less的基本使用.less">
<script src="./js/lessc.js"></script>

Less语法一:Less兼容CSS

Less 语法是兼容CSS
- 所以我们可以直接在 less 文件中编写所有的 css 代码
- 只是将 css 的扩展名改成了 .less 而已

Less语法二-变量(Variables)

在Less中使用如下格式定义变量
- @变量名: 变量值;

Less语法三-嵌套(Nesting)

在之前的使用中,当我们需要找到一个内层的元素时,往往需要嵌套很多层的选择器

现在 Less 提供了选择器的嵌套

特殊符号:& 表示当前选择器的父级

Less 语法四-运算(Operations)

less 中,算术预算符+、-、*、/ 可以对任何数字,颜色变量进行运算*
- 算术运算符在加、减或比较之前会进行单位换算。计算的的结果以最左侧操作数的单位类型为准
- 如果单位换算无效或者失去意义,则忽略单位

Less 语法五-运算(Mixins)

在原来的CSS编写中,多个选择器中可能会有大量相同的代码
- 我们习惯可以将这些代码进行抽取到一个独立的地方,任何选择器都都可以进行复用
- 在 less 中提供了混入(mixins)来帮助我们完成这样的操作

混入:是一种将一组属性从一个规则集(混入)到另一个规则集中的方法

注意:混入在没有参数的情况下,小括号可以省略,但是不建议这样使用

混入也可以传入参数

混入和映射(Map)结合

Less语法六:extend继承

  • mixins 作用类似,用于复用代码
  • mixins 相比。继承代码最终会转化为并集选择器

Less 语法七:Less 内置函数

Less 语法九:作用域(Scope)

  • 在查找一个变量时,首先在本地查找变量和混入(mixins)
  • 如果找不到,则从 级作用域继承

Less 语法十:注释

  • 在 Less 中,块注释和行注释都可以使用

Less 语法十一:导入

  • 导入的方式和css的用法是一样的
  • 导入一个 .less 文件,此文件中的所有变量就全部可以使用了
  • 如果导入的文件是 .less 扩展名,则可以将扩展名省略

认识 Sass 和 Scss

事实上,最初 Sass 是 Haml 的一部分,Haml 是一种模板系统,由 Ruby 开发者设计和开发

所以,Sass 的语法使用的是类似于 Ruby 的语法,没有花括号,没有分号,具有严格的缩进

我们会发现它的语法和CSS区别很大,后来官方推出了全新的语法SCSS,意思是 Sassy CSS,完全兼容CSS

目前学习直接学习SCSS即可
- SCSS 语法也包括变量、嵌套、混入、函数、操作符、作用域等
- 通常也包括更为强大的控制语句、更灵活的函数、插值语法
- https://sass-lang.com/guide

Q.E.D.