给大家带来CSS教程:LESS和Sass配合点和区分

只看该作者 · 发表于 2015-1-15 23:13:59

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
破洛洛文章简介：LESS先容及其与Sass的差别.
原文：LESS先容及其与Sass的差别
译自：AnIntroductionToLESS,AndComparisonToSass
原JeremyHixon
请尊敬版权，转载请说明来历，多谢！
自从一个月前我偶尔发明LESS以后我就入手下手刚强的利用它了。CSS自己对我来讲历来不是成绩，可是我很猎奇利用变量来沿着一个调色盘为我的网站或模板创立一些器材的设法。具有一个供应流动数目选项可选的色盘可让我制止色彩太腾跃以致于从一个已定的作风中离开。

登录/注册后可看大图

现实证实，LESS——和Sass——功效比这个要多太多。LESS和Sass在语法上有些个性，好比上面这些：

混进(Mixins)——class中的class；
参数混进——能够传送参数的class，就像函数一样；
嵌套划定规矩——Class中嵌套class，从而削减反复的代码；
运算——CSS顶用上数学；
色彩功效——能够编纂色彩；
名字空间(namespace)——分组款式，从而能够被挪用；
感化域——部分修正款式；
JavaScript赋值——在CSS中利用JavaScript表达式赋值。

LESS和Sass的次要分歧就是他们的完成体例，LESSS是基于JavaScript，以是，是在客户端处置的。
另外一方面，Sass是基于Ruby的，然后是在服务器端处置的。良多开辟者不会选择LESS由于JavaScript引擎必要分外的工夫来处置代码然后输入修正过的CSS到扫瞄器。关于这个有良多种体例，我选择的是只在开辟环节利用LESS。一旦我完成了开辟，我就复制然后粘贴LESS输入的到一个紧缩器，然后到一个独自的CSS文件来替换LESS文件。另外一个选择是利用LESS.app来编译和紧缩你的LESS文件。两个选择都将最小化你的款式输入，从而制止因为用户的扫瞄器不撑持JavaScript而大概引发的任何成绩。只管这不年夜大概，但终回是有大概的。
LESSIsMore

先容

在你的项目中引进LESS很复杂：

下载less.js;
创立一个文件来放你的款式，好比style.less;
增加以下代码到你的HTML的<head>中:

<linkrel="stylesheet/less"type="text/css"href="styles.less"><scriptsrc="less.js"type="text/javascript"></script>

复制代码

请注重link的rel属性。你必要在属性值的最初面利用/less以使LESS起感化。然后在link前面引进scirpt也是必需的。假如你在用HTML5语法——为何不必呢？——你能够省往type=”text/css”和type=”text/javascript”。
实在也有一个服务器真个LESS版本。在服务器上安装LESS的最复杂的举措就是利用NodePackageManager(NPM，一看就晓得是基于Node.js的)。
变量

假如你是个开辟者，变量应当是你最好的伴侣。假如你要反复的利用一个信息(本例中就是color)，将它设置为一个变量就能够。如许，你就能够包管本人的分歧性并大概削减转动代码来查找色彩值、复制、粘贴等烦琐的事情了。你乃至能够加大概减一些你必要衬着的HEX值到这些色彩下面。看下例子：

123

复制代码

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

复制代码

假如我们将这些款式使用到3个div下面，我们就能够看到由加上和减失落的HEX值构成的突变的效果：

登录/注册后可看大图

从@light_blue到@blue到@dark_blue的突变效果
关于变量在LESS和Sass中的独一区分就是，LESS用@，Sass用$。同时另有一些感化域上的不同，我前面会提到。
混进(mixin)

偶然，我们会创立一些会在款式表中反复利用的款式划定规矩。没有人会制止你在一个HTML的元素中利用多个class，可是你能够用LESS，在款式表中完成。为了形貌这一点，我写了一点儿例子：

1234567891011

复制代码

