sass快速入门笔记

本文记录了sass基本内容，包含声明、嵌套、导入 、混合等

使用场景

• 将反复使用的 css属性值用一个变量声明，开发过程使用这个变量，方便后期修改该值，不用全局搜索替换(降低修改风险)。

变量声明

• 用关键字$声明
• 变量受{...}定义范围影响，在{...}内定义的在外部不可使用

  $highlight-color: #F90;
  .selected {
    border: 1px solid $highlight-color;
  }

  //编译后

  .selected {
    border: 1px solid #F90;
  }

• 可以在变量中使用变量

  $highlight-color: #F90;
  $highlight-border: 1px solid $highlight-color;
  .selected {
    border: $highlight-border;
  }

  //编译后
  .selected {
    border: 1px solid #F90;
  }

• 变量名与css相同，包含中划线和下划线
• 中划线和下划线在使用中相同，使用中划线命名不影响用下划线方式引用

$link-color: blue;
a {
  color: $link_color;
}

//编译后
a {
  color: blue;
}

嵌套css规则

• 在css中层级较深指定某一块DOM时

  #content article h1 { color: #333 }
  #content article p { margin-bottom: 1.4em }
  #content aside { background-color: #EEE }

• sass中可以写为

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

• & --> 父选择器的标识符

// 给a标签添加鼠标移入属性
article a {
  color: blue;
  &:hover { color: red }
}

// 编译后
article a { color: blue }
article a:hover { color: red }

• 子组合选择器和同层组合选择器：>、+和~;
• 嵌套属性;

nav {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
// 比下边这种同等样式的写法要好 
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

导入SASS文件

import引入

css中@import引入文件，在执行到import时才会引入，导致页面加载渲染不流畅；sass中将sass编译成css时就会执行import将文件导入，这也就意味着会生成一个css文件，减少多余文件请求。

使用sass部分文件

当只想生成少数css时，可以将不需要生成独立css的文件特殊命名。以下划线开头的命名，sass就不会在编译时单独编译这个文件输出为css，而只把这个文件用作import导入用。

default --> 默认变量值

important相反意思，若已经声明过了就用已经声明的值，否则就用当下的设定的默认值。

  // 如果之前已经声明过$fancybox-width变量，那么当前$fancybox-width赋值400px的操作就无效。如果之前没有做这样的声明，$fancybox-width将默认为400px。

  $fancybox-width: 400px !default;
  .fancybox {
    width: $fancybox-width;
  }

嵌套导入

• sass允许@import命令写在css规则内，生成的css文件对应的sass内容会直接编译在当前css中

// 局部文件_blue-theme.scss
aside {
  background: blue;
  color: white;
}

// 然后把他导入到css内
.blue-theme {@import "blue-theme"}

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

原生的CSS导入;

静默注释

• // 双斜杠

@mixin-->混合器

• 实现大段样式的重复使用

// 使用@mixin声明
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// @include来使用这个混合器
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

// sass最终生成
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

何时使用混合器

• 滥用会导致样式表过大
• 判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-cornersfancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。

混合器中的CSS规则

• 使用方法和sass基本使用方法一直，支持子类选择和伪类选择

// 混合器中定义
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

// 使用
ul.plain {
  color: #444;
  @include no-bullets;
}

// 编译后
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

给混合器传参

// 混合
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

// 使用
a {
  @include link-colors(blue, red, green);
}
// 也可以写出$name: value的方式，不用按规定顺序传
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

// 编译后
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

混合器默认参数值

• 为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。
• 参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

• 和JS类似function(a,b=2,c=3){return a,b,c)

使用选择器继承来精简CSS

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

• 何时使用继承

• 继承的高级用法

• 继承的工作细节

• 使用继承的最佳实践