CSS预处理 Less和Sass总结

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循环

看一个例子，原理是递归：

结果：

扫描二维码关注公众号，回复： 12797410 查看本文章

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预处理器框架