《
CSS教程 LESS和Sass共同点和区别》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333U2013.htm
在你的名目中引入LESS很简单：
1 2 3 4 5 6 7 8
@color: #00c,CSS教程 CSS让网页文字自动隐藏; /* 蓝色 */ #header { @color: #c00; /* red */ border: 1px solid @color; /* 红色边框 */ } #footer { border: 1px solid @color; /* 蓝色边框 */ }
因为我们在#header中重新定义了color变量，变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有处所，如果没有被重新定义，都会坚持那个原始的值。
1 2 3 4 5 6 7 8
.class { filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)"; } /*实际上将会输出下面的代码: */ .class { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); } JavaScript 赋值
这是LESS中我最中意的部门：在样式表中使用Javascript——相称出色。你可以使用抒发式，也可以参考环境方向来使用反单引号。
从@light_blue到@blue到@dark_blue的渐变效果
在Sass中，你要在样式规则前面添加@mixin声明，划定它是个嵌套。然后，通过@include来调用它：
如果你是个开发者，变量应当是你最好的友人。如果你要反复的使用一个信息(本例中就是color)，将它设置为一个变量就可以。这样，你就可以保障本人的一致性并可能减少转动代码来查找颜色值、复制、粘贴等繁琐的工作了。你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面。看下例子：
这可能是你所冀望的：应用数字或者变量在你的款式表中实现数学运算！
导入也相称合乎标准。尺度的 @import: ‘classes.less’; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩大名是可选的，所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import: ‘reset.css’;)。
文字和无序列表都被用上了边框样式
1 2 3 4 5 6 7 8
@string: `'howdy'.toUpperCase()`; /* @string 变成 'HOWDY' */ /* 你也可以使用前面提到的插值： */ @string: 'howdy'; @var: ~`'@{string}'.topUpperCase()`; /* 变为 'HOWDY' */ /* 获取文档的信息 */ @height = `document.body.clientHeight`; 输出格局
然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。
另一方面，Sass是基于Ruby的，然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额定的时光来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦我完成了开发，我就复制然后粘贴LESS输出的到一个紧缩器，然后到一个独自的CSS文件来替换LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出，从而避免因为用户的浏览器不支持JavaScript而可能引起的任何问题。只管这不大可能,CSS教程 clip属性完全解答，但终归是有可能的。
Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。
结语
还有良多其它的颜色函数，比方变暗或者调剂颜色的饱和度，甚至你可以旋转色盘来使用其它色彩。我倡议亲身尝试下你能想出的（用法）。
1 2 3
nav ul { #defaults > .nav_list; } 作用域
作用域是编程中的标配，LESS中也是。如果你在你样式表的root级申明一个变量，它在全部文档中都是可以用的。然而，如果你在一个挑选器，好比id或者class中，从新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。
Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的仍是lighten和darken。如果你想懂得更多，可以看一下这篇很具体的先容。
这是一个的确很赞的东东，也是另一个LESS不支持的功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }轮回。它甚至支撑 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。
1 2 3 4 5 6 7 8 9 10 11
@mixin border { border-top: 1px dotted #333; } article.post { background: #eee; @include border; } ul.menu { background: #ccc; @include border; } 参数混入
就像在CSS中有函数功能一样，这些对于那些在当初的CSS工作中过剩的工作无比有用。最好和最有用的例子就是我们正在阅历的从CSS2到CSS3过度过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包括着由有用的参数组成的文件，他们涵盖了大部分使用各个阅读器私有前缀的CSS3属性。例如，在他们的格式中，一个简单的处理圆角的mixin是这样的：
运算
实在也有一个服务器真个LESS版本。在服务器上装置LESS的最简单的措施就是使用Node Package Manager (NPM，一看就知道是基于Node.js的)。
1 2 3 4 5 6 7 8 9 10 11
.border { border-top: 1px dotted #333; } article.post { background: #eee; .border; } ul.menu { background: #ccc; .border; }
这可以给到你与你在两个元素中分辨增添.bordered class同样的效果——而且仅仅在样式表中就实现了。而且它工作的很好：
译注：翻译的有些匆促，如果有过错或者不妥的地方，欢迎指出。mixin这个单词，这里直译为“混入”了，不外感到也不太合适，查了良久也没有见到十分适合的翻译，这里求达人指导。另外，不晓得什么起因，lesscss.org貌似在贵国无法拜访，大家可以直接访问LESS在git上的仓库，
变量
1 2 3 4 5
.border-radius( @radius: 3px ) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
在这个例子中，.border-radius有个默认的3px的圆角，然而你能够使用你须要的任何值。.border-radius(10px)将会天生半径为10px的圆角。
Tag：CSS教程 ,
CSS控制表格或单元格强制换行,防止表格被英文单; LESS Sass CSS教程 LESS Sass
下载less.js; 创立一个文件来放你的样式，比如style.less; 增加以下代码到你的HTML的<,
css控制定位的要素;head>,
CSS控制input标签需要注意的问题;中:
导入
1 2
@base_url : ''; background-image: url("@{base_url}/images/background.png"); 本义(Escaping)
可能偶然会需要引入一个CSS中非法或者LESS无奈辨认的值。通常是一些IE的hack。要避免抛出异样并损坏LESS，你将需要避开它们。
注释
对于变量在LESS和Sass中的独一差别就是，LESS用@，Sass用$。同时还有一些作用域上的差异，我后面会提到。
这两个办法有许多独特点。对写代码的设计师来说它们都是很玄的工具，它们也可以辅助开发者更有效和疾速的工作。如果你是Ruby或HAML的粉丝，那么Sass会是你的好助手。对我来说，一个PHP和JavaScript极客，我偏向于LESS，由于它便于引入和可能使用JavaScript的表白式以及文档属性。我猜忌我甚至濒临真正懂得在样式表中编程的可能行了，但是我仍保持尝试。如果你在工作中有用到它们中的一个，或者两个都用，我很愿意听到关于它的更多内容，并看到你的结果。当然，技能、窍门、更正始终是很欢送的。。
嗯，终极的效果确实很赞：
Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特征很显明是一个对将来的尝试——证实W3C作出的一些转变。
很赞的渐变的、基于变量的&rdquo,CSS控制H1不换行;Submit”按钮
事实证明，LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性，比如下面这些：
自从一个月前我偶尔发明LESS之后我就开端动摇的使用它了。CSS自身对我来说素来不是问题，但是我很好奇使用变量来沿着一个调色盘为我的网站或模板创建一些东西的主意。领有一个提供固定数目选项可选的色盘可以让我避免颜色太跳跃甚至于从一个已定的作风中脱离。
1 2 3 4 5
/* Sass */ 2in + 3cm + 2pc = 3.514in /* LESS */ 2in + 3cm + 2pc = Error Color函数
在文章开头，我提到了LESS如何帮我在编码进程中处理缭绕着一个调色板。对此奉献最大的一局部就是颜色函数。参加你用一个标准的蓝色贯串到你的样式中，然后你想要在表单顶用这个蓝色来做一个渐变的按钮。你可以翻开Photoshop或者其它的编纂器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者，你可以只是使用LESS中的颜色函数。
作用域在Sass中稍有不同。在上面的代码中，当@color变质变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。
1 2 3 4 5
@base_margin: 10px; @double_margin: @base_margin * 2; @full_page: 960px; @half_page: @full_page / 2; @quarter_page: (@full_page / 2) / 2;
声明下，我也意识到我可以除以4来取得@quarter_page变量，但是这里我只是想要演示下圆括号组成“运算次序”在这里也是可以用的。在使用简写的规则中，小括号也是必须的，比如 border: (@width / 2) solid #000。
LESS跟Sass的重要不同就是他们的实现方法，LESSS是基于JavaScript，所以，是在客户端处置的。
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的样式分组，我们就可以在用到的时候直接从该组中调用。
混入(mixin)
1 2 3
@blue: #00c; @light_blue: @blue + #333; @dark_blue: @blue - #333;
如果我们将这些样式运用到3个div上面，我们就可以看到由加上和减掉的HEX值构成的渐变的效果：
选择器继续
LESS Is More 介绍
1 2 3 4 5 6 7 8 9 10 11
.menu { border: 1px solid #ddd,CSS技巧教程 css书写技巧; } .footer { @extend .menu; } /* 上面的写法规则和下面的后果是一样的： */ .menu, .footer { border: 1px solid #ddd; } 嵌套规矩
在css中嵌套class和ID是防止你的样式干扰或者被别的样式烦扰的唯一方式了。但是这可能会很混乱。使用一个相似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大批不用要的空格。使用LESS，你可以嵌套id、class以及标签。对前面提到的例子，你可以这样写：
这一部分比拟基本。LESS中容许两种注解写法。标准的CSS解释，/* comment */，是有效的，而且能够通过处理并准确输出。当行正文，// comment，同样可以用但是不可以通过处理也不能被输出，然后，成果是，“无声的”。
字符串插入
1 2 3 4 5 6 7 8 9 10 11
#site-body { … .post { … .post-header { … h2 { … } a { … &:visited { … } &:hover { … } } } } }
上面的代码最终和上面的例子（那一长串的选择器）的效果一样，但是要更轻易浏览和理解的多，而且它占用很少的空间。你也可以通过&来援用元素样式到他们的伪元素上，该功能类似于JavaScript中的this。
字符串也是可以用于变量中的，然后通过@{name}来调用。
前提语句与把持
这个货色LESS并不供给。通过这个功效，你可以将一个取舍器附加到已经预先定义的抉择器上，而无需再使用逗号将两者离开的写法了：
偶然，我们会创建一些会在样式表中重复使用的样式规则。没有人会禁止你在一个HTML的元素中使用多个class，但是你可以用LESS,CSS技巧总结，在样式表中完成。为了描写这一点，我写了一点儿例子：
--> [
网站建设之]CSS教程:LESS和Sass共同点和区别
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
请留神link的rel属性。你需要在属性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必需的。如果你在用HTML5语法——为什么不必呢？——你可以省去type=”text/css”和type=”text/javascript”。
1 2 3 4 5 6 7 8
#defaults { .nav_list () { list-style: none; margin: 0; padding: 0; } ,CSS技巧之圆角背景与三角形.button () { … } .quote () { … } }
而后，在我们的代码中，假如我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么咱们就可以简略的调用它，它也会被直接利用。
1 2 3 4 5 6 7 8 9 10 11 12
@blue: #369; .submit { padding: 5px 10px; border: 1px solid @blue; background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/ background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/ background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/ background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/ background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/ color: #fff; text-shadow: 0 -1px 1px rgba(0,0,0,0.4); }
lighten函数很显著就是用百分比值来减轻颜色，在这个例子中，它将减轻这个基础的蓝色的10%。这种方法可以让我们变更的元素或者其它任何元素的颜色值——只是简单的改变基础颜色罢了。这对于主题(模板)来说异常有用。而且，如果你使用参数功能，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。
混入(Mixins)——class中的class； 参数混入——可以传递参数的class，就像函数一样； 嵌套规则——Class中嵌套class，从而减少重复的代码； 运算——CSS中用上数学； 颜色功能——可以编辑颜色； 名字空间(namespace)——分组样式，从而可以被调用； 作用域——部分修正样式； JavaScript 赋值—&mdash,
css技巧之PDF、ZIP、DOC链接的标注;在CSS中使用JavaScript表达式赋值。
(责任编辑：网站建设)
CSS教程 LESS和Sass共同点和区别相关文章