一、变量
对于开发者,变量应该是我们最好的朋友。如果你要重复的使用一个信息(本例中就是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 { … }
}
}
}
}
原文:http://www.cnblogs.com/zengjie123/p/4660259.html