sass学习记录

导入sass文件

局部文件

局部文件–专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件。
-在sass中局部文件的文件名以下划线开头,sass在编译时不会单独编译这个文件输出css,而只把这个文件用作导入。

默认变量值

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

$link-color: blue; 
$link-color: red;  //有效
a {
color: $link-color;
}

使用!default标签时,如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

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

若是用户在导入sass局部文件之前声明了一个$fancybox-width变量,则这里的$fancybox-width: 400px就无效,否则默认为400px。

嵌套导入

sass允许在css内使用@import导入sass文件。
这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。

// 一个名为_blue-theme.scss的文件
aside {
  background: blue;
  color: white;
}

//另一个css文件
.blue-theme {@import "blue-theme"}
 // 生成的结果:
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

原生的css导入

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

混合器

混合器使用@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;
}

给混合器传参

可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。

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

在使用@include时，可以把它当作一个css函数来传参。

a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

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

sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数可以不按顺序

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

默认参数值

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

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

这时，调用@include link-colors(red)时，$hover和$visited也会被自动赋值为red。

选择器继承

通过使用@extend，一个选择器可以继承为另一个选择器定义的所有样式。

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

在上边的代码中，seriousError将会继承样式表中任何位置处为.error定义的所有样式。

如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error.seriousError这一选择器组进行替换。

总结

@extend的两个要点：

• 跟混合器相比，继承生成的css代码相对更少。
• 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。