将你的CSS项目转换成Sass

发布于大漠

10 年前

本文由大漠根据Brian Krall的《Converting Your CSS Project To Sass》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明原作者相关信息http://sideproject.io/converting-your-css-project-to-sass/。

——作者：Brian Krall

——译者：大漠

在过去的一年里，我花了很多的时间在学习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。有关于这方面的教程，可以阅读《开始使用Sass和Compass》一文。这里仅简单介绍了Sass的安装，有关于更详细的介绍，可以点击《SASS编译》一文。——@大漠

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

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

如果你从未接触过Codekit这样的应用程序，建议您阅读《Codekit的使用》一文。不过Codekit不是屌丝工具，需要花美刀购买。如果你只是想体念一下，不想花这笔钱，也建议使用使用另一款具有同等功能的国产应用Koala，详细介绍请点击《Koala的使用》一文。——@大漠

设置`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

有关于如何组织你的Sass项目的文件结构，可以阅读《如何组织一个Sass项目》和《管理Sass项目文件结构》。我想你会有一个深入的了解，并且能更好的运用于你的实际项目之中。——@大漠

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

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

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

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

Breakpoint：媒体查询用例
Modular Scale：自动计算分辨率比例
SassyLists：重新排序的函数功能
Singularity：创建你自己的响应式网格系统
Toolkit：一堆有用响应式设计和渐进增强的片段

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文出处：http://sideproject.io/converting-your-css-project-to-sass/

中文译文：https://www.fedev.cn/preprocessor/converting-your-css-project-to-sass.html

Nike Zoom Haven 97 Clot White Gum