八.嵌套-选择器嵌套
Sass 的嵌套分为三种:
<ul>
<li>选择器嵌套</li>
<li>属性嵌套</li>
<li>伪类嵌套</li>
</ul>
html 结构:
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
选中 header 中的 a 标签,在写 CSS 会这样写:
nav a {
color:red;
}
header nav a {
color:green;
}
那么在 Sass 中,就可以使用选择器的嵌套来实现:
nav {
a {
color: red;
header & {
color:green;
}
}
}
header & 表示 "&"公用之前的代码
header{
nav {
a{ color:green;}
}
}
九属性嵌套
css 代码:
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
scss 代码:
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
十.[Sass]混合宏 VS 继承 VS 占位符
http://www.imooc.com/code/7041
1.Sass 中的混合宏的使用
总结:他不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余,这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处,他可以传参数。
使用时间:代码块中涉及到变量,建议使用混合宏来创建相同的代码块。
2.Sass 中继承
总结:使用继承后,编译出来的 CSS 会将使用继承的代码块合并到一起,通过组合选择器的方式向大家展现
使用时间:如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用 Sass 的继承。
3.Sass 中占位符
总结:编译出来的 CSS 代码和使用继承基本上是相同,只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的,“占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。
总结_1:
三种存在即合理。占位符的好处是,不调用是不会编译出来的。混合宏的好处是,可以传参,但是编译出来的内容冗余。继承的好处是,对不要传参变动的内容继承后编译出来的内容,相同部分是在一起的,代码比较简洁规范。缺点是不能传参