ivenqin的博客

本节我们来看一下 Sass 中的颜色函数，颜色函数可以分为三部分，分别是颜色设置、颜色获取以及颜色操作。Sass 中的颜色函数有很多，下面我们来看一些 Sass 中常用的颜色函数：函数描述rgb()创建一个 Red-Green-Blue（RGB） 色rgba()创建一个带有透明度值的颜色hsl()通过色相、饱和度和亮度的值创建一个颜色hsla()通过色相、饱和度、亮度和透明的值创建一个颜色red()从一个颜色中获取其中红色值lightness获

本节我们来看一下 Sass 中的 Introspection 函数，Introspection 函数一般用于代码的调试。常用的 Introspection 函数：函数描述call()动态的调用一个type-of()返回一个值的类型function-exists()检测指定的函数是否存在global-variable-exists()检测某个全局变量是否定义inspect()返回一个字符串的表示形式，参数为一个 sass 表达式。mixin-ex

本节我们来看一下 Sass 中的选择器函数，选择器函数用于查看与处理选择器。Sass 中常用的选择器函数：函数描述is-superselector()比较两个选择器匹配的范围，匹配则返回 true，否则返回 falseselector-append()将一个（或多个）选择器添加到第一个选择器的后面selector-nest()返回一个新的选择器，该选择器通过提供的列表选择器生成一个嵌套的列表selector-parse()将字符串的选择符 selector

本节我们来看一下 Sass 中的映射函数，Sass 中的映射是由键值对（key/value）组成。映射是不可变的，所以我们在对映射进行操作时，不会在原有映射中进行修改，而是返回一个新的映射对象。函数描述map-get()返回映射中指定键所对应的值map-has-key()判断映射是否有对应的键值，有则返回true，没有返回falsemap-keys()返回映射中所有键map-values()返回映射中所有的值map-merge()合并两个映射ma

本节我们来看一下 Sass 中的列表函数，列表函数可以用于处理列表，例如访问列表中的值，返回列表的长度，向列表添加元素，合并列表中的值等。常用的列表函数如下所示：函数描述append()将单个值添加到列表尾部index()返回元素在列表中的索引length()返回列表的长度is-bracketed()判断列表中是否有中括号join()合并两列表，list-separator()返回一列表的分隔符类型，可以是空格nth()获取第 n 项

本节我们来看一下 Sass 中的数字函数，就像字符串函数主要用于字符串，Sass 中的数字函数主要用于处理数值。常用的数字函数：函数描述abs()返回一个数值的绝对值ceil()向上取整floor()向下取整comparable()返回一个布尔值，判断两个参数是否可以比较max()返回最大值min()返回最小值percentage()将数字转化为百分比的表达形式random()返回 0-1 区间内的小数round()返

Sass 中定义了各种类型的函数，其中大部分函数我们可以通过 CSS 语句直接调用。下面是 Sass 中的函数分类：字符串函数数字函数列表函数映射函数选择器函数Introspection函数颜色值函数本节我们先来学习字符串相关函数。字符串函数有哪些Sass 中的字符串函数用于处理字符串并获取相关信息。有一点需要注意，一般编程语言中字符串的索引都是从 0开始的，但是注意哟，Sass 中字符串的索引是从 1 开始的。Sass 字符串函数如下所示：函数描述quote

本节我们学习 Sass 中的循环语句，Sass 中的循环语句可以使用 @for 指令和 @while 指令来实现。@for指令@for 指令可以用于循环生成样式，@for 指令有两种类型，如下所示：// 第一种@for $i from <start> through <end> // 第二种@for $i from <start> to <end>其中 $i 表示变量，start 表示起始值，end 表示结束值。其实这两种方式的区别就在

本节我们来学习 Sass 中的条件语句，可以使用 @if 指令来判断条件表达式的值，然后控制输出。Sass 中的 @if、@else 等指令和 JS 中的 if/else 类似。@if 指令当 @if 指令后面的表达式返回值为 true 时，输出花括号中的代码，为 false 则不输出。示例：下面例子中，定义了一个变量 $num，使用 @if 指令来判断变量的值，当变量值为 1 时，输出字体颜色为 #ee78da，当变量值为 2 时，输出字体颜色为 #65e3e7：$num:1;h3{

