_map-to-css

連想配列をCSSとして出力します。

引数型初期値説明
@include _map-to-css($map);
$mapMap対象となる連想配列

CSSとして出力

Sassを記述するのと同じように、連想配列を使ってネストされたCSSを出力できます。

.element {
  @include _map-to-css((
    display: flex,
    color: red,
    '&:hover': (
      color: blue,
      '&::before': (
        content: 'nested',
      ),
    ),
  ));
}

.element {
  display: flex;
  color: red;
}
.element:hover {
  color: blue;
}
.element:hover::before {
  content: "nested";
}

カンマ区切りの値

CSSプロパティにカンマ区切りの値を指定する場合は、引用符 '' で囲む必要があります。

.element {
  @include _map-to-css((
    transition: 'color .2s, background-color .3s ease-out',
  ));
}

.element {
  transition: color .2s, background-color .3s ease-out;
}