Learning Path
浏览 Sass 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
16
Sass 教程 Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。 Sass 是一个 CSS 预处理器。 Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。 Sass 完全兼容所有版本的 CSS。 Sass 扩展了 CSS3，增加了规则..
Sass 颜色函数 Sass 函数 Sass 颜色函数可以分为三个部分：颜色设置、颜色获取以及颜色操作。 下表列出了 Sass 的颜色函数： Sass 颜色设置 函数 描述 & 实例 rgb(red, green, blue) 创建一个 Red-Green-Blue (RGB) 色。其中 R 是 'red' 表示红色，而 G 是 'g..
Sass @extend 与 继承 @extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。 如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。 以下 Sass 实例中，我们创建了一个基本的按钮样式 .button-basic，接着我们定义了两个按钮样式 .button-report 与 .button-submit，它们都继承了 .button-basic ，它们主要区别在于..
Sass 函数 Sass 定义了各种类型的函数，这些函数我们可以通过 CSS 语句直接调用。 序号 函数类别 1 Sass 字符串相关函数 2 Sass 数字相关函数 3 Sass 列表(List)相关函数 4 Sass 映射(Map)相关函数 5 Sass 选择器相关函..
Sass @import Sass 可以帮助我们减少 CSS 重复的代码，节省开发时间。 我们可以安装不同的属性来创建一些代码文件，如：变量定义的文件、颜色相关的文件、字体相关的文件等。 Sass 导入文件 类似 CSS，Sass 支持 @import 指令。 @import 指令可以让我们导入其他文件等内容。 CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含..
Sass 安装 本章节我们主要介绍 Sass 的安装与使用。 NPM 安装 我们可以使用 npm（NPM 使用介绍）来安装 Sass。 npm install -g sass 注：国内 npm 建议使用淘宝镜像来安装，参考：NPM 国内慢的问题解决 Windows 上安装 我们可以使用 Windows 的包管理器 Chocolatey 来安装： choco install sass Mac OS X (Homebrew)安装..
Sass Introspection 函数 Sass 函数 Sass Introspection 函数比较少用于构建样式表，一般用于代码的调试上。 下表列出了 Sass 的 Introspection 函数： 函数 描述 & 实例 call(function, arguments...) 函数的动态调用，即调用函数 function 参数为 arguments，并返..
Sass 列表(List)函数 Sass 函数 Sass 列表(List)函数用于处理列表，可以访问列表中的值，向列表添加元素，合并列表等。 Sass 列表是不可变的，因此在处理列表时，返回的是一个新的列表，而不是在原有的列表上进行修改。 列表的起始索引值为 1，记住不是 0。 下表列出了 Sass 的列表函数： 函数 描述 & 实例 append(list, value,..
Sass Map(映射)函数 Sass 函数 Sass Map(映射)对象是以一对或多对的 key/value 来表示。 Sass Map 是不可变的，因此在处理 Map 对象时，返回的是一个新的 Map 对象，而不是在原有的 Map 对象上进行修改。 下表列出了 Sass 的 Map 函数： 函数 描述 & 实例 map-get(map, key) 返回 M..
Sass @mixin 与 @include @mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。 @include 指令可以将混入（mixin）引入到文档中。 定义一个混入 混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ... } 以下实例创建一个名为 'important-text..
Sass 嵌套规则与属性 Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。 如下我们嵌套一个导航栏的样式： Sass 代码： [mycode4 type='sass'] nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { ..
Sass 数字函数 Sass 函数 Sass 数字函数用于处理一些数值。 下表列出了 Sass 的数字函数： 函数 描述 & 实例 abs(number) 返回一个数值的绝对值。 实例:abs(15)结果: 15abs(-15)结果: 15 ceil(number) 向上取整 实例:ceil(15.20)结果: 16 ..
Sass 选择器函数 Sass 函数 Sass 选择器函数用于查看与处理选择器。 下表列出了 Sass 的 选择器函数： 函数 描述 & 实例 is-superselector(super, sub) 比较两个选择器匹配的范围，即判断 super 选择器是否包含了 sub 选择器所匹配的范围，是的话返回 true，否则返回 false。 实例:is..
Sass String(字符串) 函数 Sass 函数 Sass String(字符串) 函数用于处理字符串并获取相关信息。 Sass 字符串的起始索引值从 1 开始，记住不是 0。 下表列出了 Sass 的字符串函数： 函数 描述 & 实例 quote(string) 给字符串添加引号。 实例:quote(runoob)结果: 'runoob&#..
Sass 变量 变量用于存储一些信息，它可以重复使用。 Sass 变量可以存储以下信息： 字符串 数字 颜色值 布尔值 列表 null 值 Sass 变量使用 $ 符号： $variablename: value; 以下实例设置了四个变量：myFont, myColor, myFontSize, 和 myWidth。 变量声明后我们就可以在代码中使用它： Sass 代码： [mycode4 ty..