less和sass有什么区别?

大家好,我是IT修真院武汉分院第11期的学员,一枚正直纯洁善良的前端程序员,今天给大家分享一下,修真院官网css任务11,深度思考中的知识点——less和sass有什么区别?


一.背景介绍

预处理器

CSS 预处理器是一种语言,用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处。

我们最常用的预处理器有scss和less


二.知识剖析

SASS背景

sass诞生于2007年,最早也是最成熟的一款CSS预处理器语言。

现在的sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSS,在sass3之后的版本都支持这种语法规则。目前我们所称的sass一般指语法更为严格和友好的scss。

LESS背景

2009年开源的一个项目,受sass的影响较大,使用CSS的语法,在很多流行的框架和工具中已经能经常看到less的身影了(例如Twitter的Bootstrap框架就使用了less)。

当时sass和现在的scss不同,采用了缩进作为分隔符来区分代码块,而不是CSS中广为使用的大括号({})。为了让CSS现有的用户使用起来更加方便,Alexis开发了less并提供了类似CSS的书写功能。


三,.常见问题

问题一:SCSS和LESS有什么不同

我们知道scss和less相似,它们都可以使用变量、常量、嵌套、混入、继承等功能,可以更有效有弹性的写出CSS,下面我们看看它们之间的差异。


四,解决方案

A.安装

SASS

sass基于Ruby语言开发而成, 因此安装sass前需要安装Ruby。

LESS

less安装直接引入less和js文件即可,js放在less之后:

B.变量

sass 是以$开头定义的变量,如:$mainColor: #963;

less 是以@开头定义的变量,如 @mainColor: #963;

C.作用域

sass 没有局部变量,满足就近原则。

less 中{}内定义的变量为局部变量。 作用域和其他程序语言中的作用域非常的相同, 他首先会查找局部定义的变量,如果没有找到, 会像冒泡一样,一级一级往下查找,直到根为止,

D.混合(MIXINS)

sass的混合:sass样式中声明Mixins时需要使用“@mixin”命令, 在选择器调用定义好的Mixins需要使用“@include”。

less 的混合:在less中,混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”,就像在当前的“Class”中增加一个属性一样。

两者编译出的值相同

E.嵌套

两者写法相同

F.继承

编译后

G.高级语言

sass对条件语句和循环语句的处理要比less语言强大。具有真正的语言处理能力。


五.编码实战


六.拓展思考

还有什么好的预处理器语言?

stylus,2010年产生于Node.js社区,可同时使用缩进和括号写法,写法非常灵活,扩展性与scss相当,高于less,但由于规定过少,可能容易让人混乱。

我该如何选择CSS预处理器

1,sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持;Stylus早期服务于Node JS项目,在该社区得到一定支持者;less出现于2009年,支持者远超于Ruby和Node JS社区;

2,sass和stylus扩展性更强,sass广泛使用于国外,less在国内受众最多。stylus是后起之秀。

3,sass和less语法较为严谨、严密,而Stylus语法相对散漫,其中less学习起来更快一些,因为他更像CSS的标准;

4,sass和less相互影响较大,其中sass受less影响,已经进化到了全面兼容CSS的SCSS;

5,sass和less都有第三方工具提供转译,特别是sass和Compass是绝配;


七.参考文献

参考一:CSS预处理器——sass、less和Stylus实践

参考二:sass用法指南

参考三:为您详细比较三个 CSS 预处理器(框架):sass、less 和 Stylus

参考四:less 中文网


相关视频          PPT


八,更多讨论

1,SASS如何安装?

先安装Ruby,接着在命令行输入下面的命令:

2,sass和less的优劣对比?

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

3,less如何引入?



感谢大家观看

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容