将你的 CSS 项目转换成 Sass - 文章教程

将你的 CSS 项目转换成 Sass

发布于 2021-08-29 字数 7015 浏览 879 评论 0

在过去的一年里,我花了很多的时间在学习 Sass知识 以及提高 Sass 的技术水平。在与别人的交谈中,我发现从 CSS 项目转到 CSS 预处理器时,都有这样的担忧:

我不知道从哪里,从什么时候开始,将 CSS 项目转换成 Sass。

有大量的文档和技术诀窍介绍使用Sass和Compass来创建一个新的项目,但考虑到如何将一个CSS项目转换成Sass项目对部分同学有所帮助的时,我整理了这样的一个教程。

将你的 .css 文件命名为 .scss

在Sass的社区曾有过这样的一个笑话,从现在的项目上使用 Sass,你首先要做的是将你的 .css 变成 .scss。但它是真实的,就像你开始使用H5创建项目,首先做的是使用 <!DOCTYPE html> 文档声明。现在所有CSS规则都可以在Sass的语法规则上运行。

在本地安装 Sass 和 Compass

你将需要启动你的命令终端,通过 Ruby 的 gem 命令来进行安装,前提你的电脑具备 Ruby 环境:

gem install sass

如果你安装制作,你需要加上 sudo 来安装:

sudo gem install sass

你应该还需要安装 Compass,他是一个非常有用的框架:

gem install compass

同样的,你安装Compass碰到错误时,也需要使用sudo

sudo gem install compass

其实直接安装Compass就可以将Sass一起安装了,因为Compass的运行需要依赖于Sass。

现在,在命令行中操作可能会直接把一些设计师给吓跑了,其实也有一些应用程序可以做这些事情。如果你也不想使用命令行,我会建议你尝试下面的方法:

  • Codekit:这个应用程序为您安装了Sass和命令行中的监控代码编译(compass watch)。他还有很多小功能,比如说CoffeeScript,图片优化,压缩等等
  • LiveReload:这个是Codekit的精简版本,这个应用程序的主要功能是样式的插入以及当你修改了代码之后,可以自动刷新浏览器,也可以帮你编译Sass。

设置 config.rb 文件

Compass 的文档非常强大,如果你是一个新手,你到官网可以查到你想要的资料。这个页面就是有关于 config.rb 文件 配置的详细介绍

下面是你真正需要设置的一些选项:

http_path = "/" 
css_dir = "css" 
sass_dir = "scss" 
images_dir = "img" 
javascripts_dir = "js" 
output_style = :expanded 
relative_assets = true 
line_comments = true

这个用来指定目录名,输出样式格式,资源路径和注释等设置。你可以将output_style设置为compact或者compressed,也可以将line_comments设置为false

如果Compass需要其他插件,比如说制作响应式网格的 Susy,你需要使用require配置:

require susy

并且将其放在 config.rb 文件顶部。

CSS 转换成 Sass 的工具

还有一些工具可以帮助你将CSS转换成Sass,我建议使用他们是可以帮助你更好的将CSS转换成Sass。重要的是还是把握Sass转换成CSS。

  • CSS2Sass复制你项目中的代码粘贴到工具中,看看它是如何转换成Sass。我不建议你将整个项目的代码复制,你可以复制几段代码尝试一下。一旦你感觉不错,你可以手写一些特性,包括选择器嵌套等。
  • Sassmeister这基本上是 Codepen 的 Sass。其最新版本引入了一个HTML组件,这样就可以帮助修改代码的时候就能看到效果。这个非常有用,不紧可以帮助你学习,而且这引入了 Compass。

重新构建你的CSS项目

在项目中使用Sass最大的优势就是使用模块化的思维来维护你的项目。通过@import指令可以将局部的样式都引入到一个样式表中,这样一来只需要一个HTTP请求。局部的.scss文件在他的名字前面都有一个下划线_,这样他不会编译成一个单独的CSS文件,例如_header.scss

这里有一个Sass项目的目录结构的示例,是基于SMACSS的。遵循一个最佳的方法,让你非常的舒服。可以根据需要调用你需要的样式。

你使用自己定义的Sass文件,可以根据内容导入局部的和公共的部分。同样,如果你想使用Compass,你可以通过@import compass;将其引入进来。当然,你也可以没必要的将整个Compass引入进来,你可以引入你自己需要的那部分,例如@import compass/css3;。更多的介绍可以点击这里

这里有一个重组结构的方法,根目录底下包括了:base,components 和layout三个文件夹。

_custom.scss

base

_common.scss 
_elements.scss 
_mixins.scss    

components

_blocks.scss
_buttons.scss
_forms.scss
_icons.scss
_typography.scss

layout

_main.scss
_header.scss
_footer.scss
_aside.scss

其实这样看起来有点太清晰,根据原文,我的理解是这样的。比如你有一个项目,名叫project。你的样式文件表是这样组织的:

project/
|
|--stylesheets/
|  |--base/
|     |--_common.scss
|     |--_elements.scss
|     |--_mixins.scss
|  |--components/
|     |--_blocks.scss
|     |--_buttons.scss
|     |--_forms.scss
|     |--_icons.scss
|     |--_typography.scss
|  |--layout/
|     |--_main.scss
|     |--_header.scss
|     |--footer.scss
|     |--aside.scss
|  ...
|  |--_custom.scss

我知道,你一开始可能没有方向或者无法重新组织一个具有5000行的CSS。你可能不会为了一个会议就把你的这个庞大的CSS进行模块化。最好的办法就是一开始你只要保持维护这个文件。当你确认你具有一定的能力之时,你就可以通过变量、混合宏、扩展和嵌套加快你重构的速度。

我采取的方法是一小块一小块,不断完善的方式来重组。你可以通过重命名样式表,使用Sass的语法重新设置你的文件夹结构。然后选择一部分加到你的样式表中,比如按钮部分。请记住,这样坚持一下去,整理的东西你不仅仅用于一个项目,这样你会获益不浅。

当你开始决定使用Sass之前,建议你先阅读David Walsh在CSS-Tricks发表的文章《http://css-tricks.com/redesigning-with-sass/》。以确保你不要犯那些初学者的错误,比如冗余和权重的错误。

随着慢慢的成长,你可以观主 Github 上 Sass团队 提供的一些强大的工具,你可以将这些用到你的实际项目中。例如:

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

扫码加入群聊

发布评论

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

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