将你的 CSS 项目转换成 Sass

发布于 2021-08-29 01:08:45 字数 5369 浏览 1862 评论 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团队提供的一些强大的工具，你可以将这些用到你的实际项目中。例如：