发表于: 2018-08-26 23:48:27
2 675
一、今天完成的事情
scss实现栅格式布局/class优先级
1、使用scss创建栅格式布局
对于Boostrap里col1~.col12这样的样式,在CSS中,我们一般都需要一个一个地书写。但是在Sass中,我们可以使用@for循环来实现。
1)for循环
参考:http://www.lvyestudy.com/sass/sass_6.3.aspx
在Sass中,我们可以使用“@for”来实现循环操作。其中,Sass中的@for循环有2种方式。
语法:
方式1:@for $i from 开始值 through 结束值
方式2:@for $i from 开始值 to 结束值
说明:
这2种方式是相似的,唯一的区别是:方式1包括结束值,方式2不包括结束值。其中“开始值”和“结束值”都是正整数。
举例:
使用for循环实现属性值递增:
2)Sass插值
在Sass中,我们可以通过使用插值的方式来实现在“选择器名”、“属性名”以及“属性值”中插入一个“变量的值”,从而来“构造”一个新的选择器名、新的属性名以及新的属性值。
语法:
#{变量}
说明:
插值这种方式,在Sass代码的几乎任何一个地方都可以插入一个值,包括选择器名、属性名、属性值等。
举例:
注意:
变量,我们一般都是用于属性值的,是不能直接用于选择器名中的,不然Sass会无法编译成CSS。
这是因为border属性的属性值是一个列表值,而不是单纯的一个数字或字符串。
也就是说,如果属性值是一个简单数字或者字符串,我们可以使用变量的方式来实现。但如果属性值是一个复杂的数据类型,我们就必须使用插值的方式来实现。
总而言之,如果你想要在Sass中构造一个新的选择器名、新的属性名以及新的属性值,首先考虑的应该是使用“插值#{}”来实现。
3)for循环创建栅格式布局
2、class优先级问题
参考:https://blog.csdn.net/jie1336950707/article/details/49046371
原则一: 继承不如指定
原则二: #id > .class > 标签选择符
原则三:越具体越强大
原则四:标签#id >#id ; 标签.class > .class
CSS优先级权重计算法:
CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数!
根据这四个级别出现的次数计算得到CSS的优先级。
CSS优先级的计算规则如下:
* 元素标签中定义的样式(Style属性),加1,0,0,0
* 每个ID选择符(如 #id),加0,1,0,0
* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
* 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
将这四个数字分别累加,就得到每个CSS定义的优先级的值, 然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。
举例:
注意:
1、!important声明的样式优先级最高,如果冲突再进行计算。
2、如果优先级相同,则选择最后出现的样式。
3、继承得到的样式的优先级最低。
二、遇到的问题
这个地方,每列之间间距为0,那么盒子右边的阴影就被覆盖了,(好像是设置了白色背景。。
每列之间设置了间距之后,左右2边又会有间隙。。
三、明日计划
继续任务14,这几天一直在纠结一些布局问题,明天应该能写完了。
四、收获
1、学习到scss的for循环、插值;
2、使用scss的for循环创建栅格式布局系统;
3、class优先级问题。
评论