发表于: 2018-07-10 21:49:47

1 592


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

1.混合器

混合器作用跟变量作用是一样的,只不过混合器比变量强大一些,严格来说一个变量只能赋予一个值,如:颜色,字体等,而混合器却可以实现更加复杂的样式。说白了就是混合器里就是多个变量的集合。这个标识符给一大段样式赋予一个名字,可以通过引用这个名字重用这段样式

举个例子

1.2混合器中的CSS规则

混合器中不仅可以包含属性,也可以包含css规则,包含选择器和选择器中的属性

混合器中的规则也可以使用 Sass的 父选择器标识符 &

举个例子



1.3给混合器传参

可以通过给混合器传递参数来实现动态生成所需的样式


2.使用选择器继承来精简CSS

选择器继承可以通过@extend语法实现。选择器的继承可以让 Sass 代码得到进一步的优化,选择器继承作用,继承另一个选择器定义的所有样式。


3.占位符选择器 %foo (Placeholder Selectors: %foo)

Sass 额外提供了一种特殊类型的选择器:占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似,只是 # 或 . 替换成了 %。必须通过 @extend 指令调用

4、混合器使用@mixin定义使用@include调用,混合器灵活性,可以传参,我们可以通过设置默认的参数值让我们的代码更加灵活。但是重复调用一个混合器这个就是个灾难了,代码变得臃肿,难以维护。

5.继承使用@extend调用,我们必须要知道的是用继承是,必须有一个基类,也就是说,我们要继承一个类的样式,首先这个样式要存在。继承可以让代码变得精简,以为使用继承我们会把所有相同的类都合并在一起。

但是继承最大的问题就是,如果是由后代选择器去继承一个后代选择器

比如

的到的结果却是:

出现的很混乱。

所以最好是一个简单类去继承一个类,或者只继承简单类


6、%和继承的区别就是,

%的定义的类不会编译,而继承必须有一个基类。


明天计划的事情:(一定要写非常细致的内容) 

继续任务14
遇到的问题:(遇到什么困难,怎么解决的) 

暂无
收获:(通过今天的学习,学到了什么知识)

对于sass的熟练使用


返回列表 返回列表
评论

    分享到