SS预处理技术现在已经非常成熟，比较流行的有Less，Sass，Stylus，在开发过程中提升我们的工作效率，缩短开发时间，方便管理和维护代码，可以根据自己的喜好选择一款自己喜欢的工具开发，使用很接近，差别很小，语法类似。再选择一款编译工具koala， 国产工具，koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效 地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。还可以在node.js里编译。我使用的是SASS，使用 SASS+Compass完胜LESS。
常用CSS预定义：
1：ellipsis，省略号，当超过宽度时，显示省略号：
|
1
2
3
4
5
6 |
@mixin ell() { overflow: hidden;-ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap;} |
2：display:inline-block;IE6,7块级元素对inline-block支持不好，需要触发Layout；内联元素就不需要了。
|
1
2
3
4
5 |
@mixin dib() { display: inline-block; *display: inline; *zoom: 1;} |
3：清除浮动，貌似最完美的解决方案
|
1
2
3
4
5
6
7
8
9
10
11
12 |
/* clearfix */@mixin clearfix { &:after { clear: both; content: ‘\20‘; display: block; height: 0; line-height: 0; overflow: hidden; } *height: 1%;} |
4：最小高度，IE6不支持min-height，但是使用height能达到一样的效果
|
1
2
3
4
5
6 |
/* minheight */@mixin minHeight($min-height) { min-height: $min-height; height: auto !important; height: $min-height;} |
5：使用纯CSS现实三角形，兼容所有浏览器；使用了三个参数，第一个是"方向"，第二个是"大小"，第三个是"颜色"，省得每次都写一大堆代码，非常方便啦；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 |
/* 箭头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
|
1
2
3 |
.arrow{ @include arrow(bottom,10px,#F00);//向下，10px大小，红色箭头，立马出现 使用@include导入} |
编译结果：
|
1
2
3
4
5
6
7
8
9
10
11
12 |
.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预定义一些常用的样式，非常方便（转）,布布扣,bubuko.com
原文地址：http://www.cnblogs.com/xupeiyu/p/3767530.html
