根据屏幕尺寸设置变量值[重复]答案

【问题标题】：Set variable value based on screen size [duplicate]根据屏幕尺寸设置变量值[重复]
【发布时间】：2015-09-03 18:52:31
【问题描述】：

我正在使用 sass。我想根据屏幕大小添加按钮填充。我唯一的要求是有按钮padding: 8px 8px; 用于小屏幕和按钮padding: 5px 8px; 用于大屏幕。这就是我计划拥有我的 sass 变量的方式。

@media only screen and (min-width: 1200px) {
    $paddingvar: 8px;
}

@media only screen and (max-width: 1199px) {
    $paddingvar: 5px;
}

我遇到的问题是，$paddingvar 未定义。

注意：我将此变量文件称为 scss 文件中的第一个文件

@import 'vars/_mediabased.scss'; /*$paddingvar is set here*/
@import 'other/_other.scss'; /*$paddingvar is used here*/

如何设置让填充变量起作用？

【问题讨论】：

我不确定这是否可行。 SASS 是一种编译语言，因此任何变量、mixin 等都在运行前编译成 CSS。还是我错过了什么？

标签： css sass

【解决方案1】：

很遗憾，您不能在媒体查询中设置变量。您可以在媒体查询之前定义变量并使用如下所示：

/**
 * vars/_mediabased.scss
 */
$padding: 5px  8px;
$paddingtouch: 8px;


/**
 * other/_other.scss
 */
button {
  @media only screen and (min-width: 1200px) {
    padding: $padding;
  }
  @media only screen and (max-width: 1199px) {
    padding: $paddingtouch;
  }
}

【讨论】：