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

SS预处理技术现在已经非常成熟，比较流行的有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: '\20';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;
}

转载于:https://www.cnblogs.com/xupeiyu/p/3767530.html

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

CMake 常用的预定义变量
CMake 常用的预定义变量 PROJECT_NAME : 通过 project() 指定项目名称 PROJECT_SOURCE_DIR : 工程的根目录 PROJECT_BINARY_DIR : 执 ...
ANSI C and Microsoft C++中常用的预定义宏以及宏定义中 # 和 ## 的区别
ANSI C and Microsoft C++中常用的预定义宏以及宏定义中 # 和 ## 的区别第一部分,常见的预定义宏第二部分,# 和 ## 再宏定义中的使用说明第三部分,类似 #prag ...
cmake学习笔记(2)--CMake常用的预定义变量
cmake常用的预定义变量不多,根据经验掌握如下几个就基本上够用了: PROJECT_NAME : 通过 project() 指定项目名称 PROJECT_SOURCE_DIR : 工程的根目录 PR ...
php常见预定义常量,php跨平台小结常用预定义常量
php跨平台总结常用预定义常量 /** * 获得用户操作系统的换行符 * * @access public * @return string */ function get_crlf() { /* ...
跨平台常用的编译器预定义的宏
跨平台常用的宏 #ifdef _WIN32 //define something for Windows (32-bit and 64-bit, this part is common) #ifdef ...
【数据结构必备基本知识】数据结构常用预定义常量、类型及头文件
数据结构中我们经常要用到很多预定义的常量,如果每次自己输入,那就比较麻烦啦,在这里,给大家把常用的预定义常量分享出来,下次再用到,直接复制粘贴就好啦. 一.常用头文件首先自然是常用头文件,因为作者是 ...
Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
一.按钮按钮是网页中不可缺少的一种组件,例如页面中搜索.注册等按钮.按钮还广泛应用于表单.下拉菜单.模态框等场景中. 1.预定义样式类 Bootstrap提供了btn来定义按钮,btn ...
应用程序主题研发有妙招！DevExtreme拥有多种预定义主题样式
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout ...
数据结构常用预定义总结
数据结构常用预定义总结 0. 开始之前在数据结构中,有一些常用的常量和类型需要用到,如下: #define TRUE 1 #define FALSE 0 #define OK 1 #define E ...

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

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

最新文章

热门文章