cvl

Map 基本用法

创建 & 判断 & 获取

map 的末尾需要分号;结尾。

// 创建 Map
$map: (
  key: value,
  nextkey: nextvalue
);


@mixin setContent($key) {
	.element:before {
		// 判断 key 是否存在
	    @if map-has-key($map, $key) {
	    	// 获取 Map key
	        content: map-get($map, $key)
	    } @else {
	    	// 没有找到给出警告！
	       @warn "里没有找到 #{$key} 这个 key"
	    }
	}
}

// 使用
.app {
	@include setContent(key)
}

编译结果:

.app .element:before {
  content: value;
}

合并 Maps

$colors: ( 
	light: #ccc,
	dark: #000
);


$brand-colors:(
	main: red,
	alternative: blue
);


$merged: map-merge($colors, $brand-colors);

.element {
	content: map-get($merged, light);
	color: map-get($merged, main);
}

输出结果：

.element {
  content: #ccc;
  color: red;
}

Map 在项目中使用

通常我们会把 Map 这些配置文件放入 _config.scss

对不同类名称进行管理

$icons: (
	checkmark: a,
	plus: b,
	minus: c
);

@each $name, $value in $icons {
	.icon--#{$name} {
		content: $value
	}
}

输出：

.icon--checkmark {
  content: a;
}

.icon--plus {
  content: b;
}

.icon--minus {
  content: c;
}

key 包含 map 值

一个 key 包含多个 value 值的情况。

通过 nth($colors,1) 获得 value 的值

$buttons: (
	error: (#b82d2d, #666),
	success: (#b82d2d, #666),
	warning: (#b82d2d, #666),
);

.my-button {
	padding: .5em;
	display: inline-block;
	color: #666;
	background-color: #ccc;

	@each $name, $colors in $buttons {
		$bgcolor: nth($colors, 1);
		$fontcolor: nth($colors, 2);

		&--#{$name}{
			color: $fontcolor;
			background-color: $bgcolor;
		}
	}
}

输出结果：

.my-button {
  padding: 0.5em;
  display: inline-block;
  color: #666;
  background-color: #ccc;
}
.my-button--error {
  color: #666;
  background-color: #b82d2d;
}
.my-button--success {
  color: #666;
  background-color: #b82d2d;
}
.my-button--warning {
  color: #666;
  background-color: #b82d2d;
}

处理层(z-index)

通过 $layer 定义不同元素的 z-index 层级，方便管理项目中元素的层级关系。

$layer: (
	offcanvas: 1,
	lightbox: 500,
	dropdown: 10,
	tooltip: 15
);

@function layer($name){
	@if map-has-key($layer, $name){
		@return map-get($layer, $name)
	};

    @warn "The key #{$name} is not in the map '$layer'";

    @return null;
}

.m-lightbox{
	z-index: layer(lightbox);
}

输出：

.m-lightbox {
  z-index: 500;
}

为字体创建基本样式

通常我们会把预设文件放入 _presets.scss

// _config.scss
$font: (
  color: #666;
  family: (Arial, Helvetica),
  size: 16px,
  line-height: 1.4
);

// _presets.scss
body {
  color: map-get($font, color);
  font-family: map-get($font, family);
  font-size: map-get($font, size);
  line-height: map-get($font, line-height);
}

媒体查询

$mediascreens:(
	small: 320px,
	medium: 600px,
	large: 768px,
);


@mixin respond-to($mediascreen){
	@if not map-has-key($mediascreens, $mediascreen){
		@warn "Unknown `#{$mediascreen}` in $mediascreens";
	}

	$value: map-get($mediascreens, $mediascreen);
	@media screen and (min-width: $value) {
		@content;
	}
}


.m-tabs {
	background-color: #f2f2f2;

	@include respond-to(medium){
		background-color: #ddd
	}
}

输出：

.m-tabs {
  background-color: #f2f2f2;
}
@media screen and (min-width: 600px) {
  .m-tabs {
    background-color: #ddd;
  }
}

颜色的高级使用

通过键值对管理不同的色调

$colorscheme: (
	gray: (
		base: #ccc,
		light: #f2f2f2,
		dark: #666
	),
	brown: (
		base: #ab906b,
		light: #ecdac3,
		dark: #5e421c
	)
);

@function setcolor($scheme, $tone: base) {
	@return map-get(map-get($colorscheme,$scheme),$tone);
}

.element{
	color: setcolor(gray);
}
.element--light{
	color: setcolor(brown, light);
}

输出：

.element {
  color: #ccc;
}

.element--light {
  color: #ecdac3;
}

通过 Classes 定制主题

$themes: (
	theme1: theme-light,
	theme2: theme-dark,
);

$config: (
	theme1: (
		background: #f2f2f2,
		color: #000
	),
	theme2: (
		background: #666,
		color: #fff
	) 
);


@function setStyle($map, $object, $style) {
    @if map-has-key($map, $object) {
        @return map-get(map-get($map, $object), $style);
    }

    @warn "The key `#{$object}` is not available in the map.";
    @return null;
}


.m-button {
    @each $key,$value in $themes {
        @if map-has-key($config, $key) {
            .#{$value} & {
                background: setStyle($config, $key, background);
                color: setStyle($config, $key, color);
            }
        } @else {
                @warn "The key `#{$key} isn't defined in the map $config`"
        }
    }
}

输出：

.theme-light .m-button {
  background: #f2f2f2;
  color: #000;
}
.theme-dark .m-button {
  background: #666;
  color: #fff;
}