丸子学SASS（学习1小时 - 基本扩展）

前言

sass一个css后置处理器，减少了开发人员的输入，极大地提升了开发效率，所以有必要花点时间学习下， 上手很快，先来学习下基本的扩展内容

嵌套规则

内层的样式将它外层的选择器作为父选择器，看例子

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

父选择器 &

当需要直接使用嵌套外层的父选择器时，可使用 & 进行连接

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。 看例子

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

变量$

变量支持块级作用域， 嵌套规则内定义的变量只能在规则内使用(局部变量) , 若要转换为全局变量需添加 !global声明

$width: 20px;  // 全局变量

#main {
  $height: 50px !global;  // 局部变量
  width: $width
}
#sidebar {
  height: $height;
}

插值语句 #{}

通过 #{} 插值语句可以在选择器或属性名中使用变量

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

变量定义 !default

在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

@import

导入其他的scc文件，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入

// 单个文件导入
@import "foo.css";
// 多个文件导入
@import "rounded-corners", "text-shadow";

导入嵌套@import，可以将@import 嵌套进css或@media中，这样导入的样式只会出现在嵌套的层中

@extend

将一个选择器下的所有样式继承给另一个选择器

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

当需要定义一套样式并不是给某个元素，而只是通过@extend指令使用时，需要使用到@extend-Only选择器

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme;
}

@at-root

@at-root指令导致一条或多条规则在文档的根位置发出，而不是嵌套在它们的父选择器下面

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}