sass 学习笔记

1.变量

把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。

1-1. 变量声明;

使用$符号来标识变量。

$highlight-color: #F90;//定义

h1 {

  color: $highlight-color;//使用

}

当变量定义在css规则块内，那么该变量只能在此规则块内使用。

$nav-color: #F90;//块外定义

nav {
  $width: 100px;//块内定义
  width: $width; //ok
  color: $nav-color;
}

div {
  width: $width;//error 访问不到
  color: $nav-color;
}

div {
  $width: 2100px;//块内定义
  width: $width;// ok
  color: $nav-color;
}

1-2. 变量引用;

在声明变量时，变量值也可以引用其它变量。

$highlight-color: #F90;//定义颜色
$highlight-border: 1px solid $highlight-color;//引用颜色
.selected {
  border: $highlight-border;
}

2. 嵌套;

#content {
  .box {
    div {
      p {
        h1 {
          color: red;
        }
        h2 {
          color: yellow;
        }
        span {
          h3 {
            color: black;
          }
        }
      }
    }
  }
}


//CSS效果
#content .box div p h1 {
  color: red;
}

#content .box div p h2 {
  color: yellow;
}

#content .box div p span h3 {
  color: black;
}

2-1. 父选择器的标识符 &

//直接 :hover 
article a {
  color: blue;
  :hover { color: red }
}
//效果
article a {
  color: blue;
}
article a :hover {//a 的子元素
  color: red;
}

//添加 &
article a {
  color: blue;
  &:hover { color: red } //&替换为父选择器
}
//效果
article a {
  color: blue;
}
article a:hover {//当前a 元素
  color: red;
}

2-2. 群组选择器的嵌套;

//子层群组
.container {
  h1, h2, h3 {margin-bottom: .8em}
}
//效果
.container h1, .container h2, .container h3 {
  margin-bottom: .8em;
}

//父层群组
div,p{
  h1{
    color: red;
  }
}
//效果
div h1, p h1 {
  color: red;
}

2-3. 子组合选择器和同层组合选择器：>、+和~;

子组合选择器 >   ：选择一个元素的直接子元素；

同层相邻组合选择器+ ：选择一个元素后，紧跟的相邻元素；

同层全体组合选择器~ ：选择所有跟在一个元素后的，同层某元素，不管它们之间隔了多少其它元素；

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

2-4. 嵌套属性;

nav {
  border: { //把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块

      style: solid; //把子属性部分写在这个{ }块中
      width: 1px;
      color: #ccc;

  }
}

//sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样： 
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则：

nav {
  border: 1px solid #ccc {
      left: 0px;
      right: 0px;
  }
}

//效果 
nav {

  border: 1px solid #ccc;

  border-left: 0px;
  border-right: 0px;

}

3. 导入SASS文件; 

@import:它允许在一个css文件中导入其他css文件。

@import “文件名”。

所有在被导入文件中定义的变量和混合器，均可在导入文件中使用。

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀。

3-1. 使用 局部文件;

那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。

当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。

3-2. 默认变量值;

反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值

$link-color: blue;
$link-color: red;//覆盖上一个同名变量
a {
    color: $link-color;
}
//效果
a {
  color: red;
}

!default：含义是，如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox-width: 400px !default;
$fancybox-width: 500px; //有声明
.fancybox {
  width: $fancybox-width;
}

//效果
.fancybox {
  width: 500px; //用声明值
}


$fancybox-width: 400px !default;
//无声明
.fancybox {
  width: $fancybox-width;
}

.fancybox {
  width: 400px;//用默认值
}

3-3. 嵌套导入;

sass允许@import命令写在css规则内——生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。

//_blue-theme.scss
aside {
  background: blue;
}

//a.scss
.blue-theme {@import "blue-theme"}

//效果
.blue-theme {
  aside {//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
    background: blue;
  }
}

3-4. 原生的CSS导入;

把原始的css文件改名为.scss后缀，即可直接导入

4. 静默注释;

sass提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。

它们以//开头，注释内容直到行末.

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

实际上，css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。

body {
  color /* 这块注释内容不会出现在生成的css中 */: #333;
  padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;
}

5. 混合器;

@mixin:   给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。

然后，通过@include来使用这个混合器，放在你希望的任何地方。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.notice {
  background-color: green;
  border: 2px solid #00aa00;

  @include rounded-corners; //@include调用会把混合器中的所有样式提取出来放在@include被调用的地方
}

//效果
.notice {
  background-color: green;
  border: 2px solid #00aa00;


  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

5-2. 混合器中的CSS规则;

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性。混合器中的规则最终会生成父规则中的嵌套规则。

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

.notice {
  background-color: green;
  @include no-bullets; //@include调用会把混合器中的所有样式提取出来放在@include被调用的地方
}

//效果 
.notice {
  background-color: green;
  list-style: none;
}

.notice li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

5-3. 给混合器传参;

混合器并不一定总得生成相同的样式。

可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。—— 参数其实就是可以赋值给css属性值的变量。

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {//当混合器被@include时，你可以把它当作一个css函数来传参。
  @include link-colors(blue, red, green);
}

//效果
a {
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: green;
}

你可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。

sass允许通过语法$name: value的形式指定每个参数的值。

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors( 
    $normal: blue,//这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可
    $visited: green,
    $hover: red
);
}

5-4. 默认参数值;

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。

参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其它参数的引用。

@mixin link-colors(
    $normal,
    $hover: $normal,//设置默认值为$normal
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors( 
    $normal: blue //$hover和$visited也会被自动赋值为blue。
);
}
//效果
a {
  color: blue;
}
a:hover {
  color: blue;
}
a:visited {
  color: blue;
}

6. 使用选择器继承来精简CSS;

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式——通过@extend语法实现。

注意：不要用后代选择器去继承：.foo .bar { @extend .baz; }。

@extend背后最基本的想法是，如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error , .seriousError这一选择器组进行替换。这就意味着相关样式会如预期那样应用到.error和.seriousError。

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;//通过选择器继承继承样式
  border-width: 3px;
}
//效果
.error, .seriousError {//.seriousError将会继承样式表中任何位置处为.error定义的所有样式。以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error"。
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

//.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承
.error a {
  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error {
  //应用到hl.seriousError
  font-size: 1.2rem;
}
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error; //通过选择器继承继承样式
  border-width: 3px;
}
//效果
.error a, .seriousError a {
  color: red;
  font-weight: 100;
}
h1.error, h1.seriousError {
  font-size: 1.2rem;
}
.error, .seriousError {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

7：其它

7.1 #{  name  } 插值

$name: "tutorialspoint";
.#{$name} {
  color: blue;
}
//效果
.tutorialspoint {
  color: blue;
}