前端开发者学堂 - fedev.cn

将你的CSS项目转换成Sass

发布于 大漠

本文由大漠根据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团队提供的一些强大的工具,你可以将这些用到你的实际项目中。例如:

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

如需转载烦请注明出处:

英文出处: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