发表于： 2018-05-19 21:59:26
1 710
今天完成的事情：用sass 的Map写了一个栅格布局；
明天的计划：重写任务十；
今天的收获：
sass Maps 语法
Map可以看成是数组；
$map:(key:value)
$声明map，后面是()，将数据以key:value的形式赋予，key和value是成对出现的，并且每队之间使用, 分割，最后一组没有逗号；
key 是用来查找相关的值value;
map中可以嵌套map；
————————————
函数
1、map-get($map,$key) 根据$key参数，返回$key在$map中对应的value值。如果$key不存在$map中，将返回null值；如果$key不在$map中，不会编译出css（但是有返回null值，只是没有编译出）；
2、map-has-key($map.$key) 判断，如果$map中有这个$key，函数会返回true，否则返回false；用@if、@else 来写：
3、map-keys($map)，会返回$map中所有的key，@each @for 遍历；
4、map-values($map)，获取$map所有的value值，相同的值也会全部获取出来；
5、map-merge($map1,$map2)将两个数值合并得到一个新的map；如果有相同的key名，后者会取代前者；
6、map-remove($map,$key)，用来删除当前$map中的某一个$key，从而得到一个新的map；
7、keywords($args)，动态创建map的函数。
——————————————
用sass写栅格布局系统要点：
1、写栅格布局使用map以及sass使用时，要考虑好需要设置哪些变量，以及把变量放进去合适的位置！
2、每个断点查询里面包含col-sm-1：flex:0 0 8.3333%; sm/1和8.3333%都要是变量，随着遍历和循环自动改变！
.container {
width: 100%;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
//container容器
$size:(576px:540px, 768px:720px, 992px:960px, 1200px:1140px); //需要传入的map
@mixin max-width ($size-map) { //混合器，其中传入的是sass map ， 然后用@each遍历map
@each $min-width,
$max-width in $size-map { //遍历传入的map，将变量作用于传入@mixin的map中；
@media (min-width: $min-width) {
.container {
max-width: $max-width;
}
}
}
}
@include max-width($size);
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
$value: 100%/12;//col的占宽比，分成12个格子；
$text2: (null:null, sm:576px, md:768px, lg:992px, xl:1200px); //声明一个map
@mixin text2($map) {
@each $size,
$px in $map {
@if $size==null {
@for $i from 1 through 12 {
col-#{$i} {
display: flex;
padding-right: 15px;
padding-left: 15px;
width: 100%;
position: relative;
min-height: 1px;
flex: 0 0 $value*$i;
max-width: $value*$i;
}
}
}
@else {
@media screen and (min-width: $px) {
@for $i from 1 through 12 {
col-#{$size}-#{$i} {
display: flex;
flex: 0 0 $value*$i;
padding-right: 15px;
padding-left: 15px;
width: 100%;
position: relative;
min-height: 1px;
max-width: $value*$i;
}
}
}
}
}
}
@include text2($text2);
返回列表
评论