Sass入门篇

1、Sass简介

1.1、什么是CSS预处理器?

定义:

CSS预处理器定义了一种新的语言,其基本思想是用一种专门的编程语言,为CSS增加一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

通俗的讲,CSS预处理器是一种专门的编程语言,进行Web页面样式设计,然后再编译成常规的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,例如你可以在CSS中使用变量简单的逻辑程序函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护等诸多好处。

其它CSS预处理器语言:

CSS预处理器技术已经非常成熟,而且也涌现出很多种不同的CSS预处理器,如下:

  • Sass(SCSS)
  • Less
  • Stylus
  • Turbine
  • Switch CSS
  • CSS Cacheer
  • DT CSS

到目前为止,在众多优秀的CSS预处理器中,就属 Sass 、Less、Stylus最优秀。

1.2、什么是Sass?

定义:

Sass 是一门高于CSS的元语言,它能够清晰的、结构化的描述文件样式,有着比普通的CSS更强大的功能。Sass能够提供更简洁的、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

Sass 前世今生:

Sass 是最早的CSS预处理器语言,有比Less更为强大的功能,不过其一开始的缩进式语法(Sass 老版本语法)并不能被大众所接受,不过由于 其强大的功能和 Ruby on Rails 的大力推动,还是有很多开发者选择了Sass

Sass 是采用Ruby 语言编写的一款CSS预处理器语言,它诞生于2007年,是最大、最成熟的CSS预处理器语言,最初是配合HAML(一种缩进式HTML预处理器)而设计的,因此有着和HTML一样的缩进式风格。

为什么早期不如Less普及?

虽然缩进式风格可以有效的减少代码量,强制规范编程风格,但它一方面并不为大多数程序接受,另一方面无法兼容已有的CSS代码。这也是Sass虽然出现的最早,但是远不如Less的原因。

1.3、Sass和SCSS有什么区别?

Sass和SCSS其实是同一种东西,我们平时都称之为Sass,两者之间的不同之处有以下两点:

1、文件扩展名不同,Sass是以 .sass 后缀为扩展名,而 SCSS 是以 .scss 后缀为扩展名。

2、语法书写方式不同,Sass是以严格的缩进式语法规则来书写,不带大括号 { } 和分号 ; ,而SCSS的语法书写和我们的CSS语法书写方式非常类似。

Sass语法:

/* 定义变量 */
$fontSize:30px;
.box 
  /* 使用变量 */
  font-size: $fontSize;

SCSS语法:

/* 定义变量 */
$fontSize:30px;
.box {
  /* 使用变量 */
  font-size: $fontSize;
}

两者最终编译出来的CSS如下:

1.4、Sass/SCSS 和纯CSS的写法有什么区别?

Sass和纯CSS的区别:

由于Sass是采用的Ruby语言写出来的,所以其延续了Ruby的书写规范。在书写Sass是不带有大括号和分号,其主要是依靠严格的缩进方式来控制的,如下:

Sass写法:

.box 
  font-size: 20px;

而在CSS中,写法如下:

.box {
  font-size: 20px;
}

SCSS和传CSS的区别:

SCSS写法:

.box {
font-size: 20px;
}

而在CSS中,写法如下:

.box {
font-size: 20px;
}

SCSS和CSS写法无差别,这也是Sass后来越来越受欢迎的原因之一。简单的说,把你现有的 .css文件直接修改为 .scss 既可使用

2、Sass安装环境

[$]

2.1、在Vue中安装Sass

2.1.1、首先通过 npm 安装 Sass相关依赖

 
npm install node-sass style-loader --save-dev

2.1.2、安装完成以后,可以在 .vue 文件中局部使用,也可以创建一个 .scss文件作为全局样式引入

局部使用

首先,需要在 .vue文件中的 style标签中将当前 vue 的样式语法设置为 scss,然后就可以在style标签中编写scss样式了,如下代码:

<template>
  <div>
    ============================41、Sass 学习 ============================
    <div>
      <div class="box" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sass41'
};
</script>

<!--
注意:需要设置scoped属性,表示该样式只能在当前 vue文件中使用
-->
<style lang="scss" scoped>


  /* 声明一个全局变量 */
  $fontSize:30px;
  .box {
    height: 100px;
    background-color: red;
    /* 使用这个全局变量 */
    font-size: $fontSize;
  }

