前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Sass学习

Sass学习

原创
作者头像
Qwe7
发布2022-04-17 07:48:55
6820
发布2022-04-17 07:48:55
举报
文章被收录于专栏:网络收集网络收集

在学习Sass之前,我们先来介绍一下什么是CSS预处理器。因为Sass就是众多CSS预处理器中的其中一种。

1、什么是CSS预处理器?

学过CSS的小伙伴都知道,CSS只是一门描述性的语言,你只能一行一行单纯地描述,并不能像JavaScript那样使用变量、循环、运算等方式来操作。

CSS预处理器的出现,使得我们可以像操作JavaScript那样以“编程”的方式来书写CSS。在CSS预处理器中,我们可以使用变量、循环、函数等方式来简化操作,提高开发效率。说得一点都没错,现在写CSS也可以这么爽了。小伙伴们看到这里,必须大吃一惊:“我out了!”

CSS预处理器,这个术语真专业……不过坑爹的术语,往往都是吓唬人的,实际并不难。CSS预处理器,说白了就是用编程方式来写CSS的一类语言,就这么简单。

CSS预处理器语言有很多,最常见的有3种:

(1)Sass;

(2)Less;

(3)Stylus;

这些CSS预处理语言都具备编程的特性,这种编程方式相对于纯CSS书写方式来说,具有更加简洁、适应性更强、可读性更佳、更易于代码的维护等优点。

2、什么是Sass?

Sass是功能最为强大、最成熟、并且是最为流行的CSS预处理器。因此,对于Sass、Less和Stylus这3个,我们还是建议大家学习Sass。

Sass是一种动态样式语言,比CSS多出好些功能(如变量、嵌套、运算、混入、继承、颜色处理、函数等),更容易阅读。

3、Sass和Less

Sass和Less是当下最为流行的2门CSS预处理语言,也是国内外讨论最热的2个。

Sass和Less差别不大,语法也相近。不管是Sass,还是Less,都可以视为一种基于CSS之上的高级语言,其目的都是为了让CSS开发更为灵活和更强大。但是两者也有以下明显区别:

(1)Sass由于是使用Ruby编写的,所以编译的时候是在服务器端处理;而Less由于是使用JavaScript编写的,所以编译的时候是在浏览器端处理;

(2)Sass拥有更为强大的功能,如循环、函数、混合宏等,而less却没有;

(3)Sass拥有成熟稳定的框架来辅助开发,特别是Compass,而less却没有;

(4)Sass在国内外讨论热度最大,并且有一个稳定强大的团队在维护;

(5)相当多的公司更为倾向于使用Sass,而不是less;

简单来说,Sass是比less更为强大并且使用更广的一门CSS预处理器语言。在实际开发中,如果你只是单纯地想简化CSS写法、统一风格、增强维护性的话,那么Sass和Less是一样的,学习哪一个都可以。

但是如果想要用到更多并且更加强大的功能的话,那么你应该选择Sass。在这里,我也强烈建议小伙伴们学习的是Sass,而不是Less。Sass最强大之处是配合Compass来辅助CSS开发。其中,Compass是在Sass的一个框架,保证让你爽到爆。对于Compass,别忘了关注即将上线的Compass教程。

疑问

1、我觉得用纯CSS方式来书写CSS都完全够了啊,而且也不麻烦,为什么还要学Sass或less呢?

Sass和Less使得我们可以用“编程”的方式来书写CSS代码,这个相对于纯CSS书写方式来说,开发速度更加快,可读性和可维护性更高。我们都知道,在整站开发中,可读性和可维护性是非常讲究的。而纯CSS书写方式在这些方面都比较欠缺。

此外在前端面试中,也会经常问到Sass和Less。学会其中的一门,绝对是你前端技能的加分项。并且现在相当多公司的前端开发中,都使用Sass和Less来辅助开发。所以小伙伴们,快快到Sass的碗里来!

4、Sass和Scss

在Sass中,有2种语法格式:

(1)Sass格式;

(2)Scss格式。也就是说,平常我们所说的Sass和Scss其实是同一个东西来的,统称为Sass。Sass和Scss仅仅是Sass的两种语法格式罢了。

一、Sass格式

Sass格式,是Sass的“旧版本语法”。这种语法格式,不使用大括号“{}”和分号“;”,而是使用严格的缩进式语法规则来书写,也就是类似Ruby语言的写法。

举例:

代码语言:javascript
复制

$color:white

$bgColor:red

 

body

color:$colo

background-color:$bgColo

说明:

从这里我们可以看出,Sass格式是不使用大括号“{}”和分号“;”的,并且在body元素定义样式的时候,color和background-color这2个属性都是严格缩进的。

二、Scss格式

Scss格式,是Sass的“新版本语法”。这种语法格式,使用大括号“{}”和分号“;”,并不使用严格的缩进式语法规则来书写,也就是类似CSS书写的格式。

举例:

代码语言:javascript
复制
$color:white

$bgColor:red

 

body

{

    color:$colo

    background-color:$bgColo

}

说明:

从这里我们可以看出,Scss格式跟平常我们写CSS的格式是一样的。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档