Question

我正在使用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*/

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

Answer 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;
  }
}

根据屏幕大小设置变量值

1 个答案: