Question

如何使用SASS中的其他变量定义变量？

这就是人们可以用LESS做的事情：

// import Google Material Colors
// returns variables ie @blue-500, @blue-400 etc
@import 'material.colors.less';

// base
@_color: 'blue';
@_secondary: 'amber';

// primary colors
@color-primary: ~"@{@{_color}-500}";
@color-primary-bright: ~"@{@{_color}-300}";
@color-primary-brighter: ~"@{@{_color}-200}";
@color-primary-brightest: ~"@{@{_color}-50}";

// secondary colors
@color-secondary: ~"@{@{_secondary}-500}";
@color-secondary-bright: ~"@{@{_secondary}-300}";
@color-secondary-brighter: ~"@{@{_secondary}-200}";
@color-secondary-brightest: ~"@{@{_secondary}-50}";

LESS-way当然不是干净和花花公子，但是 - 它有效我们的想法是设置一个基本主要，然后根据它动态设置其他颜色。

我无法想象，为了使用SASS，我们必须循环/映射等？（！）

Answer 1

Sass不支持动态变量，句点。

您需要使用地图，但我不确定这会在这种特定情况下对您有所帮助（因为您已使用外部颜色）：

@import 'material.colors';

$colors: (
  primary: (
    default: $blue-500,
    bright: $blue-300,
    brighter: $blue-200,
    brightest: $blue-50
  ),
  secondary: (
    default: $amber-500,
    bright: $amber-300,
    brighter: $amber-200,
    brightest: $amber-50
  )
);

@function color($color, $brightness: default) {
  @return map-get(map-get($colors, $color), $brightness);
}

h1 {
  color: color(primary, bright);
  background-color: color(secondary);
}

Answer 2

当然你可以做到。您可以使用整洁的色彩功能，以一种干净的方式做您需要的。请查看lighten function甚至darken function或其他颜色函数。

基本上，你这样做：

$primary-color: #08f;

$primary-light-color: lighten($primary-color, 20%);
$primary-lighter-color: lighten($primary-color, 30%);
$primary-dark-color: darken($primary-color, 20%);
$primary-darker-color: darken($primary-color, 30%);

你可以在这里看到这个： https://codepen.io/anon/pen/PjXRjM?editors=1100#0

或者，如果你觉得这是一个好主意，你可以使用列表和循环自动化它。看一下这篇文章：https://www.sitepoint.com/managing-color-values-with-sass/，作者通过它来完成它。（老实说，我不确定这是不是一个好主意，因为以后很容易理解和维护。但这是另一个话题。）

SASS / SCSS：根据其他变量定义变量

2 个答案: