sass最佳实践
2024-10-10 16:10:24
sass
变量
可以实现统一的布局,比如统一的内边距,统一的外边距,统一的颜色,统一的字号。
嵌套
可以根据组件的嵌套方式来嵌套css代码,方便收缩,查找。代码结构非常清晰,有利于以组件的方式开发
混合
代码重用的时候需要用到,运用混合又会遇到另外一个问题,当相同的代码在不同的地方重新编写,会使代码冗余,比如:
@mixin clearfix{ &:before,&:after{ display:block;
content:'';
height:0;
clear:both;
} } .container{
@include clearfix;
} .tab{
@include clearfix;
}
这个时候,在编译之后的css文件里面,clearfix这段代码其实是重复写了很多次,以下面的编写方式才是对的
@mixin clearfix{ &:before,&:after{ display:block;
content:'';
height:0;
clear:both;
}
} .container,.tab{
@include clearfix;
}
组件
sass编写组件时都是以[class='tab'],[name='tab'],[type='text'],[type='password']的方式来编写,也就是说,不能用ID或者name来编写。
ID或者name一般是用来实例化插件或者供后台程序使用
最新文章
- ios开发证书
- Uva 679 Dropping Balls
- 获取datagrid选择行
- ADO.NET学习系列(二)
- 集成架构:对比 Web API 与面向服务的架构和企业应用程序集成(转)
- 记录nginx 搭建集群环境踏过的坑
- java 内部类2(成员内部类)
- 那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过?
- 一款兼容pc 移动端的tab切换
- [cocos2d] 谁摸了我一下----触摸事件处理
- iOS: 在代码中使用Autolayout (2) – intrinsicContentSize和Content Hugging Priority【转】
- UVaLive5031 Graph and Queries(时光倒流+名次树)
- sass和compass安装
- [笔记]Practical Lessons from Predicting Clicks on Ads at Facebook
- C语言之函数
- PHP MYSQL 搜索周边坐标,并计算两个点之间的距离
- [时序图笔记] 步步为营UML建模系列五、时序图(Squence diagram)【转】
- H2O 笔记之安装
- python 实现排序算法(二)-合并排序(递归法)
- 八皇后问题-dfs