【前端知识之CSS】CSS预处理语言

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS预处理语言。

---

一、预处理语言是什么

1. CSS是一门标记性语言，对于初学者来说，很难写出组织良好且易于维护的CSS代码。
2. 预处理语言扩充了CSS语言，增加了诸如变量、混合、函数等功能，让CSS更容易维护、方便。预处理是CSS的超集，包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器编译生成对应的CSS文件。
3. 预编译语言主要包含：sass、less和stylus。

二、预处理语言介绍

1. sass文件后缀名为.sass与.scss，可以严格按照sass的缩进方式省去大括号和分号。受Less的影响，已经进化到全面兼容CSS的Scss。
2. less有点是简单和兼容Css。
3. stylus是一种新型语言，主要用来给Node项目进行Css预处理支持。

三、区别

1. 基本使用

less和scss

.box {
   
  display: block;
}

sass

.box
  display: block

stylus

.box
  display: block

---

2. 嵌套：引用父级选择器的标记&，区别就是Sass和Stylus可以没有大括号

.a {
   
  &.b {
   
    color: red;
  }
}

---

3. 变量

less

@red: #c00;

strong {
   
  color: @red;
}

sass

$red: #c00;

strong {
   
  color: $red;
}