scss

@import引入规则

@import "foo.scss";
@import "foo";
// 上两种都会引入 foo.scss文件

@import "foo.css";
@import "foo" screen;
@import "<http://foo.com/bar>";
@import url(foo);
// 编译为
@import "foo.css";
@import "foo" screen;
@import "<http://foo.com/bar>";
@import url(foo);

// 可以引人多个文件
@import "rounded-corners", "text-shadow";

// 有scss或sass文件需要引入,但不希望被编译为css文件,可以在文件名前加一个下划线,就能避免被编译
// eg. _colors.scss 这样子就不会生成_colors.css文件了.
@import "colors"; // 不用加下划线
// 该引入的文件为 _colors.scss;
// 注意:在同一个目录下不能同时存在带下划线和不带下划线的同名文件. eg. _colors.scss不能与colors.scss并存.

// 嵌套引入
// example.scss文件中包含
.example{
  color:red;
}
#main{
  @import "example";
}
//编译后
#main .example{
   color:red;
}

@media

// 使用@media 可以冒泡到外面

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

// @media的嵌套
@media screen {
     .sidebar {
         @media (orientation: landscape) {
                width: 500px;
         }
     }
}
// 编译后
@media screen and (orientation: landscape) {
      .sidebar {
           width: 500px; 
      }
}

// 在@media中可以使用插件#{}
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
       .sidebar {
               width: 500px;
       }
}
// 编译后
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
         .sidebar {
                 width: 500px; 
         }
 }

@extend

// @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可以扩展任意选择器
.hoverlink {
   @extend a:hover;
}
a:hover {
   text-decoration: underline;
}
//编译后
a:hover, .hoverlink {
   text-decoration: underline;
}

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

//编译后
.error, .seriousError {
   border: 1px #f00;
   background-color: #fdd;
 }
.attention, .seriousError {
    font-size: 3em;
    background-color: #ff0; 
}
.seriousError {
    border-width: 3px; 
}

//扩展单一选择器
#context a%extreme {
   color: blue;
   font-weight: bold;
   font-size: 2em;
}
.notice {
   @extend %extreme;
}
//编译后
#context a.notice {
   color: blue;
   font-weight: bold;
   font-size: 2em;
}

@at-root

//@at-root 跳出根元素
.a {
     color: red;
     .b {
        color: orange;
        .c {
           color: yellow;
           @at-root .d {
               color: green;
            }
        }
     }
}
//编译后
.a {
    color: red;
}

.a .b {
   color: orange;
}

.a .b .c {
   color: yellow;
}

.d {
   color: green;
}

@debug

//@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了
//@debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:
@debug 10em+12em;
//会输出
//Line 1 DEBUG: 22em;

@warn

@mixin adjust-location($x, $y) {
    @if unitless($x) {//unitless是内置函数，判断数值是否有“单位”
       @warn "Assuming #{$x} to be in pixels";
       $x: 1px * $x;
     }
    @if unitless($y) {
        @warn "Assuming #{$y} to be in pixels";
        $y: 1px * $y;
     }
     position: relative; left: $x; top: $y;
}

.botton{
    @include adjust-location(20px, 30);
}

@error

@mixin error($x){
    @if $x < 10 {
       width: $x * 10px;
   } @else if $x == 10 {
       width: $x;
   } @else {
        @error "你需要将#{$x}值设置在10以内的数";
   }
}
.test {
  @include error(15);
}