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

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

什么是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: 24px
h1
  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
}

1、混入可以传递参数

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

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预处理器的作用域使用。

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中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。

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;/*黑色（调用了全局变量）*/
}

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支持条件语句

拓展阅读

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
前端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入