发表于： 2019-03-21 23:32:33
1 781
今天完成的事：
1.学习sass
2.完成任务十
明天的计划：
1.继续学习sass相关知识
2.完成任务十一、十二
遇到的问题：
无
收获：
写sass的核心思想： 不要做重复的工作
1.@mixin混合器
{ 如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。}
可以把跨浏览器的代码统一打包，这样引用起来就贼方便 注意： 是@mixin定义，然后@include引出
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
这样就已经包括了-webkit -moz，然后想在后面继续使用border-radius，就可以直接把浏览器的适配代码也引过来
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成：
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
但是由于这样用起来太方便了，所以又导致一个问题——容易被滥用
更精确的定制混合器：给css属性 赋值一个变量（类似javascript的function）
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
用@include，把css函数的参数（属性值）穿出来：
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
这样看来就可以发现，link-colors里面的值是一一对应的关系，很难区分，所以可以再升级
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
这样把参数和属性排好队，写在a标签里
2.选择器的继承 @extend
简单来说，就是一个标签里属性，我可以直接搬到下面一个标签里
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
现在seriousError拥有了背景fdd浅红色，自己的3px 加上红色边框（1px被替换成自己原来的）
注意一点： .seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承。
例如：
//.seriousError从.error继承样式
.error a{ //应用到 .seriousError a
color: red;
font-weight: 100;
}
h1.error { //应用到hl.seriousError
font-size: 1.2rem;
}
可以看到只要有 .error都会”殃及“，所以使用的时候，不能太随意呀！
3.sass特性—— 变量
sass特性—— 嵌套
sass特性——父选择器（对伪元素很友好）
4.sass的注释和CSS的区别
5.sass输出的样式有四种——
返回列表
评论