使用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:;
}
3:清除浮动,貌似最完美的解决方案
/* clearfix */
@mixin clearfix {
&:after {
clear: both;
content: '.';
display: block;
height:;
line-height:;
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:;
height:;
line-height:;
font-size:;
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:;
height:;
line-height:;
font-size:;
overflow: hidden;
border-width: 10px;
cursor: pointer;
border-style: solid dashed dashed dashed;
border-color: red transparent transparent transparent;
border-bottom: none;
}
使用Sass预定义一些常用的样式,非常方便的更多相关文章
- Sass预定义一些常用的样式
一.编写sass文件时, 目录不能有中文, 如: E:\\CPC手机, 会报错exception while processing events: incompatible character enc ...
- 使用Sass预定义一些常用的样式,非常方便(转)
SS预处理技术现在已经非常成熟,比较流行的有Less,Sass,Stylus,在开发过程中提升我们的工作效率,缩短开发时间,方便管理和维护代码,可以根据自己的喜好选择一款自己喜欢的工具开发,使用很接近 ...
- boostrap预定义样式风格
预定义样式分为五种:primary(首选项).success(成功).info(一般信息).warning(警告).danger(危险),demo如下,设置不同的class展示不同的样式 <!D ...
- PHP常用的预定义常量
<?php echo 'PHP常用的预定义常量'.'<br><br>'; echo '当前php的版本为(PHP_VERSION):'.PHP_VERSION.'< ...
- bootstrap 预定义样式风格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 五十九、SAP中常用预定义系统变量
一.SAP中常用预定义系统变量 内容如下: 二.系统变量定义在结构SYST里,我们打开SE38 三.在代码编辑器输入SYST变量 四.双击SYST,来到这个系统结构,里面有很多系统变量 五.我们随便写 ...
- 五十八、SAP中常用预定义数据类型
一.SAP中常用预定义数据类型 注意事项如下: 1.默认的定义数据类型是CHAR. 2.取值的时候C型默认从左取,N型从右取,超过定义长度则截断. 3.C类型,可以赋值数值,也可以赋值字符,还可以混合 ...
- PHP预定义接口之 ArrayAccess
最近这段时间回家过年了,博客也没有更新,感觉少学习了好多东西,也错失了好多的学习机会,就像大家在春节抢红包时常说的一句话:一不留神错过了好几亿.废话少说,这篇博客给大家说说关于PHP预定义接口中常用到 ...
- .NET中那些所谓的新语法之三:系统预定义委托与Lambda表达式
开篇:在上一篇中,我们了解了匿名类.匿名方法与扩展方法等所谓的新语法,这一篇我们继续征程,看看系统预定义委托(Action/Func/Predicate)和超爱的Lambda表达式.为了方便码农们,. ...
随机推荐
- Java线程间怎么实现同步
1.Object#wait(), Object#notify()让两个线程依次执行 /** * 类AlternatePrintDemo.java的实现描述:交替打印 */ class NumberPr ...
- zepto中$.proxy()的到底有多强大?
好吧,其实是标题党了,哈哈,只是想总结一下工作中遇到$.proxy()的用法而已. 一.语法: $.proxy()有两种使用语法 1)$.proxy(fn,context),fn是一个函数,conte ...
- AtCoder Regular Contest 076E Coneected?
题意 给出一个矩形区域和上面的m对整点,要求在矩形区域内画m条互不相交的线(可以是曲线)分别把m对点连接起来.只需要输出能不能做到. 分析 假设我们已经画了一条线.因为在这个题中有用的是平面区域之间的 ...
- 【bzoj2257】[Jsoi2009]瓶子和燃料 扩展裴蜀定理+STL-map
题目描述 给出 $n$ 个瓶子和无限的水,每个瓶子有一定的容量.每次你可以将一个瓶子装满水,或将A瓶子内的水倒入B瓶子中直到A倒空或B倒满.从中选出 $k$ 个瓶子,使得能够通过这 $k$ 个瓶子凑出 ...
- java中枚举型的定义以及使用
1.如何定义枚举型 public enum gender{ GEN1("男","1"), GEN2("女","0"); ...
- BZOJ3573 HNOI2014米特运输
显然确定一个点的权值后整棵树权值确定.只要算出根节点的权值就能知道两种改法是否等价. 乘的话显然会炸,取log即可.map似乎会出一些问题,sort即可. #include<iostream&g ...
- QoS专题-第3期-QoS实现之报文简单分类与标记
QoS实现之报文简单分类与标记 上一期专题我们讲到,MQC中的流分类可以实现报文的分类,流行为可以对报文进行重标记,从而实现对流量的精细化差分服务.而优先级映射则可以根据802.1p优先级.DSCP优 ...
- DjangoORM外键操作
Django ORM 外键操作 经常修改的东西一般不放到内存里面,而是放到一张表里.表跟表之间是可以存在关系的,最基本的就是一对多的关系. models.ForeignKey(ColorDic) 1. ...
- 【NOIP2017】列队(Splay)
[NOIP2017]列队(Splay) 题面 洛谷 题解 其实好简单啊... 对于每一行维护一棵\(Splay\) 对于最后一列维护一棵\(Splay\) \(Splay\)上一个节点表示一段区间 每 ...
- NOIP2017 列队 题解报告【56行线段树】
题目描述 Sylvia 是一个热爱学习的女♂孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有n \times mn×m名学生,方阵的行数 ...