Блог о веб-разработке > Sass > Использование Sass Maps

Использование Sass Maps

В третьей версии Sass появился новый тип данных – map. Sass map является массивом сопоставления ключей и массивов.
Не всегда понятно зачем нужны массивы в CSS. В этой статье приведем несколько примеров.

Синтаксис Sass Map

Sass Map использует скобки, как внешние ограничители, двоеточия для отображения ключей и значений, и запятые для разделения пар ключ / значение. Пример:

$map: (
  key: value,
  other-key: other-value
);

$map: (

key: value,

other-key: other-value

);

Несколько вещей которые вы должны знать:

Есть много функций чтобы манипулировать map
Последнее значение в map необязательно заканчивать запятой
Ключи должны быть уникальными
Ключи и значения могут быть любыми типами данных используемых в Sass

Да, ключи не обязательно являются строками: они могут иметь другой типа. Даже null. Даже map.

Конфигурация проекта

Давайте начнем с обычного использования. Map идеально подходит для конфигурации проекта. Идея проста: вы связываете значения с ключами, и потом имеете доступ к ним в любой точке проекта с помощью map-get($map, $key).

Пример:

// _config.scss
$breakpoints: (
  small: 767px,
  medium: 992px,
  large: 1200px
);

// _mixins.scss
@mixin respond-to($breakpoint) { 
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  }

  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}

// _component.scss
.element {
  color: hotpink;

  @include respond-to(small) {
    color: tomato;
  }
}
Результат:
.element {
  color: hotpink;
}

@media (min-width: 767px) {
  .element {
    color: tomato;
  }

// _config.scss

$breakpoints: (

small: 767px,

medium: 992px,

large: 1200px

);

// _mixins.scss

@mixin respond-to($breakpoint) {

@if map-has-key($breakpoints, $breakpoint) {

@media (min-width: #{map-get($breakpoints, $breakpoint)}) {

@content;

}

@else {

@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "

+ "Please make sure it is defined in `$breakpoints` map.";

}

// _component.scss

.element {

color: hotpink;

@include respond-to(small) {

color: tomato;

}

Результат:

.element {

color: hotpink;

}

@media (min-width: 767px) {

.element {

color: tomato;

}

Еще один популярный вариант использования — это цвета. Отдельные переменные для цветов — это хорошо, но, когда их становится большое количество, работа с цветами может стать проблематичной. Имея map только для цветов, можно разделить ее на sub-maps для различных тем.

// _config.scss
$colors: (
  sexy: #FA6ACC,
  glamour: #F02A52,
  sky: #09A6E4
);

// _component.scss
.element {
  background-color: map-get($colors, sky);
}

// _config.scss

$colors: (

sexy: #FA6ACC,

glamour: #F02A52,

sky: #09A6E4

);

// _component.scss

.element {

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

}

Чтобы постоянно не повторять map-get($colors, …) вы можете использовать маленькую функцию-помощника:

// _functions.scss
@function color($key) {
  @if map-has-key($colors, $key) {
    @return map-get($colors, $key);
  }

  @warn "Unknown `#{$key}` in $colors.";
  @return null;
}

// _component.scss
.element {
  background-color: color(sky); // #09A6E4
}

// _functions.scss

@function color($key) {

@if map-has-key($colors, $key) {

@return map-get($colors, $key);

}

@warn "Unknown `#{$key}` in $colors.";

@return null;

}

// _component.scss

.element {

background-color: color(sky); // #09A6E4

}

Пример использования map для z-index:

// _config.scss
$z-layers: (
  bottomless-pit: -9999,
  default: 1,
  dropdown: 3000,
  overlay: 4000
  modal: 4001
);

// _functions.scss
@function z($key) {
  @if map-has-key($z-layers, $key) {
    @return map-get($z-layers, $key);
  }

  @warn "Unknown `#{$key}` in $z-layers.";
  @return null;
}

// _component.scss
.overlay {
  z-index: z(overlay);
}

.element {
  z-index: (z(default) + 1);
}

// _config.scss

$z-layers: (

bottomless-pit: -9999,

default: 1,

dropdown: 3000,

overlay: 4000

modal: 4001

);

// _functions.scss

@function z($key) {

@if map-has-key($z-layers, $key) {

@return map-get($z-layers, $key);

}

@warn "Unknown `#{$key}` in $z-layers.";

@return null;

}

// _component.scss

.overlay {

z-index: z(overlay);

}

.element {

z-index: (z(default) + 1);

}

Учитывая то, как легко перепутать z-index, держать их в одном map для элементов – хорошая идея. Вы будете знать сколько слоев z-index используется и легко разберетесь у каких элементов какие значения z-index.