如果使用函数设置值，SCSS 变量中的不同值

Question

我有一个 util scss 文件用于我的断点，以便在我的 Angular 项目中重用它们：

$breakpoints: (
    sm: 768px,
    md: 1024px,
    lg: 1280px,
    xl: 1400px
);

$bp-sm: get-bp('sm');
$bp-md: get-bp('md');
$bp-lg: get-bp('lg');
$bp-xl: get-bp('xl');

@function get-bp($bp) {
    @if $bp {
        $bp: map-get($breakpoints, $bp);
    } @else {
        @error "Parameter #{$bp} is unknown or empty.";
    }

    @return $bp;
}

我有一个断点列表。我需要另一个 util 文件的函数，我在其中循环遍历列表并为每个断点呈现媒体查询。 scss 变量用于 Angular 组件样式中的硬编码媒体查询。所以我尝试通过调用函数来设置变量的值，所以我避免了值的冗余并使用相同的列表。

.logo {
    width: 250px;

    @media (min-width: $bp-md) {
        width: 650px;
    }
}

.button {
    padding: 20px;

    @media (min-width: $bp-md) {
        padding: 50px;
    }
}

我的问题是，当检查我编译的 css 的徽标时，media query 看起来像这样：@media (min-width: 1024px) {...}（因此它具有预期值，但对于我的按钮它看起来像这样：@media (min-width: get-bp('md')) {...}（因此它不会映射将函数调用显示为值的值）。两者都是导入断点实用程序的独立 Angular 组件。

所以我的问题是，是否可以通过调用函数为 scss 变量赋值？为什么它对一个组件有效但对另一个组件不起作用？我知道我可以用 map-get() 来做到这一点，但我已经在函数中这样做了，所以它在某种程度上也是多余的。

Answer 1

css 行的顺序很重要。您应该将您的功能放在全局范围内，并在以下几行中使用它。告诉我这个解决方案是否有效。

Answer 2

它太大而无法评论，但是我会像这样重写查询：

@media (min-width: $bp-md) {
    .button {
            padding: 50px;
    }
    
    .logo {
        width: 650px;
    }
}

Answer 3

在 SASS 中，函数需要在使用前声明。正如在你的例子中，它不是 $bp-sm: get-bp('sm') 不知道你想调用一个函数并向变量建议一个字符串。

解决方法：在函数声明之后写变量。该代码应该有效：

// ### SASS: 

$breakpoints: (
    sm: 768px,
    md: 1024px,
    lg: 1280px,
    xl: 1400px
);


// function-declaration FIRST:
@function get-bp($bp) {
    @if $bp {
        $bp: map-get($breakpoints, $bp);
    } @else {
        @error "Parameter #{$bp} is unknown or empty.";
    }

    @return $bp;
}

// variables settings with function call 
// AFTER FUNCTION DECLARATION
$bp-sm: get-bp('sm');
$bp-md: get-bp('md');
$bp-lg: get-bp('lg');
$bp-xl: get-bp('xl');



.logo {
    width: 250px;

    @media (min-width: $bp-md) {
        width: 650px;
    }
}

.button {
    padding: 20px;

    @media (min-width: $bp-md) {
        padding: 50px;
    }
}
  

// ### compiles to CSS

.logo {
  width: 250px;
}
@media (min-width: 1024px) {
  .logo {
    width: 650px;
  }
}

.button {
  padding: 20px;
}
@media (min-width: 1024px) {
  .button {
    padding: 50px;
  }
}

如果使用函数设置值，SCSS 变量中的不同值

Different value in SCSS variable if using function for setting value

css

sass

angular

scss-functions