为什么要开始学习 Sass - 文章教程

为什么要开始学习 Sass

发布于 2021-11-08 字数 2902 浏览 983 评论 0

本文不会像一些其它文章一样,教你如何开始使用 Sass,我会告诉你为什么使用 Sass,我到底喜欢它什么。

我最初是在一个 Laravel 项目中,接触了 Sass,Larvel 是个 PHP 框架,内建有 Elixir 服务支持 Sass。你可能觉得说这个玩意跟我们没啥关系,但是重点是 Larvel 支持 Sass、使 Sass 非常容易上手,这就促使我去尝试使用 Sass、慢慢了解到它的很多优点。

之前,我总觉得,写脚本在 CSS 里会把本应简单的事情变复杂,然后不确定是否应该花时间去学习它。但是我慢慢发现,它的好处很多,还好当初没有放弃。

Sass 就是 CSS

首先,你要知道的是,Sass 其实就是 CSS,这里可能会有很多的议论,但是如果你并不想使用Sass的诸多特性,你也可以只在 Sass 的样式表中书写 CSS,这一点问题都没有,然后当你需要一些Sass特性的时候,你可以拿起来写。

Import 引入

回到当初的 Larvel 项目,一开始我用传统的方式书写CSS文件,最后发现文件内容非常的长。当时觉得,这没有什么问题,但是过了一段时间之后,发现在这个CSS文件里我很难回想起各个规则的位置。Sass 来了,它允许你创建多个文件,然后在一个文件中引入。也就是说你可以把长长的CSS文件,分割成几个以各自逻辑命名,组织的文件。这样,以后我们要完善更改样式表就变得更容易了。

对我来说,在一个项目中,经常会为网格,颜色,基础的布局创建文件,等等。当然,只要你愿意,也可以引入很多个需要的文件。

Variables 变量

如果你编过程序,变量对你而言并不会陌生。你可以定义一个变量,赋值,然后就能复用它。这是一个非常有用的特性,因为在书写CSS的颜色属性时候,不需要再去重复写多个一样的hexrgb值,你可以把它写在一个变量里。

这样做的好处就是,当你的客户想把红色设置稍微粉一点,你只需在变量定义的地方修改颜色的值。
另外一个好处就是,相比hex值,变量名更好记,这就减少了前后不一致的错误。

Nesting 嵌套

如果做响应式设计,我猜你会在CSS中的一些地方用到媒体查询。我曾经很发愁,媒体查询到底应该在 CSS 文件中的什么位置,最后我选择放在样式表的最底部,为不同的屏幕宽度,单独拿出一块区域。这么做的问题是,这些样式规则和原始的规则是分离的,维护起来会比较困难。

Sass 的嵌套特性允许你可以通过在 class 中放置媒体查询来为这个 class 书写媒体查询。

这就表明,可以把一个 class 的所有规则,包括媒体查询放在一个地方,这样阅读和维护都会变得更加容易,就不用反复地上下查看这个文件了。

像媒体查询一样,也可以使用 & 添加,如 hover,active 这样的状态规则。

Extend 继承

Sass 有很多其它很酷的东西,但是我只在这里多说一个。当存在两个 class,它们有一些不同,但是也存在很多相似的地方,你可能会把所有样式重复声明两次,但是更好的做法是创建一个基础的class,然后在第二个 class 中使用 @extend 继承。也就是说它继承了第一 class 的样式,同时可以添加额外的样式,或者对某些样式进行重写。

这点其实非常有用,比如说一些具有标准样式的按钮,同时存在不同颜色的差别,你可以声明一个具有标准样式的 class,在按钮中继承这个 class,然后设置不同的背景色。

在这篇文章当中,我觉得已经有足够多使用Sass的原因了。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

归属感

这个人比较懒,什么都没有填写!

14 文章
2 评论
20954 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0