Sass - HelloWorld开发者社区

嵌套规则 (Nested Rules)

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译后
#main p {
  color: #00ff00;
  width: 97%; }

  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

父选择器 & (Referencing Parent Selectors: &)

使用&字符，编译后会与父选择器连接起来

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为:
#main {
  color: black; }

  #main-sidebar {
    border: 1px solid; }

属性嵌套 (Nested Properties)

.funky {

  font: {

    family: fantasy;

    size: 30em;

    weight: bold;

  }

}

编译为

.funky {

  font-family: fantasy;

  font-size: 30em;

  font-weight: bold; }

占位符选择器 %foo (Placeholder Selectors: %foo)

当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中，一种继承方式。

(占位符%)有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

占位符选择器需要通过延伸指令使用，用法与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。

.notice {
  @extend %extreme;
}

编译为
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

变量 $ (Variables: $)

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样。不在嵌套规则内定义的变量则可在任何地方使用（全局变量），将局部变量转换为全局变量可以添加 !global 声明

$width: 5em;

直接使用即调用变量：

#main {
  width: $width;
}

数据类型 (Data Types)

SassScript 支持 6 种主要的数据类型：

· 数字，1, 2, 13, 10px

· 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz

· 颜色，blue, #04a3f9, rgba(255,0,0,0.5)

· 布尔型，true, false

· 空值，null

· 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

· maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

运算 (Operations)

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为

p {
  font: 12px/30px; }

插值语句 #{} (Interpolation: #{})

通过 #{} 插值语句可以在选择器或属性名中使用变量：

p.#{$name} {
  #{$attr}-color: blue;
}