css预编语言

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

一、是什么

CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

二、预处理语言

CSS预处理器是一种工具，用于通过自己的脚本语言扩展默认普通CSS的基本功能。它可以帮助我们使用复杂的逻辑语法，比如变量、函数、混合、代码嵌套和继承等等，使普通的CSS更加强大。通过使用CSS预处理器，您可以无缝地自动化日常任务，构建可重用的代码段，避免代码重复和膨胀，并编写组织良好且易于阅读的嵌套代码块。

有哪些

Css预编译语言在前端里面有三大优秀的预编处理器，分别是：

sass
less
stylus

sass

2007 年诞生，最早也是最成熟的 Css预处理器，拥有 Ruby 社区的支持和 Compass 这一最强大的 Css框架，目前受 LESS 影响，已经进化到了全面兼容 Css 的 Scss

文件后缀名为.sass与scss，可以严格按照 sass 的缩进方式省去大括号和分号

less

2009年出现，受SASS的影响较大，但又使用 Css 的语法，让大部分开发者和设计师更容易上手，在 Ruby社区之外支持者远超过 SASS

其缺点是比起 SASS来，可编程功能不够，不过优点是简单和兼容 Css，反过来也影响了 SASS演变到了Scss 的时代

stylus

Stylus是一个Css的预处理框架，2010 年产生，来自 Node.js社区，主要用来给 Node 项目进行 Css 预处理支持

所以Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的Css。比较年轻，其本质上做的事情与SASS/LESS等类似

三、区别

虽然各种预处理器功能强大，但使用最多的，还是以下特性：

变量（variables）
作用域（scope）
代码混合（ mixins）
嵌套（nested rules）
代码模块化（Modules）

因此，下面就展开这些方面的区别

基本使用

less和scss

.box {
  display: block;
}

sass

.box
  display: block

stylus

.box
  display: block

嵌套

三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同

区别只是 Sass 和 Stylus 可以用没有大括号的方式书写

less

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

变量

变量无疑为 Css 增加了一种有效的复用方式，减少了原来在 Css 中无法避免的重复「硬编码」

less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开

@red: #c00;

strong {
  color: @red;
}

sass声明的变量跟less十分的相似，只是变量名前面使用@开头

$red: #c00;

strong {
  color: $red;
}

stylus声明的变量没有任何的限定，可以使用$开头，结尾的分号;可有可无，但变量与变量值之间需要使用=

在stylus中我们不建议使用@符号开头声明变量

red = #c00

strong
  color: red

用域

Css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js一样，它会先从局部作用域查找变量，依次向上级作用域查找

sass中不存在全局变量

$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
}

编译后

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色（无全局变量概念）*/
}

所以，在sass中最好不要定义相同的变量名

less与stylus的作用域跟javascript十分的相似，首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止

@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
}

编译后：

.scoped {
  color:white;/*白色（调用了局部变量）*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色（调用了全局变量）*/
}

四、代码模块化

模块化就是将Css代码分成一个个模块

scss、less、stylus三者的使用方法都如下所示

@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';