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

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

时间： 2024-08-19 05:35:05

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

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

CSS预处理技术现在已经非常成熟,比较流行的有Less,Sass,Stylus,在开发过程中提升我们的工作效率,缩短开发时间,方便管理和维护代码,可以根据自己的喜好选择一款自己喜欢的工具开发,使用很接近,差别很小,语法类似.再选择一款编译工具koala,国产工具,koala是一个前端预处理器语言图形编译工具,支持Less.Sass.Compass.CoffeeScript,帮助web开发者更高效地使用它们进行开发.跨平台运行,完美兼容windows.linux.mac.还可以在node.js里编

常用的预定义的宏

常用的预定义的宏 常用的预定义的宏有:__LINE__ 当前源程序行的行号,用十进制整数常量表示 __FILE__ 当前源文件的名称,用字符串常量表示 __DATE__ 编译时的日期,用"MM dd yyyy"形式的字符串常量表示 __TIME__ 编译时的时间,用"hh:mm:ss"形式的字符串常量表示 __STDC__ 当且只当编译器遵循ISO标准时,它的值是十进制常量1 __STDC__VERSION__ 如果编译器遵循C99,则这个宏的值是199901L,其

boostrap预定义样式风格

预定义样式分为五种:primary(首选项).success(成功).info(一般信息).warning(警告).danger(危险),demo如下,设置不同的class展示不同的样式 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档&

Perl常用的预定义变量

Perl提供了大量的预定义变量,下面列举了常用的一些预定义变量: $_                  在执行输入和模式搜索操作时使用的默认空格变量 $.                  文件中最后处理的当前行号 [email protected]                  由最近一个eval()运算符提供的Perl语法报错信息 $!                  获取当前错误信息值,常用于die命令 $$                  正在执行脚本的Perl进程号 $PER

__FILE__,__LINE__,__DATE__,__TIME__ c++常用的预定义名字

C++有四个常用的预定义名字,分别为:__FILE__,__LINE__,__DATE__,__TIME__ __FILE__:记录文件的路径加名称 __LINE__:记录文件已经被编译的行数 __DATE__:记录文件的编译日期 __TIME__:记录文件的编译时间 可以当作变量直接使用,一般用作程序调试 例子: #include <iostream> using namespace std; int main(){     cout << "File = "

五十九、SAP中常用预定义系统变量

一.SAP中常用预定义系统变量 内容如下: 二.系统变量定义在结构SYST里,我们打开SE38 三.在代码编辑器输入SYST变量 四.双击SYST,来到这个系统结构,里面有很多系统变量 五.我们随便写几个试试 六.显示界面如下 原文地址:https://www.cnblogs.com/tianpan2019/p/11221789.html

.NET中那些所谓的新语法之三：系统预定义委托与Lambda表达式

开篇:在上一篇中,我们了解了匿名类.匿名方法与扩展方法等所谓的新语法,这一篇我们继续征程,看看系统预定义委托(Action/Func/Predicate)和超爱的Lambda表达式.为了方便码农们,.Net基类库针对实际开发中最常用的情形提供了几个预定义好的委托,这些委托可以直接使用,无需再重头定义一个自己的委托类型.预定义委托在.Net基类库中使用的比较广泛,比如在Lambda表达式和并行计算中都大量地使用,需要我们予以关注起来! /* 新语法索引 */ 1.自动属性 Auto-Impleme

解析预定义变量的用法

shell编程里有一种变量,很多资料中都把它定义为预定义变量. 工作中最常用到的预定义变量其实就两个: ① $n ② $? 那么接下来,我们先来讲解$n: n是什么?n代表的是数字.简单点说,在脚本中$0表示命令本身,$1-$9表示第1到第9个参数,n为10以上的数字要用{}表示,例如:${10} 来,我们写个脚本吧: 这就是一个简单的求和脚本 至于"$?"更简单了. 输入一条命令,例如:ls 文件夹 如果命令正确,则返回0 如果命令错误,则返回一个数字

PHP预定义接口之 ArrayAccess

最近这段时间回家过年了,博客也没有更新,感觉少学习了好多东西,也错失了好多的学习机会,就像大家在春节抢红包时常说的一句话:一不留神错过了好几亿.废话少说,这篇博客给大家说说关于PHP预定义接口中常用到的重量级人物: ArrayAccess.大家也许会问,最基本.最常用的预定义接口有6个呢,为啥非得说这个.从日常的使用情况来看:这个出现的频率非常高,特别是在框架中,比如Laravel.Slim等都会用到,并且用得非常经典,让人佩服啊.从技术上说:说实话其他的我用的少啊!只是知道简单的用法,对他的理