指令

• 分音，如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在scss文件名前面加下划线就可以了，
• @media媒体查询
  • 查询条件也是允许嵌套的

  @media screen {  .sidebar {    @media (orientation: landscape) {      width: 500px;    }  }}// 编译结果：@media screen and (orientation: landscape) {  .sidebar {    width: 500px;   } }

• @extend继承
• 样式继承

// 例子1 .error { border: 1px #f00; background-color: #fdd;}.seriousError { @extend .error; border-width: 3px;}// 编译结果：.error { border: 1px #f00; background-color: #fdd;}.seriousError { border: 1px #f00; background-color: #fdd; border-width: 3px;}// 例子2.error { border: 1px #f00; background-color: #fdd;}.error.intrusion { background-image: url("/image/hacked.png");}.seriousError { @extend .error; border-width: 3px;}// 则
    
     
      也会有hacked.png的背景// 编译结果为：.error, .seriousError { border: 1px #f00; background-color: #fdd; }.error.intrusion, .seriousError.intrusion { background-image: url("/image/hacked.png"); }.seriousError { border-width: 3px; }
     
    

• 延伸选择器
• 例如：.special.cool，a:hover 或者 a.user[href^="]
• 多重延伸

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

• 继续延伸

.error {  border: 1px #f00;  background-color: #fdd;}.attention {  font-size: 3em;  background-color: #ff0;}.seriousError {  @extend .error;  @extend .attention;  border-width: 3px;}.test{  width: 10px;   @extend .seriousError;}

• 在媒体查询中延伸
• Sass 不可以将 层外的 CSS 规则延伸给指令层内的 CSS，这样会生成大量的无用代码。也就是说，如果在 （或者其他 CSS 指令）中使用 @extend，必须延伸给相同指令层中的选择器。

// 可行@media print { .error {   border: 1px #f00;   background-color: #fdd; } .seriousError {   @extend .error;   border-width: 3px; }}// 不可以：.error { border: 1px #f00; background-color: #fdd;}@media print { .seriousError {   // INVALID EXTEND: .error is used outside of the "@media print" directive   @extend .error;   border-width: 3px; }}