sass的基础学习(二）

属性和选择器嵌套是非常伟大的特性，因为他们不仅仅减少了你的编写量，而且通过视觉上的缩jinx使编写的样式结构更加清晰，更易于阅读个开发。

• 原生的css导入
  原生的css的@import规则允许在一个css文件中导入其他css文件。但这样执行到@import时，浏览器才会执行其他的css文件，导致页面加载起来特别慢。
  sass 的@import规则，在省城css文件时就把相关文件导入进来。这就意味着所有相关的样式被归纳到同一个css文件中，而无需发起额外的请求。
  sass兼容原生的css，所以它支持原生的css@import，下列三种情况会生成原生的CSS@import
  被导入的文件的名称以.css结尾
  被导入的文件名称是一个URL地址
  被导入的文件的名称是CSS的url()值
  不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，可以直接导入

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

混合器
大段大段的重用样式的代码，独立的变量就没办法应对，可以通过sass的混合器实现大段样式的重用
混合器使用@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;
}
//最终生成
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
}```

 - 混合器中的CSS规则
 - 给混合器传参
 		当@include混合器时，参数实际上就是可以复制给css属性值的变量
 		

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

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

使用选择器继承来精简css
使用sass的时候，最后一个减少重复的主要特征就是选择器继承
选择器继承科技继承为另一个选择器定义的所有样式，通过@extend语法实现
不仅会继承被继承元素自身的所有样式，任何与被继承元素有关的组合选择器样式都会被继承元素以组合选择器的形式继承

官网链接：https://www.sass.hk/guide/