instructions

• @import
• If you need to import an scss or Sass file, but do not want to compile it into CSS, just underline the name of the scss file,
• @media query
  • Query conditions are also allowed to be nested

    @media screen {
    .sidebar {
      @media (orientation: landscape) {
        width: 500px;
      }
    }
  }
  // Compilation result:
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; 
    } 
  }
  

• @extend inheritance
• Style inheritance

// Example 1 
.error {
 border: 1px #f00;
 background-color: #fdd;
}
.seriousError {
 @extend .error;
 border-width: 3px;
}
// Compilation result:
.error {
 border: 1px #f00;
 background-color: #fdd;
}
.seriousError {
 border: 1px #f00;
 background-color: #fdd;
 border-width: 3px;
}
// Example 2
.error {
 border: 1px #f00;
 background-color: #fdd;
}
.error.intrusion {
 background-image: url("/image/hacked.png");
}
.seriousError {
 @extend .error;
 border-width: 3px;
}
// Then < div class = "seriouserror intrusion" > < div > will also have the background of hacked.png
// The compilation result is:
.error, .seriousError {
 border: 1px #f00;
 background-color: #fdd; }

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

.seriousError {
 border-width: 3px; }

• Extension selector
• For example,. special.cool, a:hover or a.user[href^=“ http://"]
• Multiple extension

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

• Continue to extend

.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;
}

• Extend in media query
• Sass can't @media CSS rules outside the layer extend to CSS inside the instruction layer, which will generate a lot of useless code. In other words, if @media Using @ extend in (or other CSS instructions) must extend to selectors in the same instruction layer.

// feasible
@media print {
 .error {
   border: 1px #f00;
   background-color: #fdd;
 }
 .seriousError {
   @extend .error;
   border-width: 3px;
 }
}
// May not:
.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;
 }
}