css - 我可以使用媒体查询设置全局变量吗?

标签 css sass

我有一种代码味道,看起来像这样:

$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/

相关文章:

html - Chrome 放大导航

html - 并排显示 3 个图像链接

其他浏览器(IE、Mozilla、Opera)的 CSS -webkit-filter

CSS 行高与字体大小成比例地反转

angular - 如何更改 Angular Material 选项样式?

jquery - 单击链接更改另一个站点上的 div 外观

javascript - 使wordpress菜单粘在滚动条上

css - 如何在 ionic3 的 scss 文件中使用组件变量

css - 所有这些 CSS 框架和其他框架怎么了?

reactjs - 与 Gatsby 一起在 Storybook 中编译 SCSS