2018.7.16

今天完成的事情:

1.继续任务十四

2.学习了sass的maps

3.学习了box sizing属性

明天计划的事情:

1.完成十四十五

遇到的问题:

收获:

1.是学习了sass的maps

一般声明变量的时候，会使用各种单词的取名。

通常没有比较系统的写法。

$font-color: #424242;

$base-color: #ff6599;

$light-grey: #efefef;

这样可以使用maps来将这些变量声明为maps类型。

$map: (

  key1: value1, 

  key2: value2, 

  key3: value3

);

maps类型内存储着一个个的键值对，(”key = value”)属性名为键、属性值为值。

这样就可以将上面的颜色写成。

$colors: (

  lt-grey: #efefef,

  grey: #424242,

  pink: #ff6599,

);

这里要注意声明maps类型的时候，要使用（）圆括号.因为maps类型也是一个变量，只是其中存储的是键值对。

和声明其他变量的写法类似。

$变量名：（键值对）；

正常使用maps类型内的单个键值对信息则需要

background: map-get($colors, lt-grey);

- -使用map-get语句。需要哪一个，就取出哪一个的值、

这里可以使用@function 自定义函数来进行简化使用的步骤

@function和@return。前者创建函数，后者表明了函数将返回的值。

@function color($color-name) {

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

}

这样子只需要color: color(pink);

2.box sizing属性

可以特定的方式定义匹配某个区域的特定元素。

它的值有三个、

content-box

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 从父元素继承boxsizing的值