Importowanie funkcji SCSS

Question

@import "./styles/colors.scss";

html {
  font-size: 62.5%; /* 1 rem = 10px */
  box-sizing: border-box;
  overflow-x: hidden;
  font-family: "Montserrat";
}

body {
  margin: 0;
  background-color: color(primary);
}

 

$colors: (
  primary: #276a39,
  secondary: #e2e0e1,
  ligten-primary: ligthen(#276a39),
);

@function color($color-name) {
  @return map-get($colors, &color-name);
}

Chciałbym importować funkcję kolor i przez nią wybierać kolor z innego pliku scss, jednak nie wiem czy robię coś źle, czy po prostu coś takiego nie jest możliwe. Jeśli zrobię to w taki sposób :
 

  background-color: map-get($colors, primary);

To kolor jest pobierany i działa, jednak wolałbym używać funkcji color(primary).

Answer 1

Ta funkcja raczej powinna wyglądać tak:

@function color($color-name) {
  @return map-get($colors, $color-name);
}

Wówczas wszystko działa jak należy.

Nie za bardzo wiem, co ampersand w tym kontekście miałby robić? Nie kojarzę takiej składni zmiennych w SCSS.

Comments

Mój błąd... nie zauważyłem literówki... :v