Sass是一种动态样式语言，Sass语法的缩排语法，比Css比多出很多功能，如变量，嵌套，运算，继承，颜色处理，函数等，易于阅读。Cass的安装需要安装Ruby环境，是服务器端处理的，Less是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less,然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。

　　我偶然发现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而可能引起的任何问题。尽管这不大可能，但终归是有可能的。

LESS Is More

介绍

在你的项目中引入LESS很简单：

1.下载less.js;

2.创建一个文件来放你的样式，比如style.less;

3.添加以下代码到你的HTML的<head>中:

  1. <link rel="stylesheet/less" type="text/css" href="styles.less">
  2. <script src="less.js" type="text/javascript"></script>

请注意link的rel属性。你需要在属性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必须的。如果你在用HTML5语法——为什么不用呢？——你可以省去type=”text/css”和type=”text/javascript”。

其实也有一个服务器端的LESS版本。在服务器上安装LESS的最简单的办法就是使用Node Package Manager (NPM，一看就知道是基于Node.js的)。

变量

如果你是个开发者，变量应该是你最好的朋友。如果你要重复的使用一个信息(本例中就是color)，将它设置为一个变量就可以。这样，你就可以保证自己的一致性并可能减少滚动代码来查找颜色值、复制、粘贴等繁琐的工作了。你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面。看下例子：

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

如果我们将这些样式应用到3个div上面，我们就可以看到由加上和减掉的HEX值形成的渐变的效果：

从@light_blue到@blue到@dark_blue的渐变效果

关于变量在LESS和Sass中的唯一区别就是，LESS用@，Sass用$。同时还有一些作用域上的差别，我后面会提到。

混入(mixin)

偶尔，我们会创建一些会在样式表中重复使用的样式规则。没有人会阻止你在一个HTML的元素中使用多个class，但是你可以用LESS，在样式表中完成。为了描述这一点，我写了一点儿例子：

  1. .border {
  2. border-top: 1px dotted #333;
  3. }
  4. article.post {
  5. background: #eee;
  6. .border;
  7. }
  8. ul.menu {
  9. background: #ccc;
  10. .border;
  11. }

浅谈sass与less区别优缺点的更多相关文章

  1. 浅谈Sass与Less区别、优缺点

    Sass是一种动态样式语言,Sass语法的缩排语法,比Css比多出很多功能,如变量,嵌套,运算,继承,颜色处理,函数等,易于阅读.Cass的安装需要安装Ruby环境,是服务器端处理的,Less是需要引 ...

  2. [转]浅谈Hive vs. HBase 区别在哪里

    浅谈Hive vs. HBase 区别在哪里 导读:Apache Hive是一个构建于Hadoop(分布式系统基础架构)顶层的数据仓库,Apache HBase是运行于HDFS顶层的NoSQL(=No ...

  3. 基于综合服务平台浅谈Sass应用

    一.       前言 CSS不是一种编程语言,只是单纯的一行行的描述,没有逻辑没有变量,因此写CSS对于习惯于运用逻辑思维编码的程序员来说是一件很头疼的事.于是勤奋的程序员就开始运转他们敏捷的大脑, ...

  4. 浅谈 equals 和 == 的区别

    在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str2 = new String(&qu ...

  5. 浅谈==和equals的区别

    java中的==和equals的区别? 看上面的代码,输出的结果是: true false true true 1.为什么会有上面的区别呢?==和equals比较的到底是什么呢? 搞清楚两者的区别其实 ...

  6. 浅谈异步IO各模型优缺点

    本文只讨论OverLapped I/O的三种异步模型及完成端口,像select.SWASelect不作讨论,讨论顺序从劣到优,方便于循序渐进地对比,更容易区分各模型之间的差别. 1. OverLapp ...

  7. 浅谈JAVA GUI中,AWT与Swing的区别、联系及优缺点

    浅谈JAVA GUI中,AWT与Swing的区别.联系及优缺点 A.区别 1.发布的时间 AWT是在JDK 1.0版本时提出的 Swing是在AWT之后提出的(JAVA 2) 2. ”重量” AWT是 ...

  8. 浅谈cookie 和session 的区别

    具体来说 cookie 是保存在“客户端”的,而session是保存在“服务端”的 cookie 是通过扩展http协议实现的 cookie 主要包括 :名字,值,过期时间,路径和域: 如果cooki ...

  9. 浅谈Nginx负载均衡和F5的区别

    前言 笔者最近在负责某集团网站时,同时用到了Nginx与F5,如图所示,负载均衡器F5作为处理外界请求的第一道"墙",将请求分发到web服务器后,web服务器上的Nginx再进行处 ...

随机推荐

  1. gunicorn的log如何传递给django，由django管理

    gunicorn配置文件为gunicorn_config.py里面有日志的配置 # errorlog = '/home/admin/output/erebus/logs/gunicorn_error. ...

  2. eclipse界面

    Eclipse工作空间的基本配置 A:行号的显示和隐藏 显示:在代码区域的最左边的空白区域,右键 -- Show Line Numbers即可. 隐藏:把上面的动作再做一次. B:字体大小及颜色 a: ...

  3. jenkins相关war包下载

    1.jenkins的war包下载地址 地址:http://mirrors.jenkins-ci.org/,打开链接后,表格有war列,Releases行是短期更新包.LTS是长期更新包.一般选择Rel ...

  4. python 字典dict - python基础入门(15)

    前面的课程讲解了字符串str/列表list/元组tuple,还有最后一种比较重要的数据类型也需要介绍介绍,那就是python字典,俗称:dict. python中的字典可与字符串/列表/元组不同,因为 ...

  5. python+unittest框架第一天unittest之简单认识Test Fixure：测试固件【8月17更新】

    20万的慢慢会实现的吧,hhh unittest框架,我就不在介绍了,百度有很详细的介绍. 我们只要了解: 1.unittest是单元测试框架 2.它提供用例组织与执行:在实际工作中案例可能有上百条, ...

  6. 【转帖】史上最全PostgreSQL体系结构

    史上最全PostgreSQL体系结构 2019年07月16日 18:00:00 Enmotech 阅读数 35   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...

  7. python之 -> 的含义

    函数或方法标注通常用于 :类型提示:例如以下函数预期接受两个 int 参数并预期返回一个 int 值: def sum(a: int, b: int) -> int: return a + b ...

  8. Kafka无法消费?!我的分布式消息服务Kafka却稳如泰山！

    在一个月黑风高的夜晚,突然收到现网生产环境Kafka消息积压的告警,梦中惊醒啊,马上起来排查日志. 问题现象:消费请求卡死在查找Coordinator Coordinator为何物?Coordinat ...

  9. spring整合quartz框架

    spring整合quartz: 网上也有很多教程,好多都是基于配置方式,我们使用当然怎么简单就怎么用,所以这里介绍基于注解方式整合quartz.前提:你需要有一个能运行的web项目. 1.引依赖: & ...

  10. array_chunk — 将一个数组分割成多个

    说明 array_chunk ( array $array , int $size [, bool $preserve_keys = false ] ) : array 将一个数组分割成多个数组,其中 ...