CSS教程:LESS和Sass共同点和区别

还有很多其它的色彩函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的（用法）。

Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多，可以看一下这篇很详细的介绍。

条件语句与控制

这是一个的确很赞的东东，也是另一个LESS不支持的功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。

1
2
3
4
5
6
7
8
9
10
11
12
13

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
	background-color: #000;
} @else {
	background-color: #fff;
}
 
/* Sample Sass "for" loop */
@for $i from 1px to 10px {
	.border-#{i} {
	border: $i solid blue;
	}
}

名字空间(Namespaces)

名字空间可以用于组织我们的CSS到另一个档次，我们可以将一些公用的样式分组，然后在用的时候直接使用。例如，如果我们创建了一个名为default的样式分组，我们就可以在用到的时候直接从该组中调用。

1
2
3
4
5
6
7
8

#defaults {
	.nav_list () {
		list-style: none;
		margin: 0; padding: 0;
	}
	.button () { … }
	.quote () { … }
}

然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。

1
2
3

nav ul {
	#defaults > .nav_list;
}

作用域

作用域是编程中的标配，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。

1
2
3
4
5
6
7
8

@color: #00c; /* 蓝色 */
#header {
	@color: #c00; /* red */
	border: 1px solid @color; /* 红色边框 */
}
#footer {
	border: 1px solid @color; /* 蓝色边框 */
}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!