SASS

快速入门

1、使用变量

• 1-1、变量声明
  • 语法：

  $name: value;
  

  • 变量名命名： sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线
  • 例子：

  $highlight-color: #F90;
  

  • 任何可以用作css属性值的赋值都 可以用作sass的变量值

  以空格分割的多个属性值，如$basic-border: 1px solid black;
  以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;
  

  • 高级用法：
    • 变量默认值

    //!default用于给变量赋予默认值
    $fancybox-width: 400px !default;
    

    • 在声明变量时，变量值也可以引用其他变量

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

• 1-2、变量作用域
  • 定义在css规则块之外，那么该变量能够在所有的规则块内使用（全局作用域）
  • 定义在css规则块之中，那么该变量只能在此规则块内使用（局部作用域）
  • 将局部变量转换为全局变量可以添加 !global 声明

  $nav-color: #F90;
  nav {
    $width: 100px;
    width: $width;
    color: $nav-color;
  }
  
  //编译后
  
  nav {
    width: 100px;
    color: #F90;
  }
  
  
  #main {
    $width: 5em !global;
    width: $width;
  }
  
  #sidebar {
    width: $width;
  }
  
  //编译后
  
  #main {
      width: 5em;
  }
  
  #sidebar {
    width: 5em;
  }
  

• 1.3、变量的引用
  • 语法：

  $varname
  

  • 例子：

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

2、嵌套CSS规则

• 2.1、嵌套写法： 一个给定的规则块，既可以像普通的CSS那样包含属性，又可以嵌套其他规则块。

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

• 2.2、父选择器的标识符&

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

//编译后

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

• 2.3、群组选择器的嵌套

//css
.container h1, .container h2, .container h3 { margin-bottom: .8em }
nav a, aside a {color: blue}

//sass
.container {
  h1, h2, h3 {margin-bottom: .8em}
}
nav, aside {
  a {color: blue}
}

• 2.4、关系选择器（同CSS）
  • a b
  • a > b
  • a + b
  • a ~ b
• 2.5、嵌套属性

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

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

//属性缩写
//css
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

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

3、导入SASS文件

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

使用sass的@import规则并不需要指明被导入文件的全名。可以省略.sass或.scss文件后缀（见下图）。这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。

• 3.1、使用SASS部分文件

  • sass局部文件的文件名以下划线开头:

    sass不会在编译时单独编译这个局部文件输出css，而只把这个文件用作导入

  • 通过@import引入局部文件时，可以省略文件名的下划线以及后缀名（仅适用于样式表的代码区域）

  导入themes/_night-sky.scss这个局部，只需在样式表中写@import "themes/night-sky";。
  <style lang="scss" scoped>
      @import "@/assets/style/mixin"; //找不到文件，未知原因
      @import "@/assets/style/_mixin";
  </style>
  

• 3.2、嵌套导入

  • sass允许@import命令写在样式表的顶部

  <style lang="scss" scoped>
      @import "@/assets/style/_mixin";
  </style>
  

  • sass允许@import命令写在css规则内

  .blue-theme {@import "blue-theme"}
  

• 3.3、原生的CSS导入

  由于sass兼容原生的css，所以它也支持原生的CSS@import。尽管通常在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：

  • 被导入文件的名字以.css结尾；
  • 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
  • 被导入文件的名字是CSS的url()值。

  这就是说，你不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

4、静默注释

在原生的css中，注释对于其他人是直接可见的，但sass提供了一种方式可在生成的css文件中按需抹掉相应的注释。

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。

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

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

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

5、混合器

• 5.1、声明

  • 语法：

  @mixin mixinname {
    //css
  }
  

  • 例子：

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

  • 接收参数

  @mixin mixinname($arg1, $arg2...) {
    //css
  }
  

  • 参数默认值

  @mixin mixinname($arg1: 16px, $arg2: $agr1...) {
    //css
  }
  

  • 高级用法：混合器中的CSS规则

    混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性

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

• 5.2、使用

  • 语法：

  //无参
  @include mixinname()
  
  //带参
  @include mixinname(red, 16px)
  

  • 何时使用

    • 一段样式代码被多次使用

    利用混合器，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器

    • 判断一组属性是否应该组合成一个混合器

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

• 5.3、原理

  用CSS代码替换@include，即重复了某一段CSS代码。但当需要传参时这很必要。

6、继承

• 6.1、语法：

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

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

  .seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承

  //通过选择器继承继承样式
  //.seriousError从.error继承样式
  .error a{  //应用到.seriousError a
    color: red;
    font-weight: 100;
  }
  h1.error { //应用到hl.seriousError
    font-size: 1.2rem;
  }
  

• 6.2、高级用法：

  假如一条样式规则继承了一个复杂的选择器，那么它只会继承这个复杂选择器命中的元素所应用的样式。

  举例来说， 如果.seriousError@extend.important.error ， 那么.important.error 和h1.important.error 的样式都会被.seriousError继承， 但是.important或者.error下的样式则不会被继承。

  如果一个选择器序列（#main .seriousError）@extend另一个选择器（.error），那么只有完全匹配#main .seriousError这个选择器的元素才会继承.error的样式，就像单个类 名继承那样。拥有class="seriousError"的#main元素之外的元素不会受到影响。

  像#main .error这种选择器序列是不能被继承的。这是因为从#main .error中继承的样式一般情况下会跟直接从.error中继承的样式基本一致，细微的区别往往使人迷惑。

• 6.3、继承背后的工作原理

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

  关于@extend的两个要点：

  • 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
  • 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

  混合器本身不会引起css层叠的问题，因为混合器把样式直接放到了css规则中，而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。