opspider 2014-06-04
CSS预处理技术现在已经非常成熟,比较流行的有Less,Sass,Stylus,在开发过程中提升我们的工作效率,缩短开发时间,方便管理和维护代码,可以根据自己的喜好选择一款自己喜欢的工具开发,使用很接近,差别很小,语法类似。再选择一款编译工具koala,国产工具,koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。还可以在node.js里编译。我使用的是SASS,使用SASS+Compass完胜LESS。
常用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; }