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

@import指令

SCSS的@import是css的增强版本,共有如下几种方式能够互相导入引用;css

注意点web

• 能够使用相对路径
• 导入的文件能够.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";
}

@media指令

sass 中的 @media 指令和 CSS 的使用规则同样的简单，但它有另一个功能，能够嵌套在 CSS 规则中。有点相似 JS 的冒泡功能同样，若是在样式中使用 @media 指令，它将冒泡到外面sass

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

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

*/

@extend指令

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

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

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

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

.btn-block {
  display: block;
  width: 100%;
}

*/

@at-root指令

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

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

/*
.layer1 {
  color: red;
}
.layer1 .layer2 {
  color: orange;
}

*/

@debug

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

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

@warn和@error

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