css和less区别

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言
（1）变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
less源码

@color: #4D926F;
#header {
    color: @color;
}
h2 {
    color: @color;
}

less编译后

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

（2）混合（Mixins）：混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
less源码

.rounded-corners (@radius: 5px) {     //泪如雨下啊：有了这个函数，以后再也不用每个样式里面写那么多兼容了，每次调用时只要传入一个参数.rounded-corners(8px)   .rounded-corners(10px)
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

css源码

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}