浅谈Sass与Less区别、优缺点
Sass是一种动态样式语言，Sass语法的缩排语法，比Css比多出很多功能，如变量，嵌套，运算，继承，颜色处理，函数等，易于阅读。Cass的安装需要安装Ruby环境，是服务器端处理的，Less是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less,然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。
事实证明，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>中:
- <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”。
其实也有一个服务器端的LESS版本。在服务器上安装LESS的最简单的办法就是使用Node Package Manager (NPM，一看就知道是基于Node.js的)。
变量
关于变量在LESS和Sass中的唯一区别就是，LESS用@，Sass用$。同时还有一些作用域上的差别，我后面会提到。
混入(mixin)
偶尔，我们会创建一些会在样式表中重复使用的样式规则。没有人会阻止你在一个HTML的元素中使用多个class，但是你可以用LESS，在样式表中完成。
参数混入
就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包含着由有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。
Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。
浅谈Sass与Less区别、优缺点的更多相关文章
- 浅谈sass与less区别优缺点
Sass是一种动态样式语言,Sass语法的缩排语法,比Css比多出很多功能,如变量,嵌套,运算,继承,颜色处理,函数等,易于阅读.Cass的安装需要安装Ruby环境,是服务器端处理的,Less是需要引 ...
- [转]浅谈Hive vs. HBase 区别在哪里
浅谈Hive vs. HBase 区别在哪里 导读:Apache Hive是一个构建于Hadoop(分布式系统基础架构)顶层的数据仓库,Apache HBase是运行于HDFS顶层的NoSQL(=No ...
- 基于综合服务平台浅谈Sass应用
一. 前言 CSS不是一种编程语言,只是单纯的一行行的描述,没有逻辑没有变量,因此写CSS对于习惯于运用逻辑思维编码的程序员来说是一件很头疼的事.于是勤奋的程序员就开始运转他们敏捷的大脑, ...
- 浅谈 equals 和 == 的区别
在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str2 = new String(&qu ...
- 浅谈==和equals的区别
java中的==和equals的区别? 看上面的代码,输出的结果是: true false true true 1.为什么会有上面的区别呢?==和equals比较的到底是什么呢? 搞清楚两者的区别其实 ...
- 浅谈异步IO各模型优缺点
本文只讨论OverLapped I/O的三种异步模型及完成端口,像select.SWASelect不作讨论,讨论顺序从劣到优,方便于循序渐进地对比,更容易区分各模型之间的差别. 1. OverLapp ...
- 浅谈JAVA GUI中,AWT与Swing的区别、联系及优缺点
浅谈JAVA GUI中,AWT与Swing的区别.联系及优缺点 A.区别 1.发布的时间 AWT是在JDK 1.0版本时提出的 Swing是在AWT之后提出的(JAVA 2) 2. ”重量” AWT是 ...
- 浅谈cookie 和session 的区别
具体来说 cookie 是保存在“客户端”的,而session是保存在“服务端”的 cookie 是通过扩展http协议实现的 cookie 主要包括 :名字,值,过期时间,路径和域: 如果cooki ...
- 浅谈Nginx负载均衡和F5的区别
前言 笔者最近在负责某集团网站时,同时用到了Nginx与F5,如图所示,负载均衡器F5作为处理外界请求的第一道"墙",将请求分发到web服务器后,web服务器上的Nginx再进行处 ...
随机推荐
- webpack的像素转vw loader插件
这是一款针对webpack的像素转vw单位的loader插件. 笔者公司中,h5 rem的开发方案目前已经渐渐开始转向vw方案,因此本工具应运而生. 目前所制作的h5,大部分设计稿分辨率都是750的宽 ...
- C# 程序集Assembly
原谅我到目前为止一直肤浅的认为程序集就是dll,这种想法是错误的. 今天就系统的学习记录一下“程序集”的概念.原文链接https://www.cnblogs.com/czx1/p/2014131370 ...
- Microsoft Edge 针对 Web 开发人员更新日志
Windows 10 build16215 之 Edge 新功能 新功能: 增加了对高级事件监听器的支持(“once”和“passive”)via 增加了对CSS object-fit/object- ...
- BZOJ 2793: [Poi2012]Vouchers(调和级数)
Time Limit: 20 Sec Memory Limit: 64 MBSubmit: 582 Solved: 250[Submit][Status][Discuss] Description ...
- direct2d: antialiasing and drawing a line with a 1 pixel stroke
http://xboxforums.create.msdn.com/forums/t/61448.aspx I'm currently porting a number of custom MFC C ...
- CSS3新增的属性有哪些：
CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...
- redis中的事务、lua脚本和管道的使用场景
参考文章 : https://blog.csdn.net/fangjian1204/article/details/50585080
- iOS开发者中心重置设备列表
苹果开发者账号允许的测试设备为100台,如果你注册了,这台机器就算是一个名额,禁用也算一个名额,仍被计入机器总数,每年可以重置一次,那我们怎么重置机器数量呢? 我们需要给苹果发送申请: https:/ ...
- angular7升级到angular8
1.首先我们对:angular的命令的安装 ng install -g @angular/cli的安装则会升级到最新的版本,并且再次创建项目的时候,我们就能够使用ng version查看到已经是最新的 ...
- bzoj4551 [HEOI2016]树
题目描述 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记,其他结点均 ...