scss语法

• $变量

• $width: 5em;

  直接使用即调用变量：

  #main {
   width: $width;
  }

• &父选择器，既能代表父选择器本身，又能作为字符使用

• a {
    font-weight: bold;
    &:hover { text-decoration: underline; }
    body.firefox & { font-weight: normal; }
    &-sider{border: 1px solid;} }

  编译为

  a {
    font-weight: bold; }
    a:hover {
      text-decoration: underline; }
    body.firefox a {
      font-weight: normal; }
   a-sidebar { border: 1px solid; }

• 属性嵌套

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

  编译为

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

• #{}：将变量插入选择器和属性名中
• @extend，一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译为

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

%占位符选择器，必须通过 @extend 指令调用才会执行。

• @include

mixin：混合指令用于定义可重复使用的样式

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译为

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

• @import除了可以嵌套scss文件，还可以在文件内部嵌套样式

.example {
  color: red;
}

然后导入到 #main 样式内

#main {
  @import "example";
}

将会被编译为

#main .example {
  color: red;
}

• 注释/* */ 与 //

两种都支持，但只有/* */ 会输出到编译后的代码中

• 运算

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: (italic bold 10px/8px); // In a list, parentheses don't count
}

编译后:

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }