Sass - Sass的基本用法和样例演示(附:CSS、Sass、SCSS之间的关系)
作者:hangge | 2019-08-23 08:10
一、基本介绍
1,什么是 Sass?
- Sass 是 Syntactically Awesome StyleSheets 的缩写。
- Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。
- 使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
2,Sass 的功能特色
- 完全兼容 CSS3
- 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
- 通过函数进行颜色值与属性值的运算
- 提供控制指令 (control directives)等高级功能
- 自定义输出格式
3,Sass 与 SCSS 的关系
(1)Sass 有两种语法格式。一种是最早的 Sass 语法格式,被称为缩进格式 (Indented Sass) 通常简称 "Sass":
- 这是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性。
- 这种格式以 .sass 作为拓展名。
(2)另一种是后来官方在 2010 年推出了一个全新的语法格式,叫做 SCSS (Sassy CSS) :
- 这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。
- 此外,SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax),以及早期的 IE 滤镜写法。
- 这种格式以 .scss 作为拓展名。
二、基本用法
1,嵌套
(1)Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器。
嵌套功能避免了重复输入父选择器,而且令复杂的 CSS 结构更易于管理。
但要注意避免过度的嵌套,过度的使用嵌套会让产生的 CSS 难以维护。
但要注意避免过度的嵌套,过度的使用嵌套会让产生的 CSS 难以维护。
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
(2)上面样式编译后产生的 CSS 代码如下:
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
2,变量 $
(1)变量用来存储需要在 CSS 中复用的信息,例如颜色和字体。SASS 通过 $ 符号去声明一个变量。
(2)编译后上面例子中变量 $font-stack 和 $primary-color 的值将会替换所有引用他们的位置。
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
(2)编译后上面例子中变量 $font-stack 和 $primary-color 的值将会替换所有引用他们的位置。
body { font: 100% Helvetica, sans-serif; color: #333; }
3,引入 @import
Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
(1)比如我们创建一个 foo.scss,里面定义了两个变量:
$font-stack: Helvetica, sans-serif; $primary-color: #333;
(2)在另一个 SASS 中可以使用 @import 引入这个 scss 片断:
@import 'foo.scss'; body { font: 100% $font-stack; color: $primary-color; }
(3)编译后的最终 CSS 如下:
body { font: 100% Helvetica, sans-serif; color: #333; }
4,混合 Mixin
混合(Mixin)用来分组那些需要在页面中复用的 CSS 声明,开发人员可以通过向 Mixin 传递变量参数来让代码更加灵活,该特性在添加浏览器兼容性前缀的时候非常有用。
(1)SASS 目前使用 @mixin name 指令来定义混合,然后使用 @include name 指令引用混合样式。
@mixin border-radius($radius) { border-radius: $radius; -ms-border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; } .box { @include border-radius(10px); }
(2)最终编译的结果如下:
.box { border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
5,继承 @extend
继承是 SASS 中非常重要的一个特性,可以通过 @extend 指令在选择器之间复用 CSS 属性,并且不会产生冗余的代码。
(1)下面一个继承样例:
// 这段代码不会被输出到最终生成的CSS文件,因为它没有被任何代码所继承。 %other-styles { display: flex; flex-wrap: wrap; } // 下面代码会正常输出到生成的CSS文件,因为它被其接下来的代码所继承。 %message-common { border: 1px solid #ccc; padding: 10px; color: #333; } .message { @extend %message-common; } .success { @extend %message-common; border-color: green; } .error { @extend %message-common; border-color: red; } .warning { @extend %message-common; border-color: yellow; }
(2)最终生成的 CSS 样式如下,可以发现该方式能够避免在 HTML 元素上书写多个 class 选择器:
.message, .success, .error, .warning { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }
6,操作符
所有数据类型均支持相等运算 == 或 !=,此外,每种数据类型也有其各自支持的运算方式:
(1)下面样例我们对宽度进行简单的计算:
- 数字运算:SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。
- 颜色值运算:颜色值的运算是分段计算进行的,也就是分别计算红色,绿色,以及蓝色的值。
- 字符串运算:+ 可用于连接字符串。
- 布尔运算:SassScript 支持布尔型的 and、or 以及 not 运算。
- 函数:SassScript 定义了多种函数,有些甚至可以通过普通的 CSS 语句调用。
article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complementary"] { float: right; width: 300px / 960px * 100%; }
(2)最终生成的 CSS 样式如下所示,可以看到 SASS 提供的算术运算符让开发人员可以更容易的将像素值转换为百分比:
article[role="main"] { float: left; width: 62.5%; } aside[role="complementary"] { float: right; width: 31.25%; }
7,父选择器 &
Scss 使用"&"关键字在 CSS 规则中引用父级选择器:
(1)下面是一个父选择器的使用样例:
- 无论 CSS 规则嵌套的深度怎样,关键字"&"都会使用父级选择器级联替换全部其出现的位置。
- "&"必须出现在复合选择器开头的位置,后面再连接自定义的后缀。
#main { color: black; a { font-weight: bold; &:hover { color: red; } } }
(2)最终生成的 CSS 样式如下所示:
#main { color: black; } #main a { font-weight: bold; } #main a:hover { color: red; }
8,嵌套属性
CSS 许多属性都位于相同的命名空间(例如 font-family、font-size、font-weight 都位于 font 命名空间下),Scss 当中只需要编写命名空间一次,后续嵌套的子属性都将会位于该命名空间之下。
(1)下面是一个书写嵌套属性的样例:
.demo { // 命令空间后带有冒号: font: { family: fantasy; size: 30em; weight: bold; } }
(2)最终生成的 CSS 样式如下所示:
.demo { font-family: fantasy; font-size: 30em; font-weight: bold; }
8,注释 /* */ 与 //
Sass 除了支持标准的 CSS 多行注释 /* */,还提供了单行注释 //。前者会被完整输出到编译后的 CSS 文件中,而后者则不会。
(1)下面是一个同时使用多行、单行注释的样例:
/* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } // These comments are only one line long each. // They won't appear in the CSS output, // since they use the single-line comment syntax. a { color: green; }
(2)最终生成的 CSS 样式如下所示:
/* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } a { color: green; }
全部评论(0)