发表于: 2018-07-08 23:32:11
1 701
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
首先是学习了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);
就可以了- -。
可以使用each语句来对maps进行遍历。而后通过for循环达到想要的效果
。
box sizing属性。
可以特定的方式定义匹配某个区域的特定元素。
它的值有三个、
content-box
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 从父元素继承boxsizing的值
明天计划的事情:(一定要写非常细致的内容)
继续任务14
遇到的问题:(遇到什么困难,怎么解决的)
导航栏的写法,初步实现了显示- -但是怎么将下面的内容推下去要思考下方法
收获:(通过今天的学习,学到了什么知识)
maps的使用
评论