css的扩展技术
2015-09-21 00:28
666 查看
CSS的扩展技术 (在原来的CSS语言的基础上扩展了js,可以在里面写js )
[b]一、less[/b]定义: @color:red; //定义颜色 @body-color:blue; @div-color:yellow;
引用:
body{ height:500px; border:1px solid @body-color; //调用了上面的颜色 }
嵌套:
div{ height:500px; border:1px solid @div-color;//这里就直接调用了上面的颜色 p{ color:@p-color; //div里面的p元素的样式 } }
传参:
border(@c){ 1px solid @c }
对border的调用:
.border(red);
[b]二、sass[/b]
sass有两种后缀名文件:
一种后缀名为sass,不使用大括号和分号;
另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。
建议使用:scss.
$fontSize: 12px;
body{
font-size:$fontSize;
}
混合(mixin)
@mixin ($w,$h) {
width:$w;
height:$h;
}
@include opacity(80px,60px);
在sass里面,需要注意的是:
less里面:
.fontSize: 12px;
body{
fontSize: 14px;
font-size:.fontSize; }
p{
font-size:.fontSize; }
会显示:
body{
fontSize: 14px;
}
p{
fontSize: 12px;
}
sass里面:
$fontSize: 12px;
body{
$fontSize: 14px;
font-size:$fontSize; }
p{
font-size:$fontSize; }
会显示:
body{
fontSize: 14px;
}
p{
fontSize: 14px;
}
多参数:
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px)
{
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding; }
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
}
只传一个值,那么调用@include horizontal-line时,会设置 padding-top和 padding-bottom的默认值,
如果@include horizontal-line没有写默认值,那么sass会报错,需要修改@include horizontal-line需要传递的值,或者在.imgtext-h li里面,添加一个值。
所以说,在sass局部定义是变量会影响全局的变量,p元素会根据div内部的定义字体大小的,来设置p元素的字体大小。
在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)
不仅这样,还能做if判断、for循环和三目运算。
@for $i from 1 through 3
{
.item-#{$i}{ width: 2em * $i; }
}
会显示:
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
from 1 through 3是表示从1开始到3结束,只需要修改值,就能实现你需要的几个.item-x,和它的宽度。
三、less和sass的区别
[b]1.实现方式:[/b]Less是基于JavaScript,是在客户端进行处理的;Sass是基于Ruby,是在服务器端进行处理的。
2.定义变量:Less定义变量时使用前缀:@;Sass定义变量时使用前缀:$。
3.混合(Mixins):Less中使用混合时,只需在classB中根据classA的命名来使用;Sass中首先在定义混合时需要使用@mixin命令,其次在调用时需要使用@include命令来引入之前定义的混合。
4.解析方式:Less可以向上/向下解析;Sass只能向上解析。
5.变量的作用域:Less中的变量有全局和局部之分;Sass可以变量可以理解为都是全局的,但可以通过在变量后面跟!default,在引入Sass文件之前改变变量的属性值来解决这一问题。
6.比起Less,Sass中增加了条件语句(if、if...else)和循环语句(for循环、while循环和each循环)还有自定义函数:
相关文章推荐
- css技术扩展
- JS+CSS实现简单的二级下拉导航菜单效果
- CSS扩展技术less
- CSS图片样式
- CSS3特殊伪类::selection改变页面选中文字的样式
- css总结
- 最简单的html+css三列布局
- 【转】CSS样式引入方法
- 【转】详解CSS选择器、优先级与匹配原理
- css下拉导航栏代码
- 简易版网页计算器css页面
- css
- CSS边框标签属性
- 【转】关于diplay学习心得
- 【转】关于 float、position学习心得
- CSS样式及小记
- 样式(style)和主体(theme)的回顾温习
- css选择器中:first-child与:first-of-type的区别
- CSS盒模
- CSS cursor 属性