less和scss

一、变量

对于开发者，变量应该是我们最好的朋友。如果你要重复的使用一个信息(本例中就是color)，
将它设置为一个变量就可以。这样，就可以保证自己的一致性并可能减少滚动代码来查找颜色值、
复制、粘贴等繁琐的工作了。你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面。

看下例子：

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

二、混入(mixin)

偶尔，我们会创建一些会在样式表中重复使用的样式规则。可以用LESS，在样式表中完成。

例子：

.border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
.border;
}

ul.menu {
background: #ccc;
.border;
}
这可以给到你与你在两个元素中分别添加.bordered class同样的效果——而且仅仅在样式表中就完成了。

在Scss中，你要在样式规则前面添加@mixin声明，规定它是个嵌套。然后，通过@include来调用它：

@mixin border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
@include border;
}
ul.menu {
background: #ccc;
@include 

}

三、参数混入

就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子
就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

在这个例子中，.border-radius有个默认的3px的圆角，但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。

Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。

嵌套规则

在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。
使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。
使用LESS，可以嵌套id、class以及标签。

例子：

#site-body { …
.post { …
.post-header { …
h2 { … }
a { …
&:visited { … }
&:hover { … }
}
}
}
}

转载于:https://www.cnblogs.com/zengjie123/p/4660259.html