less基于nodejs编写
sass用ruby写的,用node-sass包解决编译问题
less中变量用@
less中定义mixin
.block
使用:
lessc
命令编译less文件方法:
mixin”属性只能基于现在已有的样式规则!你可以在mixin中使用类选择器和id选择器:
.a,#b{
color: rebeccapurple;
}
.mixin-class{
.a();
}
.mixin-id{
#b();
}
输出:
.a,
#b {
color: rebeccapurple;
}
.mixin-class {
color: rebeccapurple;
}
.mixin-id {
color: rebeccapurple;
}
注意,当调用mixin时,括号是可选的:
.a() //此种写法和下面写法无区别
.a;
不输出的 mixin:
如果你想创建一个mixin,但你不想让mixin在生成css中输出,你可以在它后面加上括号 () :
.my-mixin{
color: black;
}
.my-other-mixin(){
background: wheat;
}
.class{
.my-mixin;
.my-other-mixin;
}
输出:
.my-mixin {
color: black;
}
//此处并没有输出 .my-other-mixin
.class {
color: black;
background: wheat;
}
less
中的extend
:
这里有一个叫block的mixin
:
less中如果多个地方都引用mixin
:
那么最终生成的css里面就会很很多重复的代码:
如果mixin
中代码很多,那么最终生成的重复代码就更多,我们显然不希望这样,解决方案:
使用
extend
结果:
公共样式被提取出来放在一个地方了
单独的样式也有
less
中的loop
循环
看一个例子,原理是递归:
结果:
less模块化
sass中变量用$
sass的mixin
写法和less不太一样:
首先sass的
mixin
必须显示的用@mixin
申明,另外mixin
的名字前面不加点,比如这里是
@mixin block, 不能写成@mixin .block
Less中的mixin看起来既是一个class,又是一个mixin
sass使用上,引用时候需要加上@include
node-sass
命令行编译使用方法
sass
中,这样用extend:
sass
中的loop
循环
sass通过递归写一个网格布局,注意sass中引用变量用#{$n}
,less中引用变量用@{n}
但是!!!!!!!!!!!!!!!
其实sass不必这么麻烦,因为sass支持for循环啊!
sass模块化
总结:
CSS预处理器框架