发表于： 2018-12-14 23:24:15
1 760
今天完成的事情：断断续续终于完成了scss
明天计划的事情：继续学习scss及着手任务13
遇到的问题：
1.由于对占位符%的理解错误，导致继承和被继承的类又得重新调整了，一开始以为是被继承类的独立分开，后来用上去了之后才发现是继承类的独立分开。
2.有次一个相同的被继承类放在了继承类的后面，以为没什么事，结果分成两组组合类，如图：
上下两个summary-place类之间有个summary-date，结果变成了两组
收获：
一、什么时候声明变量？
我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量：
1.该值至少重复出现了两次；
2.该值至少可能会被更新一次；
3.该值所有的表现都与变量有关（非巧合）。
基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。
温馨小提示：您在学习 sass 时，除了在我们网页上可以做练习，还有一个便利在线编辑器网址如下：http://sassmeister.com/
二、混合宏 VS 继承 VS 占位符
a) Sass 中的混合宏使用
总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。
个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
b) Sass 中继承
总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。
个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
c) 占位符
总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”
三、Sass中的插值可以写更干净的、高效的和面向对象的 CSS，它可以让变量和属性工作的很完美,如图下：
上面的代码编译成 CSS：
还有种方法是纯粹的用mixin混合器及其参数，如下图：
要注意的是在mixin混合器运用插值有可能会出错，如下图：
针对上面两种情况，可以用@extend来解决使用插值的问题，如图：
返回列表
评论