标签：scss styles extend ... media 编译 error icon
一、@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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。