Vue 进阶（幺柒陆）：CSS 预编译语言 Sass、Scss、Less 和 Stylus

关注

发布于: 3 小时前

Vue进阶（幺柒陆）：CSS 预编译语言 Sass、Scss、Less 和 Stylus

一、什么是 CSS 预处理器

CSS预处理器定义了一种新的语言，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。

CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。

二、CSS 预处理器种类

目前最主流的三个预处理器分别为：Sass 、 Less和 Stylus。

SASS:2007 年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架。Sass默认使用 .sass扩展名。

现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则(受LESS影响)和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS（SCSS默认使用 .scss扩展名），在Sass3之后的版本都支持这种语法规则。

LESS：2009 年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的，Less默认使用.Less扩展名。

根据维基百科上的介绍，其实LESS是 Alexis Sellier 受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更加方便，Alexis 开发了LESS并提供了类似CSS的书写功能。

Stylus：2010 年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS，Stylus默认使用.styl扩展名。

Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

预处理器语法一般包括：

变量
嵌套
混合 Mixins
运算
导入 (Import)
函数

三、语法

CSS预编译语言的语法都非常简单，如果你的编辑器给力的话，file watching会自动找出语法错误。

语法上Sass3、Scss和Less非常相似，旧版Sass和Stylus特殊一些，旧版Sass我们就了解一下，Stylus的语法更加灵活一些,功能也更强大一些。

例如 1、Sass

/*旧版sass语法*/h1  color: #000  font-size: 24px

复制代码

2、SCSS

/*scss语法*/h1{  color: #000;  font-size: 24px;}

复制代码

3、LESS

/*less语法*/h1{  color: #000;  font-size: 24px;}

复制代码

4、Stylus

/*Stylus语法的多样式*/h1{  color: #000;  font-size: 24px;}h1  color: #000  font-size: 24pxh1  color #fff  font-size 24px

复制代码

四、变量

/*  1、Scss的变量必须是$开始*/$mainColor: #000;h1{  color: $mainColor;}
/* 2、Less 的变量名使用 @ 符号开始*/@mainColor: #000;h1{  color: @mainColor;}
/* 4、Stylus 的变量名不要用 @ 开头， =赋值 */mainColor = #000;h1{  color: mainColor;}

复制代码

五、嵌套

如果你需要在CSS中相同的parent引用多个元素，你需要一遍一遍的去写parent。用CSS预处理器，就可以少些很多单词，而且父节点关系一目了然。

下面将不再介绍老版 sass 的写法，直接介绍 scss 写法。

同样生成

nav{  color: #000;  font-size: 16px;}nav a{  color: #0000cc;  font-size: 18px; }nav a.first{ color:red}

复制代码

/*Scss、less、Stylus的嵌套,伪类嵌套都是使用&*/nav {  color: #000;  font-size: 16px;  a {    color: #0000cc;    font-size: 18px;    &.first {      color: red;    }  }}
/*Stylus的嵌套还可以这样写*/nav   color #000  font-size 16px  a     color #0000cc    font-size 18px    &.first       color red

复制代码

六、Mixin 混合

Mixins是CSS预处理器中语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。

平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处理器语言中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

CSS预编译工具允许我们将已有的 class 和 id 的样式应用到另一个不同的选择器上。如：

/*Scss、less混合语法*/.circle{  border-radius: 100%;  background: #ccc;}.small-circle{  width: 50px;  height: 50px;  .circle}.big-circle{  width: 100px;  height: 100px;  .circle}/*Stylus Mixin混合语法*/circle{  border-radius: 100%;  background: #ccc;}.small-circle{  width: 50px;  height: 50px;  circle}.big-circle{  width: 100px;  height: 100px;  circle}

复制代码

6.1 混入可以传递参数

/* 这是scss样例1. 改成less,只需要变$为@2. 改成Stylus,只需要.circle变为circle */.circle($radius){  border-radius: $radius;  background: #ccc;}.small-circle{  width: 50px;  height: 50px;  .circle(5px)}

复制代码

6.2 混入可带默认值

/* 这是scss样例1. 改成less,只需要变$为@2. 改成Stylus,只需要.circle变为circle，：改为= */.circle($radius:5px){  border-radius: $radius;  background: #ccc;}.small-circle{  width: 50px;  height: 50px;  .circle}/* 这是Stylus样例 */circle($radius=5px){  border-radius: $radius;  background: #ccc;}.small-circle{  width: 50px;  height: 50px;  circle}

复制代码

七、运算

/* 这是Scss样例 */$test:300px;.test_01{  width: $test  +  20px;//  height: $test*2 ;  color: #ccc - 10;}
/* 这是Less样例 */@test:300px;.test_01{  width: @test  +  20px;//  height: @test*2 ;  color: #ccc - 10;}
/* 这是Stylus样例 */test=300px.test_01{  width: test  +  20px;//  height: test*2 ;  color: #ccc - 10;}

复制代码

八、作用域（Scope）

CSS预处理器语言中的变量和其他程序语言一样，可以实现值的复用，同样它也存在生命周期，也就是Scope（变量范围，开发人员习惯称之为作用域），简单点讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释这三款 CSS 预处理器的作用域使用。

8.1 Sass 作用域

Sass中作用域在这三款预处理器是最差的，可以说在Sass中是不存在什么全局变量。具体来看下面的代码：

/*Sass样式*/$color: black;.scoped {  $bg: blue;  $color: white;  color: $color;  background-color:$bg;}.unscoped {  color:$color;}

复制代码

先看转译出来的 CSS 样式：

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

复制代码

示例明显的告诉我们，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。

8.2 LESS 作用域

LESS中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在LESS下所起的变化。

/*LESS样式*/@color: black;.scoped {  @bg: blue;  @color: white;  color: @color;  background-color:@bg;}.unscoped {  color:@color;}

复制代码

转译出来的 CSS 样式：

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

复制代码

8.3 Stylus 作用域

Stylus虽然起步比较晚，但其作用域的特性和LESS一样，可以支持全局变量和局变量。会向上冒泡查找，直到根为止。

九、函数

Sass、Less和Stylus都提供了丰富的内置函数，Stylus更允许自定义函数，使用的时候自行查询吧。

十、导入

几种CSS预编译语言的导入语法是相同的。与css3的@import看起来写法也相同，但css3的@import会引起异步加载。并不是我们期望的。

CSS预编译器 @import解决了这个问题，它能将多个样式文件合并为一个，本质上是方便前端管理代码，并不会异步加载。

@import 'reset.scss'  //scss中导入样式@import "reset";      // less导入默认导入为less文件@import "reset.css"  // Stylus导入默认导入为css文件

复制代码

十一、循环语句

Sass（Scss），Stylus支持循环语句

十二、分支语句

Sass（Scss），Stylus支持条件语句

十三、拓展阅读

发布于: 3 小时前阅读数: 4

原文链接:【http://xie.infoq.cn/article/073236655660dd999c91f8f67】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

Vue 进阶（幺柒陆）：CSS 预编译语言 Sass、Scss、Less 和 Stylus

一、什么是 CSS 预处理器

二、CSS 预处理器种类

三、语法

四、变量

五、嵌套

六、Mixin 混合

6.1 混入可以传递参数

6.2 混入可带默认值

七、运算

八、作用域（Scope）

8.1 Sass 作用域

8.2 LESS 作用域

8.3 Stylus 作用域

九、函数

十、导入

十一、循环语句

十二、分支语句

十三、拓展阅读

No Silver Bullet

评论