Sass 学习笔记

Sass 学习笔记

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

一. CSS 功能扩展

1.嵌套规则

#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; 
}

嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理：

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

编译之后为

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

2.父级选择器&

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时
或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译为

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }
    
编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译为

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }
      
& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如

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

编译为

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

3.嵌套属性

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。
为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译为

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

命名空间也可以包含自己的属性值

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

编译为

.funky {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold; }

4.占位符选择器

Sass 额外提供了一种特殊类型的选择器：占位符选择器 。与常用的 id 与 class 选择器写法相似，只是#或.替换成了% 。
必须通过 @extend 指令调用

%foo {
  font-family: fantasy;
}

.error {
  @extend %foo;  // 将 %foo 的属性继承到 .error中
  font-weight: bold;
}

编译为

.error {
  font-family: fantasy;
  font-weight: bold;
}

5.注释/**/与//

// Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会，例如：

/* 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; }

编译为

/* 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; }
  
插值语句 (interpolation) 也可写进多行注释中输出变量值：

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

编译为

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

二. SassScript

1.Interactive Shell

Interactive Shell 可以在命令行中测试 SassScript 的功能。在命令行中输入 sass -i，然后输入想要测试的 SassScript 查看输出结果：

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

2.变量$

变量是SassScript最普遍的用法变量以`$`开头

$width: 5em;

直接使用即调用变量

#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），
不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。
将局部变量转换为全局变量可以添加 !global 声明为全局变量

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

编译为

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

3.数据类型

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)
SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

1.字符串
    SassScript支持有引号字符串和无引号字符串，在编译的时候不会改变类型
    只有有一种特殊情况，在使用 #{} 的时候有引号字符串将会被编译为无引号字符串


@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译为

body.firefox .header:before {
  content: "Hi, Firefox users!"; }
  

2.数组
  数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 
  这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。
  数组本身没有太多功能，但 Sass list functions 赋予了数组更多新功能：
    nth 函数可以直接访问数组中的某一项；
    join 函数可以将多个数组连接在一起；
    append 函数可以在数组中添加新值；
    @each 指令能够遍历数组中的每一项。
  数组中可以包含子数组，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。
  如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。
  变化是，之前的 1px 2px, 5px 6px 使用逗号分割了两个子数组 (comma-separated)，
  而 (1px 2px) (5px 6px) 则使用空格分割(space-separated)。

  当数组被编译为 CSS 时，Sass 不会添加任何圆括号（CSS 中没有这种写法），
  所以 (1px 2px) (5px 6px) 与 1px 2px, 5px 6px 在编译后的 CSS 文件中是完全一样的，
  但是它们在 Sass 文件中却有不同的意义，前者是包含两个数组的数组，而后者是包含四个值的数组。
  
  用 () 表示不包含任何值的空数组（在 Sass 3.3 版之后也视为空的 map）
  空数组不可以直接编译成 CSS，比如编译 font-family: () Sass 将会报错。如果数组中包含空数组或空值，
  编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px。
  
  基于逗号分隔的数组允许保留结尾的逗号，这样做的意义是强调数组的结构关系，尤其是需要声明只包含单个值的数组时
  例如 (1,) 表示只包含 1 的数组，而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。

3.Maps
  Maps可视为键值对的集合，键被用于定位值 在css种没有对应的概念。 和Lists不同Maps必须被圆括号包围，键值对被逗号分割 。 
  Maps中的keys和values可以是SassScript的任何对象。（包括任意的sassscript表达式 arbitrary SassScript expressions） 
  和Lists一样Maps主要为sassscript函数服务，如 
    map-get函数用于查找键值，
    map-merge函数用于map和新加的键值融合，
    @each命令可添加样式到一个map中的每个键值对。 
  Maps可用于任何Lists可用的地方，在List函数中 Map会被自动转换为List ， 如 
    (key1: value1, key2: value2)会被List函数转换为 key1 value1, key2 value2 ，反之则不能。

4.运算

1.数字运算
    SassScript 支持数字的加减乘除、取整等运算 ()，如果必要会在不同单位间转换值。+, -, *, /, %
    关系运算 也可用于数字运算，相等运算 可用于所有数据类型。<, >, <=, >===, !=
    
  p {
    width: 1in + 8pt;
  }
  
  编译为
  
  p {
    width: 1.111in; }
    
  以下三种情况 将被视为除法运算符号：/
    如果值，或值的一部分，是变量或者函数的返回值
    如果值被圆括号包裹
    如果值是算数表达式的一部分
  
  p {
    font: 10px/8px;             // Plain CSS, no division
    $width: 1000px;
    width: $width/2;            // Uses a variable, does division
    width: round(1.5)/2;        // Uses a function, does division
    height: (500px/2);          // Uses parentheses, does division
    margin-left: 5px + 8px/2px; // Uses +, does division
  }
  
  编译为
  
  p {
    font: 10px/8px;
    width: 500px;
    height: 250px;
    margin-left: 9px; }
    
  如果需要使用变量，同时又要确保 不做除法运算而是完整地编译到 CSS 文件中，只需要用 插值语句将变量包裹。/#{}
  
  p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
  }
  
  编译为
  
  p {
    font: 12px/30px; }

2.颜色值运算 

  p {
    color: #010203 + #040506;
  }
  
  编译为
  
  p {
    color: #050709; }
  
  也可以使用乘法
  
  p {
    color: #010203 * 2;
  }
  
  编译为
  
  p {
    color: #020406; }
    
  需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），
  必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
  
  p {
    color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
  }
  
  编译为
  
  p {
    color: rgba(255, 255, 0, 0.75); }
    
  颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。
  
  $translucent-red: rgba(255, 0, 0, 0.5);
  p {
    color: opacify($translucent-red, 0.3);
    background-color: transparentize($translucent-red, 0.25);
  }
  
  编译为
  
  p {
    color: rgba(255, 0, 0, 0.8);
    background-color: rgba(255, 0, 0, 0.25); }

3.字符串运算

  p {
  cursor: e + -resize;
  }
  
  编译为
  
  p {
  cursor: e-resize; }
  
  注意，如果有引号字符串（位于 左侧）连接无引号字符串，运算结果是有引号的
  ，相反，无引号字符串（位于 左侧）连接有引号字符串，运算结果则没有引号。
  
  p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
  }
  
  编译为
  
  p:before {
  content: "Foo Bar";
  font-family: sans-serif; }
  
  运算表达式与其他值连用时，用空格做连接符：
  
  p {
  margin: 3px + 4px auto;
  }
  
  编译为
  
  p {
  margin: 7px auto; }
  
  在有引号的文本字符串中使用 插值语句可以添加动态的值：#{}
  
  p:before {
  content: "I ate #{5 + 10} pies!";
  }
  
  编译为
  
  p:before {
  content: "I ate 15 pies!"; }
  
  空的值被视作插入了空字符串：
  
  $value: null;
  p:before {
    content: "I ate #{$value} pies!";
  }
  
  编译为
  
  p:before {
  content: "I ate pies!"; }
  
4.支持布尔运算

5.不支持数组运算

5.圆括号

圆括号具有较高的运算优先级

p {
  width: 1em + (2em * 3);
}

编译为

p {
  width: 7em; }

6.函数

p {
  color: hsl(0, 100%, 50%);
}

编译为

p {
  color: #ff0000; }

此外还支持关键字参数

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

另外，参数名被视为变量名，下划线、短横线可以互换使用。

7.插值语句

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

编译为

p.foo {
  border-color: blue; }

8.变量定义

可以在变量的结尾添加 给一个未通过 声明赋值的变量赋值，此时，
如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。!default

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

编译为

#main {
  content: "First content";
  new-content: "First time reference"; }
  
如果变量是null空值时将被视为未被赋值

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

编译为

#main {
  content: "Non-null content"; }

9.@import

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
  文件拓展名是 .css；
  文件名以 http:// 开头；
  文件名是 url()；
  @import 包含 media queries。
如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。
没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

@import "foo.scss";
或者
@import "foo";
还可以同时导出多个文件
@import "rounded-corners", "text-shadow";

还可以使用嵌套import

.example {
  color: red;
}

#main {
  @import "example";
}

编译为

#main .example {
  color: red;
}

不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

10.@extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

这里.seriousError 就继承了.error的属性

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

编译为

a:hover, .hoverlink {
  text-decoration: underline; }
  
同理支持多继承

11.@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译为

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

12.@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译为

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

13.@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

编译为

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

14.mixin混合指令

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

混合也需要包含选择器和属性，甚至可以用 & 引用父选择器：

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

引用混合样式 @include 

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译为

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }
  
也可以在最外层引用混合样式。

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

编译为


a {
  color: blue;
  background-color: red; }

混合样式中也可以包含其他混合样式，比如


@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

在定义混合样式的时候可以指定参数

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

编译为

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }
  
同时也可以为参数设置默认值

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

编译为

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }
  
在传参的时候也可以使用关键字参数

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

在定义mixin方法的时候若不知道参数的具体数量可以使用参数变量，即在参数后加...

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译为

.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

同理，在使用include调用mixin方法的传参的时候可以使用...来将参数拆分

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

编译为

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

但是当在定义mxin方法是指定了 $args... 在使用include方法调用时后传参即传了普通参数又传了关键字参数，则 $args... 只会接受关键词参数

@mixin wrapped-stylish-mixin($args...) {
  font-weight: bold;
  @include stylish-mixin($args...);
}
.stylish {
  // $width 参数将会传递给 stylish-mixin 作为关键词。
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

在使用mixin的时候可以先将一段代码写到函数体内，然后通过include调用。在调用的时候额外部分将会替换掉@content标志的地方

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

编译为

* html #logo {
  background-image: url(/logo.gif);
}

为了方便书写，@mixin 可以用  = 表示， 而@include 可以用 + 表示

=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)
  
注意：当@content指令出现在循环体内或者方法体内多个地方的时候，额外的代码将会被替换到每一处@content的地方

此外最好避免@minxin方法在定义关键字参数的时候出现参数同外层作用域相同的情况，若是相同的话，方法体内只会取到当前方法的关键字参数

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

编译为

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

15.函数指令（没有什么卵用）

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

编译为

#sidebar {
  width: 240px; }