组织 Sass 文件 - 文章教程

组织 Sass 文件

发布于 2021-10-24 字数 1677 浏览 905 评论 0

使用 Sass 的美妙之一就是:它能够很轻易地让你组织你的代码。在过去,把不同的css文件导入到某一个css文件中是一个不怎么好的方法,因为这样会增加更多的http请求。然而使用Sass,它可以允许你用一种存在逻辑的方式把不同的模块的样式文件分解出来。

什么是局部文件?Sass 文档 将能够很好的解释它。

如果你有一个scss或sass文件,你仅仅只是想把它导入到某一文档里,而不是像让它编译为css文档。你可以在改文件前添加一个下划线,这样就是提醒sass文档不要把它编译为普通的css格式文件了。

你可以这样系组织你的Sass文件。首先创建一个全局scss目录:在这里我创建了一些局部的scss文件,他们是bits ,forms,icons,images,mixins等等。每个部分都有对应的样式分别为:_bits.scss_forms.scss_icons.scss_images.scss_mixins.scss等等。我们可以很轻易的看到他们的一一对应关系。

+stylesheets/
|--_bits.scss
|--_forms.scss
|--_icons.scss
|--_images.scss
|--_mixins.scss
|--_type.scss

当你做好这些后,下面就可以吧他们导入到你的主题样式表里了。我比较喜欢添加一下注释来提醒一下自己,他们每一部分是有什么作用。

/*变量
---------------
设置变量。包括颜色和间距
--------------- */

@import "bits";

/*基本样式
---------------
设置基本样式. 包括排版,图片,表单和 Icons.
--------------- */

@import "type";
@import "images";
@import "forms";
@import "icons";

当你初次这样组织之后,也会不怎么适应。但是我可以告诉你他将节省你很多的时间。在一个大的项目中,有了方向就是成功的一半,让那种成千上百行的样式代码都离的远一些吧。取而代之的将是一些简短、明确、关键、易于管理的文档了。

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

扫码加入群聊

发布评论

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

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

关于作者

想挽留

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

30 文章
3 评论
20347 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0