首页 > 代码库 > 使用Sass预定义一些常用的样式，非常方便（转）

使用Sass预定义一些常用的样式，非常方便（转）

2024-07-07 02:07:14   224人阅读

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

 


联系
我们