其他分享
首页 > 其他分享> > scss 中的指令@import 、@media 、@extend、@mixin 、@include、 占位符%

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,编译后有冗余

 

标签:scss,styles,extend,...,media,编译,error,icon
来源: https://www.cnblogs.com/chuanmin/p/16203729.html