Sass学习之路(8)——拓展/继承/占位符
来源:互联网 发布:jira mac 破解版下载 编辑:程序博客网 时间:2024/06/10 21:17
1.拓展/继承
Sass中和CSS一样,也具有继承的用户,也是继承类中的样式代码块。Sass中是通过关键词"@extend"来继承已存在的类样式块,从而实现代码的继承。
举个栗子:
//SCSS.btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;}.btn-primary { background-color: #f36; color: #fff; @extend .btn;}.btn-second { background-color: orange; color: #fff; @extend .btn;}这里.btn-primary和.btn-second都继承了.btn中的代码,编译之后如下:
//CSS.btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;}.btn-primary { background-color: #f36; color: #fff;}.btn-second { background-clor: orange; color: #fff;}从代码中可以看出,继承之后的代码编译出来的CSS中,出色地讲样式相同的选择器合并在了一起,这算是继承与混合宏比较最大的优点。
2.占位符 %placeholder
占位符也是一个非常强大的功能,和继承也有着密切的关系。比如说,我们有多个类都有相同的代码共有,需要继承同一个基类。但是基类本身并不存在或者基类自身并不需要这些样式,那么像上边继承的写法有产生了代码的冗余,最终会编译出多余的代码。
这个时候,占位符的作用就体现出来了,用占位符声明的代码,在不被@extend调用的情况下,是不会产生任何代码的,举个栗子:
%mt5 { margin-top: 5px;}%pt5{ padding-top: 5px;}.btn { @extend %mt5; @extend %pt5;}.block { @extend %mt5; span { @extend %pt5; }}上边我们用占位符声明了两个用来被继承的类%mt5和%pt5,在再让我们来看看编译后的代码吧:
//CSS.btn, .block { margin-top: 5px;}.btn, .block span { padding-top: 5px;}我们会发现,编译后的代码和上边的继承一样,出色的完成了代码合并,且基类并没有被编译出来,只作用与调用了它的类中。
3.混合宏、继承、占位符的比较:
混合宏:可以传参数,但是代码冗余,相同样式不会合并选择器。所以适合在我们多次使用相同样式,但是值不同的情况下使用。
继承:不能传参数,代码会自动合并,不会冗余。适合于不需要传参的情况下复用代码,并且基类代码具有作用的情况。
占位符:同上,但是区别是在基类没有作用的情况下使用。
1 0
- Sass学习之路(8)——拓展/继承/占位符
- sass继承 %占位符placeholder
- Sass学习之路(1)——Sass简介
- Sass学习之路(3)——Sass编译
- Sass学习之路(11)——Sass运算
- sass(混合宏vs继承vs占位符)
- Sass混合宏 VS 继承 VS 占位符的使用
- [Sass]混合宏 VS 继承 VS 占位符
- Sass变量、嵌套、混和宏、继承、占位符
- Sass学习之路(2)——Sass环境安装(windows版)
- Sass学习之路(5)——变量
- Sass学习之路(6)——嵌套
- Sass学习之路(7)——混合宏
- Sass学习之路(9)——插值 #{}
- Sass学习之路(10)——注释、数据类型
- Sass学习之路(12)——控制命令
- Sass学习之路(13)——字符串函数
- Sass学习之路(14)——数字函数
- oracle like使用的一点误区
- MongoDB全版本下载地址
- ArcGIS地图服务发布步骤
- Pingpong/sky 扩展实现 Laravel 多模块化开发
- 交换排序(冒泡,快速排序)
- Sass学习之路(8)——拓展/继承/占位符
- 利用securecrt在linux与windows之间传输文件
- printf 打印
- java线程死锁
- 安卓判断当前网络状态
- Java 8 Stream API features --- map/reduce methods
- 使用JProfiler排查远程应用性能问题
- Android 自定义view之后只能监听到MotionEvent.ACTION_DOWN的解决办法
- 简单轮播图