我有以下 scss:
@mixin logo($size:mobile) {
@if $size == mobile {
#logo {
@extend %logoMobile;
a {
@extend %logoMobile;
}
}
}
@else {
#logo {
@extend %logoDesktop;
a {
@extend %logoDesktop;
}
}
}
}
%fullWidth {
width: 100%;
}
%logoMobile {
@extend %fullWidth;
height: 30px;
}
%logoDesktop {
width: 211px;
height: 35px;
}
#header {
@include logo('mobile');
}
@media only screen and (min-width: 768px) {
#header {
@include logo('desktop');
}
}
生成的css输出为:
#header #logo, #header #logo a {
width: 100%;
}
#header #logo, #header #logo a {
height: 30px;
}
知道为什么没有生成@media 查询吗?
最佳答案
不允许从媒体查询内部扩展存在于媒体查询外部的类。当你编译 Sass 文件时,控制台会告诉你:
DEPRECATION WARNING on line 12 of test.scss:
@extending an outer selector from within @media is deprecated.
You may only @extend selectors within the same directive.
This will be an error in Sass 3.3.
It can only work once @extend is supported natively in the browser.
DEPRECATION WARNING on line 14 of test.scss:
@extending an outer selector from within @media is deprecated.
You may only @extend selectors within the same directive.
This will be an error in Sass 3.3.
It can only work once @extend is supported natively in the browser.
除非您真的要重复使用您的 Logo 样式,否则这就太复杂了。过度使用 extend 会导致更大而不是更小的 CSS 文件,因此请小心使用它们。如果您必须使用媒体查询进行扩展,可以采用以下方法:
%logo {
&, & a {
width: 100%;
height: 30px;
}
@media only screen and (min-width: 768px) {
&, & a {
width: 211px;
height: 35px;
}
}
}
#header {
#logo {
@extend %logo;
}
}
输出:
#header #logo, #header #logo a {
width: 100%;
height: 30px; }
@media only screen and (min-width: 768px) {
#header #logo, #header #logo a {
width: 211px;
height: 35px; } }
关于css - 萨斯 : overwrite definitions with different placeholder in @media query,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18938542/