Scss--@media--使用/实例
原创
©著作权归作者所有:来自51CTO博客作者IT利刃出鞘的原创作品,请联系作者获取转载授权,否则将追究法律责任
简介
说明
本文介绍Scss的@media的用法。
概述
Sass 中 @media 指令与 CSS 中用法一样,只是增加了一点额外的功能:允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内,编译时,@media 将被编译到文件的最外层,包含嵌套的父选择器。这个功能让 @media 用起来更方便,不需要重复使用选择器,也不会打乱 CSS 的书写流程。
简单示例
Scss:
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
编译后的CSS:
.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
嵌套
@media 的 queries 允许互相嵌套使用,编译时,Sass 自动添加 and。
Scss:
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
编译后的CSS:
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
动态的条件
@media 可以使用 SassScript(比如变量,函数,以及运算符)代替条件的名称或者值。
Scss:
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature: $value) {
.sidebar {
width: 500px;
}
}
编译后的CSS:
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
.sidebar {
width: 500px;
}
}