返回 导航

HTML5 / CSS3

hangge.com

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 难以维护。
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 通过 $ 符号去声明一个变量。
$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,操作符

所有数据类型均支持相等运算 == !=,此外,每种数据类型也有其各自支持的运算方式:
  • 数字运算SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。
  • 颜色值运算:颜色值的运算是分段计算进行的,也就是分别计算红色,绿色,以及蓝色的值。
  • 字符串运算+ 可用于连接字符串。
  • 布尔运算SassScript 支持布尔型的 andor 以及 not 运算。
  • 函数SassScript 定义了多种函数,有些甚至可以通过普通的 CSS 语句调用。
(1)下面样例我们对宽度进行简单的计算:
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 规则中引用父级选择器:
  • 无论 CSS 规则嵌套的深度怎样,关键字"&"都会使用父级选择器级联替换全部其出现的位置。
  • "&"必须出现在复合选择器开头的位置,后面再连接自定义的后缀。
(1)下面是一个父选择器的使用样例:
#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-familyfont-sizefont-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)

回到顶部