Sass开发注意点
来源:互联网 发布:qq抢红包软件 编辑:程序博客网 时间:2024/06/15 06:25
避免选择器嵌套:
选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
选择器越具体则声明语句越冗长,而且对最近选择器的引用(&)也越频繁。在某些时候,出现混淆选择器路径和探索下一级选择器的错误率很高,这非常不值得。
混合宏
在 Sass 中通过 @mixin 关键词声明了一个混合宏,那么在实际调用中,其匹配了一个关键词“@include”来调用声明好的混合宏。
@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px;}.box { @include border-radius; margin-bottom: 5px;}.btn { @include border-radius;}
继承 @extend
在 Sass 中也具有继承一说,也是继承类中的样式代码块。在 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;}
编译后
//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;}
占位符 %
Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。
//SCSS%mt5 { margin-top: 5px;}%pt5{ padding-top: 5px;}.btn { @extend %mt5; @extend %pt5;}.block { @extend %mt5; span { @extend %pt5; }}
编译后(代码相同的会自动整合)
//CSS.btn, .block { margin-top: 5px;}.btn, .block span { padding-top: 5px;}
阅读全文
0 0
- Sass开发注意点
- Android开发注意点
- 项目开发注意点
- Android开发注意点
- IOS开发注意点
- Android 开发注意点
- django开发注意点
- 开发中注意点
- 开发注意点
- CEF3 开发注意点
- Android开发注意点
- Django 开发注意点
- socket开发注意点
- angular开发注意点:
- 开发注意点
- USB cdrom开发注意点
- Android 开发相关注意点
- PHP开发SOAP注意点
- 南阳oj第91题(阶乘之和)
- 最长公共子序列(LCS)的C++实现
- android之解析json
- linux-samba服务器配置
- hdu2031 进制转换(C语言)
- Sass开发注意点
- JavaSeript实现摄像头拍照预览
- faster RCNN的Python的画出来loss曲线图
- JFinal数据库连接及访问
- Linux常用命令
- Git相关知识(3)
- pyhton字符编码问题--decode和encode方法
- java-成员内部类
- libev源码解析——调度策略