scss指令笔记

指令

• @import
• 分音，若是须要导入 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;
}
// 则<div class="seriousError intrusion"><div>也会有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^="http://"]
• 多重延伸

.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 不能够将 @media 层外的 CSS 规则延伸给指令层内的 CSS，这样会生成大量的无用代码。也就是说，若是在 @media （或者其余 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;
 }
}