我有一种代码味道,看起来像这样:
$mobile-bg-color: #ddddff;
$desktop-bg-color: #ffdddd;
$mobile-border: solid 2px black;
$desktop-border: solid 2px red;
div {
margin: 50px;
@media screen and (max-width: $mobile_threshold){
background-color: $mobile-bg-color;
border: $mobile-border;
}
@media screen and (min-width: $mobile_threshold + $threshold_step){
background-color: $desktop-bg-color;
border: $desktop-border;
}
}
而且我必须在移动设备和桌面设备之间细节可能不同的任何地方执行此操作。
我真正想做的是:
div {
margin: 50px;
border: $responsive-border;
background-color: $responsive-bg-color;
}
这可以使用 Sass 吗?
最佳答案
您可以使用 mixin 来实现此目的.像这样定义一个 mixin:
@mixin responsive-border {
@media screen and (max-width: $mobile_threshold){
background-color: $mobile-bg-color;
border: $mobile-border;
}
@media screen and (min-width: $mobile_threshold + $threshold_step){
background-color: $desktop-bg-color;
border: $desktop-border;
}
}
然后这样调用它:
div {
margin: 50px;
@include responsive-border;
}
您可以对经常使用的任何一组规则执行相同的操作。 Mixin 有助于让您的代码保持干爽。
关于css - 我可以使用媒体查询设置全局变量吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39907375/