</style>

全局使用

首先,需要创建一个 .scss 文件,然后在该scss文件中编写样式,如下图:

然后在 main.js文件中引入该全局样式文件,如下图:

import './style/index.scss';

3、Sass的语法格式及编译调试

3.1、Sass语法格式

Sass语法格式:

这里说的Sass语法是Sass的最初语法格式,它是通过tab键控制缩进的一种语法规则,而且这种缩进要求非常严格。另外其不带任何的分号和大括号。常常把这种格式称之为Sass老版本,其文件名以 “.sass”为扩展名。

常规CSS语法如下:

.page-container {
  width: 100%;
  height: 500px;
}

.page-container .title {
  font-size: 50px;
  font-weight: bold;
  color: black;
}

Sass语法如下:

.page-container 
width: 100%;
height: 500px;
.title {
font-size: 50px;
font-weight: bold;
color: black;

在整个Sass代码中,我们没看到类似CSS中的大括号和分号。

SCSS语法格式:

SCSS是Sass的新语法格式,它的语法类似于CSS,都有大括号和分号。但其文件名是以 “.scss”为扩展名,而且SCSS增加了许多特有的编写方式。

常规的CSS语法如下:

.page-container {
  width: 100%;
  height: 500px;
}

.page-container .title {
  font-size: 50px;
  font-weight: bold;
  color: black;
}

SCSS的语法格式如下:

.page-container {
  width: 100%;
  height: 500px;
  .title {
    font-size: 50px;
    font-weight: bold;
    color: black;
  }
}

这样的语法格式对于从事前端工作的同学来说更易于接受,这也是SCSS为什么更被前端人员青睐的原因。

3.2、Sass编译

常常有人会问,使用Sass进行开发,那么是不是直接通过 <link> 标签引用 “.scss” 或 “.sass”文件呢?

那么这里告诉大家,在项目中还是引用 “.css” 文件,Sass只不过是作为一个预处理器工具,提前帮你做事情,只是你需要的时候,他才有功效。

通过Sass开发之后,要让Web页面调用Sass写好的东西,就得有这么一个过程,这个过程就称之为Sass编译过程,Sass的编译有以下方法:

  • 命令编译
  • GUI工具编译
  • 自动化编译

3.3、Sass 命令编译

3.4、GUI界面工具编译

3.5、自动化编译

3.6、常见的编译错误

3.7、不同的样式风格的输出方法

3.8、嵌套输入方法 nested

3.9、展开输出方法 expanded

3.10、紧凑输出方法 compact

3.11、压缩输出方法 compressed

3.12、Sass的调试

4、Sass的基本特性-基础

4.1、变量

定义变量的语法:

在有些编程语言中(如:Javascript)声明变量都是使用关键字 “var”开头,但是在Sass中不使用这个关键字,而是使用大家都喜欢的美元符号 $ 开头,如下所示:

$width:300px

上图中,Sass的变量包括以下三个部分:

  • 声明变量的符号”$”
  • 变量名称
  • 赋予变量的值

另外,如果想给一个变量设置一个默认值时,可以在值的后面添加 !default 关键字,如果这个变量已经赋值了,那么就不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值,如下代码:

$width:300px !default;

变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不再嵌套规则内定义的变量则可在任务地方使用(全局变量),将局部变量转换为全局变量可以通过添加 !global 声明,如下代码:

.page-container {
  /* 通过 !global 将 $fontSize 变量设置为全局变量 */
  $fontSize:50px !global;
  width: 100%;
  height: 500px;
  .title {
    font-size: 50px;
    font-weight: bold;
    color: black;
  }
}

.more {
  /* 使用全局变量$fontSize */
  font-size: $fontSize;
}

4.4、局部变量和全局变量

4.5、嵌套-选择器嵌套

4.6、嵌套-属性嵌套

4.7、嵌套-伪类嵌套

4.8、混合宏-声明混合宏

4.9、混合宏-调用混合宏

4.10、混合宏的参数–传一个不带值的参数

4.11、混合宏的参数–传一个带值的参数

4.12、混合宏的参数 — 传多个参数

4.13、混合宏的参数 — 混合宏的不足

4.14、扩展/继承

4.15、占位符(%)

4.16、混合宏 VS 继承 VS 占位符

4.17、插值(#{ })

4.18、注释

4.19、数据类型

4.20、字符串

4.21、值列表

5、Sass的基本特征-运算

5.1、加法运算

程序中的运算是最常见的一件事情,但在CSS中能做运算的,到目前为止仅有 calc() 函数可行。但在Sass中,运算只是基本的特性之一。

加法运算是Sass中运算的一种,在变量属性中都可以做加法运算,如下示例代码:

.box {
  height: 10px + 40px;
  background: red;
}

最终编译出来的CSS如下:

注意:对于携带不同类型的单位时,在Sass中计算会报错,如下示例:

.box {
  height: 10px + 40rem;
  background: red;
}

报错信息如下:

5.2、减法运算

Sass中的减法运算与加法运算类似,如下代码:

.box {
  height: 80px - 20px;
  background: red;
}

编译出来的CSS如下:

同样的,运算时碰到不同类型的单位时,编译是也会报错,如下代码:

.box {
  height: 80px - 20rem;
  background: red;
}

5.3、乘法运算

Sass中的乘法运算和前面介绍的加法与减法运算还略有不同,虽然他也能够支持多种单位(比如:em、px、%),但当一个单位同时声明两个值时会有不同,如下示例:

.box {
  height: 80px * 20px;
  background: red;
}

如果进行乘法运算时,两个值单位相同,那么只需给一个数值提供单位即可,如下代码:

.box {
  height: 80px * 20;
  background: red;
}

效果图:

Sass中的乘法运算和加法、减法运算一样,在运算中有不同类型的单位时,也会报错,如下示例:

.box {
  height: 80px * 20rem;
  background: red;
}

效果图:

5.4、除法运算

Sass的乘法运算规则也适用于除法运算,不过除法运算都有一个特殊之处,众所周知,”/”符号在CSS中已做为一种符号使用,因此,在Sass中做除法运算时,直接使用”/”符号作为除号时,将不会生效,编译时既得不到我们需要的结果,也不会报错,如下示例:

.box {
  height: 80px / 20;
  background: red;
}

编译出来的CSS如下:

这样的结果对于大家来说没有任何意义,要解决这个问题,那么只需要给运算的外面添加一个小括号 () 即可,如下代码:

.box {
height: (80px / 20);
background: red;
}

效果图:

也就是上面的情况需要带小括号。如果”/”符号参与其它运算时,那么也会被当做除法符号,此时无需小括号,如下示例:

.box {
  height: 80px / 20 + 10;
  background: red;
}

效果图:

另外,在Sass除法运算中,当用变量进行除法运算时,”/”符号也会自动识别成除法,如下示例:

$number:10;
.box {
  height: 80px / $number;
  background: red;
}

效果图:

综上所述,”/”符号被当作除法运算时的几种情况如下:

  • 当数值被小括号包裹时
  • 当数值是另一个表达式的一部分时
  • 当数值或者任意部分是一个变量或函数时

5.5、变量计算

在Sass中除了可以使用数值进行运算之外,还可以使用变量来进行计算,如下示例:

$number:100px;
$base:0.2;
.box {
  height: $number * $base;
  background: red;
}

最终编译出来的CSS如下:

5.6、数字运算

在Sass运算中,数字运算是较为常见的,数字运算包括前面介绍的:加法、减法、乘法和除法等运算,还可以通过括号来修改他们的运算先后顺序,如下示例:

.box {
  height: ((100px+200px) - 10 * 20) / 12;
  background: red;
}

最终编译出来的CSS如下:

5.7、颜色运算

所有算数运算都支持颜色值,并且是分段运算的。也即是说,红、绿、蓝各颜色分段单独进行运算,如下:

.box {
  height: 100px;
  background-color: #010203 + #040506;
}

计算公式为:

01 + 04 = 05

02 + 05 = 07

03 + 06 = 09

最终的结果为:

5.8、字符运算

在 Sass 中可以通过加法符号 “+” 来对字符串进行连接,如下代码:

$content:'Hello'+'Word';
.box {
  height: 100px;
  background-color: red;
  content: $content;
}

效果图:

[/$]

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注