发表于： 2019-03-12 23:07:15
1 716
今天完成的事情：
1完成了css任务十二的第一个页面
2学习了sass
明天计划的事情：
完成css任务十二
收获：
1 混合器 占位符 继承：
混合宏的缺点:
1.它不会自动合并相同的样式代码, 如果在样式文件中调用同一个混合宏, 会产生多个对应的样式代码, 造成代码的冗余. 所以代码块中不涉及到变量时, 不要使用混合宏.
2. 插值不能调用混合宏，如@include bgColor-#{$color} 这样写就是错误的.
继承的缺点：
如果基类并不存在于html结构中时, 不管调用与不调用, 编译出来的CSS中都会产生基类对应的样式代码.
2局部变量与全局变量;
例：
//SCSS$color: blue !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量).box1 {
color: $color;//调用全局变量}p {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}}.box2 {
color: $color;//调用全局变量}
css 的结果：
//CSS.box1 { color: blue;}p a { color: red;}.box2 { color: blue;}
上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成全局变量就是定义在元素外面的变量，如下代码：
$color:orange !default;
$color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。
除此之外，Sass 现在还提供一个 !global 参数。!global 和 !default 对于定义变量都是很有帮助的。
现在我们来试试 !global 参数
//SCSS$color: blue ;.stage {
color: $color;}p {
$color: red !global;
a {
color: $color;
}}div {
color: $color;}
我们把!global参数设置到局部变量上，div调用$color,也会被赋值为 red。即!global 也为局部变量
遇到的问题：
1加hover效果时 ，不会出现在它的下方 ，而是右方
可能对hover的运用还是不太熟悉 得多练练
返回列表
评论