SCSS 迷你书 (下) - SCSS 中 @指令

@import指令

SCSS的@import是css的加强版本,共有以下几种方式可以互相导入引用;

注意点 - 可以使用相对路径 - 导入的文件可以.scss后缀名 - 可以引入线上的scss文件 - 支持括入引入的写法 - 在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如，_navbar.scss 不能与 navbar.scss 并存。 - 支持引入带下划线和不带下划线的文件;比如(navbar和_navbar) - 若是文件命名**带下划线**则不编译该文件,但却可以正常把样式导入其他文件用(如index.scss引入_navbar,只产生index.css) - 若是文件命名*不带下划线**,两者皆会编译,产生CSS文件((如index.scss引入navbar,会产生index.css和navbar.css`)) - 支持在CSS 规则 和 @media 规引入样式

@import "navbar.scss";                 
@import "footer" ;
@import "http://test.xx/sidebarbar";
@import url(foo);
@import "navbar","sidebar","header","footer";   

.test{
        @import "widget";
}

sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面

.sidebar {
  width: 300px;
  @media screen and (max-width: 1920px) {
    width: 600px;
  }
}

@extend指令

Sass 中的 @extend 是用来扩展选择器或占位符。

.btn{
  height:2rem;
  line-height:2rem;
  text-align:center;
  width:5rem;  
}

%btna{
  height:5rem;
  line-height:5rem;
  text-align:center;
  width:5rem;  
}

.btn-block{
  @extend .btn;

  display:block;
  width:100%;
}

.btn-square{
  @extend %btna;
}

@at-root指令

@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。

.layer1 {
  color: red;
  .layer2 {
    color: orange;
    @at-root .layer3 {
    }
  }  
}

@debug

@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后

在命令终端会输出你设置的提示 Bug: @debug 10em + 12em; 会输出： Line 1 DEBUG: 22em

@warn和@error

这两个也是方便调试用的,显示警告信息和错误信息…..类似JS的console.log();