.border{border-top:1pxdotted#333;}article.post{background:#eee;.border;}ul.menu{background:#ccc;.border;}

复制代码

这能够给到你与你在两个元素平分别增加.borderedclass一样的效果——并且仅仅在款式表中就完成了。并且它事情的很好：

登录/注册后可看大图

笔墨和无序列表都被用上了边框款式
在Sass中，你要在款式划定规矩后面增加@mixin声明，划定它是个嵌套。然后，经由过程@include来挪用它：

1234567891011

复制代码

@mixinborder{border-top:1pxdotted#333;}article.post{background:#eee;@includeborder;}ul.menu{background:#ccc;@includeborder;}

复制代码

参数混进

就像在CSS中有函数功效一样，这些关于那些在如今的CSS事情中过剩的事情十分有效。最好和最有效的例子就是我们正在履历的从CSS2到CSS3过度过程中的良多扫瞄器公有前缀。Nettuts+有一篇JeffreyWay写的很赞的视频和文章，内容是包括着由有效的参数构成的文件，他们涵盖了年夜部分利用各个扫瞄器公有前缀的CSS3属性。比方，在他们的格局中，一个复杂的处置圆角的mixin是如许的：

12345

复制代码

.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来挪用。
选择器承继

这个器材LESS并没有供应。经由过程这个功效，你能够将一个选择器附加到已事后界说的选择器上，而无需再利用逗号将二者分隔的写法了：

1234567891011

复制代码

1230

复制代码

嵌套划定规矩

在css中嵌套class和ID是制止你的款式搅扰大概被其余款式搅扰的独一办法了。可是这大概会很混乱。利用一个相似于#site-body.post.post-headerh2的选择器毫无吸引力并且会占用大批不用要的空格。利用LESS，你能够嵌套id、class和标签。关于后面提到的例子，你能够如许写：

1234567891011

复制代码

1232

复制代码

下面的代码终极和下面的例子（那一长串的选择器）的效果一样，可是要更简单浏览和了解的多，并且它占用很少的空间。你也能够经由过程&来援用元素款式到他们的伪元素上，该功效相似于JavaScript中的this。
运算

这多是你所希冀的：利用数字大概变量在你的款式表中完成数学运算！

12345

复制代码

1234

复制代码

声明下，我也意想到我能够除以4来取得@quarter_page变量，可是这里我只是想要演示下圆括号构成“运算按次”在这里也是能够用的。在利用简写的划定规矩中，小括号也是必需的，好比border:(@width/2)solid#000。
Sass在数字上比LESS更专业。它已能够换算单元了。Sass能够处置没法辨认的器度单元并将其输入。这个特征很分明是一个对将来的实验——证实W3C作出的一些改动。

12345

复制代码

1236

复制代码

Color函数

在文章开首，我提到了LESS怎样帮我在编码过程当中处置环绕着一个调色板。对此奉献最年夜的一部分就是色彩函数。到场你用一个尺度的蓝色贯串到你的款式中，然后你想要在表单顶用这个蓝色来做一个突变的按钮。你能够翻开Photoshop大概别的的编纂器来猎取一个比蓝色较浅的大概较暗的HEX色值来作为突变色。大概，你能够只是利用LESS中的色彩函数。

1237

复制代码

1238

复制代码

lighten函数很分明就是用百分比值来加重色彩，在这个例子中，它将加重这个基本的蓝色的10%。这类办法可让我们变更的元素大概别的任何元素的色彩值——只是复杂的改动基本色彩罢了。这关于主题(模板)来讲十分有效。并且，假如你利用参数功效，像下面提到的，你还能够更复杂的使用到一些扫瞄器公有前缀的声明中，好比：.linear-gradient(lighten(@blue),@blue,100%);。
嗯，终极的效果切实其实很赞：

登录/注册后可看大图

很赞的突变的、基于变量的”Submit”按钮
另有良多别的的色采函数，好比变暗大概调剂色彩的饱和度，乃至你能够扭转色盘来利用别的色彩。我倡议亲身实验下你能想出的（用法）。
Sass貌似有更多的选项——但我其实不必要这么多。我团体最经常使用的仍是lighten和darken。假如你想懂得更多，能够看一下这篇很具体的先容。
前提语句与把持

这是一个切实其实很赞的东东，也是另外一个LESS不撑持的功效。利用Sass，你可使用if{}else{}前提语句，和for{}轮回。它乃至撑持and、or和not，和<、>、<=、>=和==等操纵符。

1239

复制代码

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

复制代码

名字空间(Namespaces)

名字空间能够用于构造我们的CSS到另外一个层次，我们能够将一些公用的款式分组，然后在用的时分间接利用。比方，假如我们创立了一个名为default的款式分组，我们就能够在用到的时分间接从该组中挪用。

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

复制代码

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

复制代码

然后，在我们的代码中，假如我们恰好在一个nav元素中利用了ul元素，我们就会想到我们必要default款式。那末我们就能够复杂的挪用它，它也会被间接使用。

123

复制代码

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

复制代码

感化域

感化域是编程中的标配，LESS中也是。假如你在你款式表的root级声明一个变量，它在全部文档中都是能够用的。但是，假如你在一个选择器，好比id大概class中，从头界说了这个变量，那末，它就只能在这个选择器中可用了——固然是从头界说后的新值。

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

复制代码

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

复制代码

由于我们在#header中从头界说了color变量，变量的值将会是分歧的并且只会在该选择器中无效。它之前大概以后的一切中央，假如没有被从头界说，城市坚持谁人原始的值。
感化域在Sass中稍有分歧。在下面的代码中，当@color变质变为白色后，代码中，此处以后的该变量的值，将会被重写（成为白色）。
正文

这一部分对照基本。LESS中同意两种正文写法。尺度的CSS正文，/*comment*/，是无效的，并且可以经由过程处置并准确输入。当行正文，//comment，一样能够用可是不克不及够经由过程处置也不克不及被输入，然后，了局是，“无声的”。
导进

导进也相称切合尺度。尺度的@import:‘classes.less’;处置的很好。但是，假如你想要导进别的的LESS文件，那末文件的扩大名是可选的，以是@import‘classes’;也是可行的。假如你想要导进一些无需LESS处置的内容，你可使用.css扩大(好比，@import:‘reset.css’;)。
字符串拔出

字符串也是能够用于变量中的，然后经由过程@{name}来挪用。

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

复制代码

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

复制代码

本义(Escaping)

大概偶然会必要引进一个CSS中不法大概LESS没法辨认的值。一般是一些IE的hack。要制止抛出非常并损坏LESS，你将必要避开它们。

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

复制代码

12345678910110

复制代码

JavaScript赋值

这是LESS中我最中意的部分：在款式表中利用Javascript——相称出色。你可使用表达式，也能够参考情况偏向来利用反单引号。

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

复制代码

12345678910112

复制代码

输入格局

但是LESS并没有输入设置，而Sass供应4中输入选项：nested,compact,compressed和expanded。
结语

这两个办法有良多配合点。对写代码的计划师来讲它们都是很玄的工具，它们也能够匡助开辟者更无效和疾速的事情。假如你是Ruby或HAML的粉丝，那末Sass会是你的好助手。对我来讲，一个PHP和JavaScript极客，我偏向于LESS，由于它便于引进和可以利用JavaScript的表达式和文档属性。我嫌疑我乃至靠近真正了解在款式表中编程的大概行了，可是我仍保持实验。假如你在事情中有效到它们中的一个，大概两个都用，我很愿意听到关于它的更多内容，并看到你的功效。固然，技能、窍门、改正一向是很接待的。。
译注：翻译的有些仓皇，假如有毛病大概不当的中央，接待指出。mixin这个单词，这里直译为“混进”了，不外感到也不太符合，查了很久也没有见到十分符合的翻译，这里求达人指导。别的，不晓得甚么缘故原由，lesscss.org貌似在贵国没法会见，人人能够间接会见LESS在git上的堆栈，http://github.com/cloudhead/less.js，该项目标wiki也有和官方网站一样的文档，必要的话能够具体浏览下。——神飞
</p>
CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。

只看该作者 · 发表于 2015-1-17 20:50:26

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-1-25 19:08:34

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-2-3 19:53:46

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

只看该作者 · 发表于 2015-2-9 05:28:50

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-3-8 21:55:49

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

仓酷云 · 发表于 2015-3-16 19:13:53

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

只看该作者 · 发表于 2015-3-23 04:51:38

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来CSS教程:LESS和Sass配合点和区分

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子