使用Sass预定义一些常用的样式,非常方便

opspider 2014-06-04

CSS预处理技术现在已经非常成熟,比较流行的有LessSass,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;
}

相关推荐

zengni / 0评论 2019-12-15

CoderChang / 0评论 2014-06-04
aiolos / 0评论 2015-03-09

buttonChan / 0评论 2019-07-18