使用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;

}

使用Sass预定义一些常用的样式，非常方便,布布扣,bubuko.com