less和scss
2015-11-08 10:57 指尖流连 阅读(484) 评论(0) 编辑 收藏 举报##居中布局:
maring和padding,没有继承。
浏览器解析css是从右往左。
尽量减少复合元素。
背景自适应:背景居中:background-position: cenlter,0. cenlter是上下 ,0是左右
父元素,设line-heighe,子元素图片设置vertical-align:middle;
##字体:
字体有修饰,衬线字体不适合页面
五衬线字体:无修饰,如:font-family:Arial;
##11.6 less和scss
less与scss可以实现代码精简,代码重用,加入了函数,变量,方法的一种CSS扩展技术。
scss和sass的区别:scss有花括号{}。
scss变量符号:$ 变量后面加入!default,默认值,在其他地方可以修改
less变量符号:@
$color:red; !default. color是变量,red是值 ,!default.默认
特殊变量:如果要放在选择器或属性中间,一定要使用特殊变量。 #{变量}
获取集合:nth(),函数,根据下标得到数组中的某个元素
map键值对,把变量写成键值对。
语法:$map:(a1:10px,a2:20px,a3:30px);
获取值:width:map_get($map,a1);
map-get();
嵌套: 属性和选择器。
&符号:&:hover.表示当前元素父元素,去掉hover前的空格
@at-root:span,span跳出父元素,span没有父元素
属性嵌套:
border:{top:1px solid red};border后面加上:就是属性属性嵌套,不加就是元素嵌套。
继承和混合:
继承:如果重用内容没有参数就用继承。
混合:如果重用内容有参数就用混合。
混合:
@mixin关键字
元素使用:@include关键字,加上@mixin后面的值。
@mixin whb{$w,$e,$b
width:$w;
height:$h;
border:$b;
}
使用:
div{
@inclade.whb(10px,10px,1px solid red); 引用。
}
继承:@extend关键字
h1{font-size:20px}
h2{@extend.h1};
在h1前面加入%,继承h2里的h1也加入%,可以隐藏h1但继承内容还在。