发表于: 2019-10-30 18:58:38
1 814
今天完成的事情:
任务11
今日收获:
sass的安装,ruby环境配置
saaa引入变量,定义css中反复使用的变量值。
知识点:
一、基础常识
1.变量可以在css规则块定义之外存在。这点我理解为类似于通配符,但sass制作的变量需要引用才生效。
2."粒度"是数据库名词,计算机领域中粒度指系统内存扩展增量的最小值 。
3.在sass的大 多数地方,中划线命名的内容和下划线命名的内容是互通的,除了变量,也包括对混合器和Sass函数的命名。
但是在sass中纯css部分不互通,比如类名、ID或属性名。
二、 嵌套CSS 规则
1.一个给定的规则块,既可以像普通的CSS那样包含属性,又可以嵌套其他规则块。当同时要为一个容器元素及其子元素编写特定样式时,非常好用。
举例:
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
#content aside { background-color: #EEE }
}
编译后
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
2.父选择器的标识符&
如你想要在嵌套的选择器 里边立刻应用一个类似于:hover的伪类。为了解决这种以及其他情况,sass提供了一个特殊结构&。
举例:
问题操作如下
article a {
color: blue;
:hover { color: red }
}
结果:这意味着color: red这条规则将会被应用到选择器article a :hover,article元素内链接的所有子元素在被hover时都会变成红色。
正确操作:
article a {
color: blue;
&:hover { color: red }
}
明天计划的事情:任务11 12
评论