本节我们学习 Sass 中的 @media 指令，@media 指令用于设置样式规则到不同的媒体类型，这和 CSS 的使用规则差不多，但是它还有一点不同，就是 @media 指令可以嵌套在 Sass 选择器中。有点类似于 JS 冒泡功能，它会冒泡到样式表的顶层。@media指令的使用示例：.xkd{ width: 300px; height: 100px; @media screen and (orientation: portrait) { width: 500p

本节我们学习 Sass 中的延伸，也可以理解为继承。在 Sass 中，我们可以通过 @extend 指令来实现将一个选择器中的样式继承到另一个选择器中。特别是当选择器中样式几乎差不多，只有一点区别的时候，使用 @extend 就很有用啦。延伸的使用下面我们来通过一个例子看一下延伸的具体使用。例如我们在网页中是不是经常会看到有不同颜色的按钮呀，这些按钮除了背景颜色不同，其他样式都几乎一样。这种情况下，我们肯定不会重复定义多个样式，而是单独定义一个公共样式，再分别定义不同颜色样式属性。示例例如我们通

本节我们来学习带参混合，Sass 中混合可以接受参数，我们可以通过使用 @include 调用混合时给混合传参，来定义混合生成的精确样式。给混合传参混合可以用 SassScript 值作为参数，给定的参数被包括在混合中并且作为为变量提供给混合，既然是作为变量，那么定义参数时，参数名前面需要加一个 $ 符号。当我们定义一个带参混合时，混合的参数被作为变量名，写到混合名后面的小括号中，如果带有多个参数则通过逗号将参数分隔。下面我们来看一下如何给一个混合传参。示例：例如在混合中定义两个参数 $num 和

本节我们学习 Sass 中的混合，Sass 中的混合是通过 @mixin 指令来定义的，混合允许我们定义可以在整个样式表中重复使用的样式，避免使用无语意的类。混合可以包含所有的 CSS 规则和任何其他在 Sass 文档中被允许使用的内容。定义混合Sass 中可以通过 @mixin 指令定义混合，@mixin 后面接混合的名称和可选的 arguments 参数，以及混合的内容块。示例：例如创建一个名为 my-text 的混合：@mixin my-text { font-size: 12px;

本节我们学习 Sass 中的运算，一般的编程语法中都支持使用运算，Sass 中同样可以做各种数学运算，包括最基本的加减乘除运算、变量运算、颜色运算、字符运算等。本节我们主要讲一下 Sass 中最基本的数学运算。加法运算加法运算 + 是 Sass 中基本运算之一，在变量或者属性中都可以做加法运算。示例：$num:14px;.xkd{ width:50px + 50px; font-size: $num + 4px;}编译成 CSS 代码：.xkd { width: 100

Sass 语言中支持的数据类型有下面几种：numbers：表示整数类型。strings：在单引号 '' 或双引号 "" 内定义的字符序列。booleans：布尔类型，有 true 和 false 两个值。colors：用于定义颜色值。nulls：指定空值，是未知数据。lists：值列表类型，表示由空格或逗号分隔的值。maps：从一个值映射到另一个值。numbers 类型数字在 CSS 中应用的很广泛，大多数都是结合单位一起使用的，但是在技术上依然算是数字。例如字体大小、长高、外边距内边

在 CSS 中我们可以通过 @import 指令将一个 css 文件导入到另一个 css 文件中。但是它有一个需要注意的地方，就是只有执行到 @import 指令时，浏览器才会去下载其他 css 文件，这导致页面加载起来特别慢，所以并不太常用。而 Sass 语言中同样支持 @import 指令的使用，并且与 CSS 中有一些区别，下面我们来看一下 Sass 中是如何使用 @import 指令导入文件的。Sass 导入文件Sass 中也有一个 @import 规则，但是与 CSS 有一些不同，CSS 中

本节我们学习 Sass 中的嵌套，嵌套大家应该不陌生，在 HTML 中就支持标签的嵌套。Sass 中允许一个 CSS 样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内。示例：例如下面这段 CSS 代码：.big { color: #ccc;}.big .small { font-size: 14px;}如果我们要使用 Sass 中的嵌套语法来写，如下所示：从上图我们可以看到，嵌套的语法其实很简单，相较于 CSS 语言中后代选择器的写法，嵌套规则看起来要直观很多。使

什么是变量呢？ Sass 中的变量可以用来存储一些信息，并且重复使用。变量可以存储的信息包括字符串、数字、布尔值、颜色值等等。声明变量Sass 中声明变量需要用到 $ 符号，格式为：$变量名: 变量值;示例：例如下面我们定义一个变量，并给这个变量赋了一个颜色值：$color:red;.xkd{ color: $color; a{ background-color: $color; }}执行编译命令，编译后的 CSS 代码如下所示：.xkd {

本节我们来学习 Sass 的语法，Sass 支持两种语法，分别为 SCSS （Sassy CSS）和缩进语法（Indented Sass）。缩进语法缩进语法是 Sass 的原始语法，文件的扩展名为 .sass，所以有时候简称为 ”Sass“。缩进语法支持与 SCSS 相同的所有特性，但是它使用缩进而不是花括号 {} 来表示选择器的嵌套，使用换行而不是分号来分隔属性。下面我们来看一下缩进的语法格式。示例：创建一个 style.sass 文件，内容如下所示.xkd font-size: 14

本节我们来学习 Sass 的编译，我们写好的 Sass 代码，浏览器是不能识别的，Sass 只不过是作为一个预处理工具，只有将 Sass 代码编译成 CSS 代码后，才能够使用。那么 Sass 要如何编译成 CSS 代码呢，这就是我们本节需要讲到的内容。Sass 的编译方法有很多，例如：命令行编译模式：比较简单，可以直接在终端中输入 Sass 指令来编译，本节我们主要讲命令行编译模式的使用。GUI工具编译：有的比较多的看一工具有 Koala、CodeKit、Scout、Compass.app 等，这

由于 Sass 是基于 Ruby 语言开发而成，因此安装 Sass 前需要安装 Ruby，Mac 下自带 Ruby，所以不需要安装。Ruby 是一种简单快捷的面向对象程序设计的脚本语言，它由日本的松本行弘创建于1993年。Ruby 的特性与 Smalltalk、Perl 和 Python 类似。安装Ruby首先我们需要在官网下载 Ruby ，官网地址：https://rubyinstaller.org/downloads/。然后根据下载建议，我们可以选择 Ruby + Devkit 2.6.6-1（x

Sass 是 Syntactically Awesome Stylesheets 的简写，是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。什么是SassSass 是一个将脚本解析成 CSS 的脚本语言（SassScript），也是一款 CSS 预处理器，它减少了 CSS 的重复，也因此节省了时间。Sass 是最早的 CSS 预处理语言，有比 Less 更强大的功能。Sass 扩展了 CSS3，增加了规则、变量、混入选择器、继承等特性。什