Css预处理器实践之Sass、Less大比拼
xwei | 2012-07-07 | 网页重构
什么是CSS预处理器?
Css可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量、常量以及一些编程语法,代码难易组织和维护。这时Css预处理器就应运而生了。Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护。 “我应该选择哪种css预处理器?”是最近网上的一大热门话题,很多人为此争论不休。相比过去我们对是否应该使用Css预处理器的话题,这已经是很大的进步了。目前比较流行的两种预处理器是Sass和Less。
至于他们谁更优秀一些:简短的答案是:Sass
稍长一点的答案:Sass比其他任何预处理器语言都好,但如果你正在使用Less,这也很酷!这可以证明你正在使用预处理器来写帮助自己写更好的代码。
非常长的答案:请继续往下看
使用之前需要学习的知识 – Ruby,js,命令行等等
使用Css预处理器唯一真正需要学习的只有语法,SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样可以使用。你需要的只是一个像CudeKit的应用来观察和编译你所撰写的文件。 Less就更不用了,只需要调用一个js即可(在客户端运行),或者借助Node.js(服务器运行)。
获胜者:无。
对css3的帮助
Css3提供了很多新特性,比如渐变、动画、圆角等等,但是在使用这些高级特性的时候,我们往往需要编写浏览器前缀( -moz-、-webkit-、-ms- …)。不论Sass和Less,你都可以用自己的混合来编写浏览器前缀。但是在项目中当我们需要修改这些繁琐的前缀时,我们如何不用返回每一行代码并且更新它们?你大概也不会更新手工混合的文件。但是在Sass中,我们可以使用开源的Css框架Compass,Compass会自动更新并自动处理浏览器前缀。我们只需要保持更新,外加偶尔按一下编译键,它就会帮助我们自动处理所有的前缀问题,毫不费力。
获胜者:Sass。
逻辑/循环
Less可以做防御型混合,这种混合只在条件为真的情况下生效。比如你想根据文本颜色来设置背景色,当文本色比较浅的时候背景色很深,文本色比较深的时候背景色很浅。那么你就得把混合分成两部分,以确保有一种情况条件为真,使混合生效。
.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) {
background: black;
}
.set-bg-color (@text-color) when (lightness(@text-color) < 50%) {
background: #ccc;
}
然后就可以得到想要的背景:
.box-1 {
color: #BADA55;
.set-bg-color(#BADA55);
}
Less模拟循环和递归:
.loopingClass (@index) when (@index > 0) {
.myclass {
z-index: @index;
}
// 递归
.loopingClass(@index - 1);
}
// 停止循环
.loopingClass (0) {}
// 输出
.loopingClass (3);
生成的css代码:
.myclass {z-index: 3;}
.myclass {z-index: 2;}
.myclass {z-index: 1;}
但这也就是Less全部的逻辑和循环处理能力了,而Sass具有真正的语言处理能力。包括if/then/else、for循环、while循环,函数等等。
真正的For循环:
@for $i from 1 through 3{
.item-#{$i}{
width:100px*$i;
}
}
Css:
.item-1{width:100px;}
.item-2{width:200px;}
.item-3{width:300px;}
例如Compass框架有一个叫“background”的混合,它会给你所有你需要的和想要的,并且兼容所有浏览器的代码。
简洁易懂的代码:
.bam {
@include background(
image-url("foo.png"),
linear-gradient(top left, #333, #0c0),
radial-gradient(#c00, #fff 100px)
);
}
现在轮到这个怪物了(不幸的是,我们需要它,看看我们会得到的Css代码吧):
.bam {
background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff));
background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px);
background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);
}
获胜者:Sass
继承
当你声明一个包涵一些样式的类之后,你想要另外一个和它只有少许不同的类,在less中你可以这样写
.module-a{
color:#333;
}
.module-b {
.module-a(); /* 把module-a所有的css代码拷贝到这里 */
border: 1px solid red;
}
这样.module-b便继承了.module-a的所有属性 生成的Css代码:
.module-a{
color:#333;
}
.module-b {
color:#333;
border: 1px solid red;
}
这在本质上就是继承,在Sass中也可以做同样的事情。但Sass的"@extend"更好一些,在"@extend"中.module-a的样式不仅仅是被复制到.module-b(可以扩展)中,在Css中对.module-a的定义被修改为.module-a,.module-b(这样做选择器的效率更高)。
Sass代码
.module-a {
/* 一堆css代码 */
}
.module-b {
/* 一些覆盖和扩展代码 */
@extend .module-a;
}
最终编译Css代码
.module-a, .module-b {
/* 一堆css代码 */
}
.module-b {
/* css代码*/
}
结果是Sass重写的选择器效率更高 获胜者:Sass
变量
变量前缀:less使用"@",sass使用"$"。在css中@符号有继承的意义,而美元符号没有。我们可以说这个是个人喜好。但是没有混淆概念的Sass在这里更有优势。 不过Sass的变量范围有些古怪,如果你在局部环境中重写了一个全局变量,全局变量的值会被改变。
$color: black;
.scoped {
$color: white;
color: $color;
}
.unscoped {
// LESS = black (仍然是一开始定义的值black)
// SASS = white (被改写为white)
color: $color;
}
获胜者:Less
媒体查询
我们开始使用媒体查询的方式是在主样式表的底部加入针对媒体查询的媒体代码块。这样做很有用,但是它会导致响应的样式和原有的样式风格脱节。 CSS代码:
.some-class {
/* 基础样式 */
}
/* 很多行以后 */
@media (max-width: 800px) {
.some-class {
/* 响应样式 */
}
}
通过Sass或者Less,我们可以用嵌套把他们写到一起:
.some-class {
/* 基础样式 */
@media (max-width: 800px) {
/* 响应样式 */
}
}
通过Sass,我们甚至可以更牛逼一点,用一种更酷的写法:
=respond-to($name)
@if $name == small-screen
@media only screen and (min-width: 320px)
@content
@if $name == large-screen
@media only screen and (min-width: 800px)
@content
然后,我们可以通过这种技术使代码更加简洁和语义化
.column
width: 25%
+respond-to(small-screen)
width: 100%
需要Sass 3.2的环境(安装方法,在Start Command Prompt with Ruby中输入“gem install sass –pre”)
运算
在大多数情况下,数学运算都是很相似的。但是sass和less在处理单位的适合还有些不同。例如less会假设第一个单位是你想要的,忽略后一个:
div {
width: 100px + 2em; // == 102px (怪异之处)
}
但是在Sass中,你会得到一个明确的错误提示:不兼容的单位"px"和"em"。我想是否应该提示错误是值得商榷的,但是相比之下我更希望得到错误,特别是当我在处理难以追查的变量的时候。 sass允许我们使用未知单位,但是less不可以。同时它们还有一些其他的不同之处,比如sass如何为有单位的值做乘法,但这些都过于简单,不值得继续讨论。
胜利者:Sass
综上,虽然Sass比less稍难上手,但如果要使用Css预处理器的话,多花点时间在Sass上面是值得的。
英文原文:http://css-tricks.com/sass-vs-less/
参考资料:http://sass-lang.com/
Css预处理器实践之Sass、Less大比拼的更多相关文章
- CSS预处理器实践之Sass、Less大比拼[转]
什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...
- CSS预处理器实践之Sass、Less比较
什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...
- CSS预处理器的对比 — Sass、Less和Stylus
本文根据Johnathan Croom的<sass vs. less vs. stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不 ...
- CSS预处理器(less 和 sass)
CSS预处理器 1.基于CSS的另一种语言 2.通过工具编译成CSS 3.添加了很多CSS不具备的特性 4.能提升CSS文件的组织 提供功能:1.嵌套 反映层级和约束 2.变量和计算,减少重复戴拿 3 ...
- 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)
写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围 ...
- CSS预处理器——Sass、LESS和Stylus实践
CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
sass.less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
随机推荐
- poj Monthly Expense
http://poj.org/problem?id=3273 #include<cstdio> #include<cstring> #include<cmath> ...
- DEDECMS调用最新评论
{dede:feedback row='5' titlelen='24' infolen='80'} <div class="yhplk"><div>[fi ...
- Children of the Candy Corn (bfs+dfs)
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8120 Accepted: 3547 Description The c ...
- 自己动手学TCP/IP–http协议(http报文头)
在前面的一篇文章中,简单了介绍了HTTP报文格式,详情参考http://www.firefoxbug.net/?cat=47. 这里大概介绍下基本的,常见的HTTP包头格式. POST /report ...
- 【模拟】HDU 5774 Where Amazing Happens
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5774 题目大意: 已知1946~2015每一年赢得人是谁,给n个名字,问赢了多少次. 题目思路: [ ...
- Delphi 多线程 “尚未调用CoInitialize错误”的解决方法
在Delphi 多线程中出现“尚未调用CoInitialize错误”的解决方法 解决方法如下: function TMyThread.ExecTimer: Boolean;begin Resul ...
- Android Memory Leak
线程也是造成内存泄露的一个重要的源头.线程产生内存泄露的主要原因在于线程生命周期的不可控.1.看一下下面是否存在问题 public class ThreadActivity extends Activ ...
- [Java] 类和接口的初始化步骤 - 继承方面
类和接口在初始化化时,处理继承层级的方法不一样. 类继承的初始化:通过引用 static 字段,触发某个类的初始化,则声明该字段的类,以及该类的父类被初始化. 接口继承的初始化:通过引用 static ...
- SQL中Merge的用法
SQL中Merge的用法 Merge的用法 Merge可以完成以下功能: 1. 两个表之间数据的更新 2. 进行进销存更新库存 3. 进行表之间数据的复制 语法说明: 1. 在语句结束后一定要 ...
- ulimit开启coredump时核心转储
[root@localhost ~]# ulimit -c [root@localhost ~]# ulimit -a core data seg size (kbytes, -d) unlimite ...