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

我有一个用于断点的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（最小宽度：1024px）{…}

（因此它具有预期值，但对于我的按钮，它看起来是这样的：

@media（最小宽度：get bp（'md'）{…

（因此，它不会映射将函数调用显示为值的值）。两者都是导入断点util的独立角度组件

---

因此，我的问题是，是否可以通过调用函数为

scss

变量赋值？为什么它对一个组件有效，而对另一个组件无效？我知道我可以使用

map-get（）

，但我已经在函数中这样做了，所以它也会以某种方式冗余。

css行的顺序很重要。 您应该将函数放在全局范围内，并在下面几行中使用它。

---

告诉我这个解决方案是否有效。

css行的顺序很重要。 您应该将函数放在全局范围内，并在下面几行中使用它。

---

告诉我这个解决方案是否有效。

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

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

---

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

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

---

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

---

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

---

试着找到一个可以覆盖

.button

的地方。输入找到一个可以覆盖

.button

的地方。Amn，这也是我认为我可以做到的，我确信我试过了，但没有成功。可能是缓存问题，因为像你说的那样更改它并在浏览器中完全重新加载它现在可以工作了！很高兴知道，谢谢，伙计！是的……我想我们都知道这样的情况……我个人肯定非常清楚……每次再试图抵制咬董事会；-）妈的，这也是我认为我可以做到的，我肯定我试过了，但没有成功。可能是缓存问题，因为像你说的那样更改它，然后在浏览器中完全重新加载，现在就可以了！很高兴知道，谢谢，伙计！是的……我想我们都知道这种情况……我个人肯定知道……每次再次尝试抵制b董事会会议；-）