使用Sass預定義一些常用的樣式，非常方便

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;
}