scss 中的指令@import 、@media 、@extend、@mixin 、@include、 占位符%

一、@import

　　@import 的功能，允许其导入 scss 或者sass 文件。被导入的文件将合并编译到同一个 css 文件中，另外，被导入的文件中所包含的变量或者混合指令(mixin) 都可以在导入的文件中使用。

 

　　通常，@import 寻找sass 文件并将其导入，但在以下情况下，@import 仅作为普通的css 语句，不会导入任何 sass 文件。

　　　　1. 文件拓展名是 .css ;

　　　　2. 文件名以 http:// 开头；

　　　　3. 文件拓展名是　　.css ;

　　　　4. @import 包含 media queries ;

　　如果不在上述情况内，文件的拓展名是 .scss 或 .sass ，则导入成功。没有指定拓展名，sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass的文件 并将其导入。

@import 'baz.scss';

// 或者

@import 'baz';

　　都会导入文件 baz.scss

 

二、@media

　　语法：

@media not | only mediatype and (mediafeature and | or | not mediafeature) {
  css-code;  
}

　　not: not 关键字反正整个媒体查询的含义

　　only：only 关键字可防止旧浏览器应用指定的样式，这些浏览器不支持带媒体特性的媒体查询。他对现代浏览器没有影响。

　　and ：and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。

　　他们都是可选的。但是，如果使用not 或only，则还必须指定媒体类型

　　

　　mediatype媒体类型

值        描述
all       默认。用于所有媒体类型设备。
print     用于打印机。
screen    用于计算机屏幕、平板电脑、智能手机等。
speech    用于朗读页面的屏幕阅读器。

　　mediafeature媒体特性

orientation        视窗（viewport）的旋转方向（横屏还是竖屏模式）。
max-width        显示区域的最大宽度，例如浏览器窗口。
......　　　　　　　　......

eg1:

　　编译前代码：　

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

　　编译后代码：

.sidebar {
  width: 300px;  
}
@meida screen and(orientation: landscape) {
  .sidebar {
     width: 500px;
  }  
}

　　2.@media 的queries 允许互相嵌套使用，编译时，sass 自动添加 and

　　编译前代码：

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

　　编译后代码：

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

　　3.@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，@mixin（@include）

sass 将一个选择器下的所有样式继承给另一个选择器

　　@extend 这个非常好用，通常会有两个类选择器的样式基本相同，第二个只比第一个类选择器多点样式，原来的方案要么些两边，要么在一个 html 标签上些两个选择器。

　　1.使用 @extend ：基础类 icon 会出现在编译后的css 文件中，即使他可能只是哪来被继承，而不是作为 icon 这个class 单独使用

　　编译前代码

// 基础类 icon 
.icon {
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}

.error-icon {
  @extend .icon;
  // error specific styles...
}

.info-icon {
  @extend .icon;
  // info specific styles...
}

　　编译后代码：

.icon, .error-icon, .info-icon {
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}
.error-icon {
  // error specific styles...
}

.info-icon {
  // info specific styles...
}

　　2.使用占位符选择器（以%作为开头的选择器）：它自身不会出现在编译后的 css 文件中，只会出现在 @extend 了他的那些选择器中，一般用在制作 sass 样式库的时候。

　　编译前代码

%icon {
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}
.error-icon {
  @extend %icon;
  // error specific styles...
}
.info-icon {
  @extend %icon;
  // info specific styles...
}

　　编译后代码

.error-icon, .info-icon {
  transition: background-color ease 0.2s;
  margin: 0 0.5em;
}
.error-icon {
  // error specific styles...
}

.info-icon {
  // info specific styles...
}

　　3.使用 @mixin: %选择器和无参数mixin 差不多，在浏览器中产生的效果是一样的，但是编译后的 css 有很大不同，同样没有 icon 这个类，但是 mixin 中继承自 icon 的部分编译了两次，有冗余

　　编译前代码：　

@mixin icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
.error-icon {
  @include icon;
  /* error specific styles... */
}
.info-icon {
  @include icon;
  /* error specific styles... */
}

　　编译后代码：

.error-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* error specific styles... */
}

.info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* error specific styles... */
}

　　综上所述：

　　　　对于基础类会单独作为 class 使用时，使用@extend .

　　　　在制作样式库时，使用占位符编译上效果更好。

　　　　对于大量重复使用的基础央视，可以使用@mixin，编译后有冗余