Sass 主要知识点小记

Sass 主要知识点小记

以前写样式的时候，每个元素的颜色，背景色都需要重新写一遍，然后就想CSS难道没有变量么？最后就查到Sass。但当时没有静下心来好好的看一下，今天正好有时间，就在这里边看边整理一下。

参考链接：http://sass.bootcss.com/docs/sass-reference/

特点

• 是对CSS3的扩展，意味着完全兼容CSS3
• 能够使用变量、嵌套、混合、函数库等
• 以上两点就足够吸引人了

使用

这个要看使用环境了，如果常规的使用，那就按官网的来，如果是项目使用，比如依赖Node.js的项目，那么安装node-sass 和 sass-loader。

npm install node-sass --save-dev
npm install sass-loade --save-dev

然后就可以使用Sass的相关内容了。

最近还带着在看Vue.js的内容，它也不例外，安装了上述的两个npm包之后，在vue文件中只需要这样写就行了。

<style lang="scss" scoped>
    /* Sass style */
<style>

语法

1. 嵌套（Nested Rules）

代码示例 ：

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

将会被编译为：

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

CSS 中有少数的几个属性是在“命名空间”里，比如font-family、 font-size、and font-weight都在font中。

在使用时，可以这么使用

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

会编译成

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

2.使用&来指代父选择符

代码示例 :

a{
    color: red;
    &:hover {
        color: blue;
   }
}

将会被编译为

a{
    color: red;
}
a:hover {
    color: blue;
}

3.变量（使用 $）

代码示例 (忘了 $ )：

$aColor: red;
a {
    color: $aColor;
}

4. 主要数据类型

• 数字: 1.2 、 12px
• 文本字符串（引号并不影响）： foo 、 "foo" 、'foo'
• 颜色：red、#6699cc、rgba(0,0,0,0.5)
• 布尔值：true、false
• 空值： null
• 多值，以逗号或者空格隔开：12px 1px 2px、Arial、sans-serif

5. 运算符

首先，所有的运算符都支持 == 、!=

其次，SassScript 支持数字的标准运算（加 +、减 -、乘 *、除 /和取模 %以及 关系运算 （<、>、<=、>=）

6. 运算符 /

默认情况下，/会被SassScript视为分隔符原封不动的输出，但既然还能表示除法运算符，在以下三种情况下会被当成在做除法运算：

• 数值被圆括号包围：如 color: (100px/2);
• 数值是另一个表达式的一部分或者是函数的返回值： 如 width:round(100.6)/3;
• 变量类型为数值： 如 $Height:100px; height: ($Height)/2

7. 颜色也是能够进行运算的

如：

a {
    color: red + blue;
}

8. 插值（Interpolation）#{}

代码示例：

$name: active;
$attr: color;
a.#{$name} {
    #{$attr}: #6699cc;
}

9. 变量默认值（末尾加!default）

$aColor: #6699cc !default;
a {
    color: $aColor;
}

编译为：

a {
    color: #6699cc;
}

10. @ 规则与指令

@import

所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

默认情况下，会寻找Sass 文件并直接引入, 除了如下情况：

• 文件本身扩展名就为 .css
• 文件名以http://开头或者是url()
• 如果 @import 包含了任何媒体查询（media queries）

一个@import可以引入多个文件：

@import 'Head', 'Footer'

避免Sass文件被编译为 css

在文件名前加一个下划线就可以了，比如：

将文件名命名成这样 _style.sass，在引用时下面两种都是可以的：

@import "_style"
@import "style"

这也就意味着，在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _style.scss 不能与 style.scss 并存。

嵌套@import

举例说明：

如果"style.sass"中有：

.aActive{
    color: #6699cc;
}

之后在另一个文件中引用 "style.sass",并写：

.liActive {
    @import "aActive";
}

将会被编译成：

.liActive .aActive {
    color: #6699cc;
}

注意

Directives that are only allowed at the base level of a document, like @mixin or @charset, are not allowed in files that are @imported in a nested context.

It's not possible to nest @import within mixins or control directives.

@media

其功能跟在CSS中一样，只是增加嵌套的能力。比如如下代码：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

会被编译成：

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

而这样的嵌套：

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

会被编译成

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

note

@media 可以包含SassScript表达式，比如：

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

将被编译成：

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend

这里有一个应用场景，在使用bootstrap 的栅格系统时，可能会这么写：

<div class="row">
    <div class="col col-md-6">1</div>
    <div class="col col-md-6">2</div>
</div>

就是往往 col和col-md-6是一起使用。这里如果使用@extend,可以这么写：

.col {
  /**col style**/
}
.col-md-6 {
  @extend .col;
  /**other style**/
}

最终编译成为：

.col, .col-md-6 {
     /**col style**/
}
.col-md-6 {
    /**other style**/
}

之后我们在使用的时候就可以只使用col-md-6了:

<div class="row">
    <div class="col-md-6">1</div>
    <div class="col-md-6">2</div>
</div>

note

Class selectors aren't the only things that can be extended. It's possible to extend any selector involving only a single element, such as .special.cool, a:hover, or a.user[href^="http://"]

比如：

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

会被编译成 :

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

还有：

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

会被编译成：

.comment a.user:hover, .comment .user.hoverlink {
   font-weight: bold;
}

其他的一些特性这里就不细说了。

11. 控制指令（Control Directives）

@if

使用示例：

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

会被编译成

p {
  border: 1px solid; }

@else if

使用示例：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译为：

p {
  color: green; }

@for

使用示例：

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

编译为：

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

@each

格式为 @each $var in <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'); }

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

12. Mixin Directives

定义一个Mixin指令(跟正常的Sass语法一样，只是需要使用@mixin)：

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

在使用时这么使用：

.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还可以传递参数，以及指定默认值：

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

@content

可以传递一个Content Blocks给一个 Mixin：

@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);
}

note 英文原文：

The block of content passed to a mixin are evaluated in the scope where the block is defined, not in the scope of the mixin. This means that variables local to the mixin cannot be used within the passed style block and variables will resolve to the global value.

我的理解是，全局变量的作用域并不包括Mixin。也就是Mixin无法直接使用全局变量，只能在使用的时候通过参数传递进Mixin。(Mixin)更像一个模板。

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

会被编译成：

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

截图示例：

13. 函数指令（Function Directives）

使用示例：

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

也就是说，函数是能够直接使用全局变量的。@return必不可少。

呼，差不多这些对于我而言就够用了。其他用到再详细的查资料吧。