使用Sass预定义一些常用的样式,非常方便
2014-06-04 10:23
435 查看
CSS预处理技术现在已经非常成熟,比较流行的有Less,Sass,Stylus,在开发过程中提升我们的工作效率,缩短开发时间,方便管理和维护代码,可以根据自己的喜好选择一款自己喜欢的工具开发,使用很接近,差别很小,语法类似。再选择一款编译工具koala,国产工具,koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。还可以在node.js里编译。我使用的是SASS,使用SASS+Compass完胜LESS。
常用CSS预定义:
1:ellipsis,省略号,当超过宽度时,显示省略号:
2:display:inline-block;IE6,7块级元素对inline-block支持不好,需要触发Layout;内联元素就不需要了。
3:清除浮动,貌似最完美的解决方案
4:最小高度,IE6不支持min-height,但是使用height能达到一样的效果
5:使用纯CSS现实三角形,兼容所有浏览器;使用了三个参数,第一个是"方向",第二个是"大小",第三个是"颜色",省得每次都写一大堆代码,非常方便啦;
使用实例:
test.scss
编译结果:
常用CSS预定义:
1:ellipsis,省略号,当超过宽度时,显示省略号:
@mixin ell() { overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; }
2:display:inline-block;IE6,7块级元素对inline-block支持不好,需要触发Layout;内联元素就不需要了。
@mixin dib() { display: inline-block; *display: inline; *zoom: 1; }
3:清除浮动,貌似最完美的解决方案
/* clearfix */ @mixin clearfix { &:after { clear: both; content: '.'; display: block; height: 0; line-height: 0; overflow: hidden; } *height: 1%; }
4:最小高度,IE6不支持min-height,但是使用height能达到一样的效果
/* minheight */ @mixin minHeight($min-height) { min-height: $min-height; height: auto !important; height: $min-height; }
5:使用纯CSS现实三角形,兼容所有浏览器;使用了三个参数,第一个是"方向",第二个是"大小",第三个是"颜色",省得每次都写一大堆代码,非常方便啦;
/* 箭头 arrow(direction, size, color); */ @mixin arrow($direction, $size, $color) { width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; border-width: $size; cursor: pointer; @if $direction == top { border-style: dashed dashed solid dashed; border-color: transparent transparent $color transparent; border-top: none; } @else if $direction == bottom { border-style: solid dashed dashed dashed; border-color: $color transparent transparent transparent; border-bottom: none; } @else if $direction == right { border-style: dashed dashed dashed solid; border-color: transparent transparent transparent $color; border-right: none; } @else if $direction == left { border-style: dashed solid dashed dashed; border-color: transparent $color transparent transparent; border-left: none; } }
使用实例:
test.scss
.arrow{ @include arrow(bottom,10px,#F00);//向下,10px大小,红色箭头,立马出现 使用@include导入 }
编译结果:
.arrow { width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; border-width: 10px; cursor: pointer; border-style: solid dashed dashed dashed; border-color: red transparent transparent transparent; border-bottom: none; }
相关文章推荐
- 使用Sass预定义一些常用的样式,非常方便(转)
- Sass预定义一些常用的样式
- layer的Icon样式以及一些常用的layer窗口使用
- layer的Icon样式以及一些常用的layer窗口使用
- vue中makeMap方法的使用 (定义注册一些值 后期方便使用)
- layer的Icon样式以及一些常用的layer窗口使用
- 记录一些WPF常用样式方便以后复用
- layer的Icon样式以及一些常用的layer窗口使用
- 使用powerdesigner进行数据库设计确实方便,以下是一些常用的设置
- pch文件的使用, 头文件使用, 常量(const)的定义,以及一些常用的宏定义
- 记录一些WPF常用样式方便以后复用(二)(Button、CheckBox、输入账号密码框)(转)
- 记录一些WPF常用样式方便以后复用(转)
- 一些常用的linux命令---方便查询
- 关于web.config的使用和一些常用标记.
- 常用的一些js方法实例 页面取值 坐标 修改样式 弹层 (1)
- 一些非常有用的JAVA常用方法,可以省力很多啊!! xiaoyou [原作]
- PB中使用microsoft Web浏览器控件的一些定义及大体使用说明
- 笔记下UltraEdit的一些常用使用技巧
- 注解的力量 -----Spring 2.5 JPA hibernate 使用方法的点滴整理(六): 一些常用的数据库 注解
- 使用dom4j来处理xml的一些常用方法