构建你的结构体系

CSS预处理器的特点之一是可以把你的代码分割成很多个文件,而且不会影响性能。这都要归功于Sass的@import命令,只要在你的开发环境下,你调用不管多少文件,最终将编译出一个CSS样式文件。

多个文件中开发,最终合并输出一个文件。——@Bruce Lee

开始将你的CSS文件分割成多个文件和文件夹。正如我的一位导师说的“任何事物都有其正确的地方,每个地方都有其正确的事”。那么,这也是我喜欢做的事。

文件夹构建

文件夹的创建是必不可少的。就算在家里,你也不会把所有的纸张放在一个盒子里。你可能会使用一个文件夹。一个用于房子上,一个用于银行,一个用于账单等等。

你在创建CSS的架构的时候也应该如此:你不只是把所有的Sass文件放在一个文件夹下,你会将他们分类。

下面的示例屏示的是我将如何组织我的Sass文件:

sass/
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| ... # Etc…
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| |– _navigation.scss # Navigation
| ... # Etc…
|
|– helpers/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _helpers.scss # Class & placeholders helpers
| ... # Etc…
|
|– layout/
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| ... # Etc…
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| ... # Etc…
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| ... # Etc…
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| ... # Etc…
|
|
`– main.scss # primary Sass file

正如你所看到的,在根目录底下只有一个main.scss文件,其他.scss文件都根据不同的分类放在对应的文件夹中,只是这些.scss文件前面都有一个下划线(_),用来告诉Sass,这些.scss文件只是局部,不通过@import是不应该被编译出.css文件。事实上,它们是导入和合并文件的基本文件而以。

一个文件可以解决所有问题,一个文件可以找到他们,一个文件给他们带来了所有的一切,Sass只是将他们合并在一起。——@J.R.R. Tolkien

接下来,我们依次来看结构中的每一个文件目录。

Base

base/文件夹包含了一些有关于你的项目中一些模板相关。在这里,你可以看到reset样式(或者Normalize.css,或者其他),也有一些关于文本排版方面的,当然根据不同的项目会有一些其他的文件。

  • _reset.scss_normalize.scss
  • _typography.scss

Helpers

helpers/文件夹(有的地方也称其为utils/)主要包含了项目中关于Sass的工具和帮助之类。在里面放置了我们需要使用的_function.scss,和_mixin.scss。在这里还包含了一个_variables.scss文件(有的地方也称其为_config.scss),这里包含项目中所有的全局变量(比如排版本上的,配色方案等等)。

  • _variables.scss
  • _mixin.scss
  • _function.scss
  • _placeholders.scss(也有称为_helpers.scss)

Layout

layout/文件夹(有时也称为partials/)中放置了大量的文件,每个文件主要用于布局方面的,比如说"header",“footer”等。他也会包括_grid.scss文件,用来创建网格系统。

  • _grid.scss
  • _header.scss
  • _footer.scss
  • _sidebar.scss
  • _forms.scss

导航文件(_navigation.scss)文件放在这里也有意义,虽然我将他放在了components/文件夹中。但是我想将其放在layout/文件夹中更好些,当然最后还是由你自己来决定。

Components

对于一些小组件,都放在了components/文件夹(通常也称为modules/),layout/是一个宏观的(定义全局的线框),components/是一个微观的。它里面放了一些特定的组件,比如说sliderloadingwidget或者其他的小组件。通常components/目录下的都是一些小组件文件。

  • _media.scss
  • _carousel.scss
  • _thumbnails.scss

Page

如果你需要针对一些页面写特定的样式,我想将他们放在page/文件夹中是非常酷的,并且以页面的名称来命名。例如,你的首页需要制作一个特定的样式,那么你就可以在page/文件夹中创建一个名叫_home.scss文件。

  • _home.scss
  • _contact.scss

根据你自己的布署,你可以根据自己的需求调用这些文件,避免与其他样式文件合并在一起。这真的主取决于你自己,在我工作的地方,我是不允 许这样的事情发生,只在需要的页面调用需要的文件。比如说,我们首页有一个特定的布局样式,编译出来的CSS大约有200行代码。为了防止每个页面加载这 些代码,我只在主页文件上引用这个文件。

Themes

如果你像我一样要为一个大型的网站制作多个主题,那么有一个theme/文件夹是非常有意义的。你可以把主题相关的文件放在这个文件夹中。这绝对跟具体的项目有关,你只要觉得跟主题相关的,有必要引入。

  • _theme.scss
  • _admin.scss

Vendors

最后一个但并非不重要,创建vendors/文件夹,主要用来包含来自外部的库和框架的CSS文件。比如Bootstrap,jQueryUI,FancyCarouselSliderjQueryPowered等等。把这些文件放在同一个文件夹中,你可以说,嘿,这些代码不是我的,不是我写的,跟我无关。

例如:

  • bootstrap.scss
  • jquery-ui.scss
  • select2.scss

从另一个角度来说,在我平时工作中,还创建了一个vendors-extensions/文件夹,用来放置一些覆盖从外部引入进来的库和框架中的小组件。例如,我们可以在_bootstrap.scss文件中用来覆盖Bootstrap框架中的一些小组件。这为了避免和外部直接引来的组件升级造成的冲突,或许这不是一个很好的方案。

大致就是这些,但不同的项目可能会不一样,但我可以肯定,你们都有了这样的一个概念。在文件夹中嵌套一个文件夹,这样的做法我一直不太反对,但我不 太喜欢这样的方式。我发现,在大多数情况之下,只需一个层级就足足够,既保证结构的简洁与清晰,而且不复杂。但话又说回来,如果你觉得你的项目有必要嵌套 更深层次的文件夹,你也可以自由的发挥。

温馨提示:如果你觉得你的架构并不能向大家说明SCSS文件夹的架构,你可以在根目录下创建一个README.md文件(或者在main.scss文件中一步一步说明)解释。

文件很酷?

有一个问题常被人问到“多少文件才算是很多文件呢?”我常回答“再多文件都不算多”。拆分成多个文件的宗旨是帮助你组织你的代码。如果你觉得某事值得拆分成多个文件,可以自由的拆分。正如CHRIS COYIER在《Sass Style Guide》中所说:

拆分成尽可能多的小文件是有道理的。——@CHRIS COYIER

不过,我建议不把单个组件拆分成多个文件,除非你有很好的理由这样做。通常我更倾向于一个组件一个文件。俗话说“没有更多,只有更少”。用一个简洁语义化的名称,用来表示模块的名称。这样我们就可以通过查找名称找到你需要的东西。

总结

本文所有内容都是基于我当年在法国Crédit Agricole银行做前端(唯一一前端)的工作经验。针对于各人,有各自的情况和经验,可以有不同的方法。

如果我们能给构建一个Sass项目挑选一个黄金法则,它可能会简单一些:就如捡东西的一个道理。如果做为一个团队,项目的结构要确认每个人用得都舒服,让大家都要知道是怎么一回事。

你对构建Sass项目架构有任何想法和建议,我们都非常想听听。

管理Sass项目文件结构的更多相关文章

  1. Nodejs+Grunt配置SASS项目自动编译

    Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...

  2. 巡风代码架构简介以及Flask的项目文件结构简介

    一.巡风: 巡风是一款什么东西,想必安全同行都不陌生吧.用它作为内网漏洞扫描管理架构是一种很好的选择,扫描快,开源,还可自己编写符合规则的POC直接放入相应目录来扩展.今天下午趁着有点时间捋了一下巡风 ...

  3. 使用maven来管理java项目

    初学maven,简单总结一下学习心得,若有不对的地方,欢迎各位大神给我指正~ 总结分为6个部分 maven概述 maven安装 maven项目结构和创建方法 maven配置文件settings.xml ...

  4. 免费电子书:使用VS Online敏捷管理开源项目

    今天推荐的是一本由微软出版社发布的免费电子书,涉及的话题是如何在Visual Studio Online中基于敏捷的思想来管理开源项目. 本书的几位作者(自称ALM领域的游侠),给大家分享了在一个敏捷 ...

  5. (ios开发学习笔记一)ios项目文件结构

    转自:http://www.cnblogs.com/macroxu-1982/archive/2012/07/31/2616389.html 下面是单个窗体项目例子,我们从这个项目开始,说明ios项目 ...

  6. VM Depot 镜像新增系列III – 社交媒体,内容管理 与 项目协同系统

     发布于 2014-06-30 作者 刘 天栋 对于架设可协同作业的网站平台, Windows  Azure有着得天独厚的优势.这不仅在于其强大的扩展性和安全性,更重要的是 Azure 平台对各类 ...

  7. maven管理的项目出现Error configuring application listener of class org.springframework.web.context.ContextL

    eclipse里用maven管理的项目,在运行的时候出现 Error configuring application listener of class org.springframework.web ...

  8. 酒店管理web项目总结

    酒店管理web项目总结 半个月的努力,一个完整的酒店项目也就新鲜出炉了,在项目的制作中总结了一些酒店管理项目的特点. 1.需求分析,酒店管理需要什么? 1)首先系统的安全性,对于任何一个系统来说,安全 ...

  9. 用tortoiseGit管理GitHub项目代码(完整教程)

    一.为什么要写这篇博客呢,因为在一开始用tortoiseGit来管理项目的时候,在百度上找了很多教程,但是感觉说的都不是很全,有些东西以及操作没写清楚,所以想写一片比较完整用tortoiseGit管理 ...

随机推荐

  1. FreeMarker备忘

    以下内容全部是网上收集: FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主要由如下4个部分组成: ,文本:直接输出的部分 ,注释:<#-- ... --& ...

  2. 【读书笔记】读《JavaScript设计模式》之代理模式

    一.定义 代理是一个对象,它可以用来控制对另一个对象的访问.它与另外那个对象实现了同样的接口,并且会把任何方法调用传递给那个对象.另外那个对象通常称为本体.代理可以代替其实体被实例化,并使其可被远程访 ...

  3. struts2 标签 --<<s:url >

    Struts2中的链接标签 <s:url>和<s:a> 普通链接 Web程序中最普通的应用是链接到其他页面,下面看Welcome.jsp. <%@ page conten ...

  4. Fresco 源码分析(三) Fresco服务端处理(2) Producer具体实现的内容

    我们以mProducerFactory.newNetworkFetchProducer()为例,因为这些创建新的producer的方式类似,区别在于是否有包装的处理器,即如果当前处理器中没有正在处理的 ...

  5. ubuntu下安装jdk

    参考:http://blog.csdn.net/gobitan/article/details/24322561 Ubuntu Linux下安装Oracle JDK Dennis Hu 2014-4- ...

  6. Sonar相关资料

    Sonar介绍及安装:http://www.cnblogs.com/suncoolcat/p/3323200.html Sonar安装: http://www.myexception.cn/open- ...

  7. SURF算法与源码分析、下

    上一篇文章 SURF算法与源码分析.上 中主要分析的是SURF特征点定位的算法原理与相关OpenCV中的源码分析,这篇文章接着上篇文章对已经定位到的SURF特征点进行特征描述.这一步至关重要,这是SU ...

  8. ML 01、机器学习概论

    机器学习原理.实现与实践——机器学习概论 如果一个系统能够通过执行某个过程改进它的性能,这就是学习. ——— Herbert A. Simon 1. 机器学习是什么 计算机基于数据来构建概率统计模型并 ...

  9. MATLAB学习笔记(四)——文件操作

    首先,声明,如果学过C的话就可以不用看了,因为是一样的,只要注意一些系统变量的名字稍微变动了而已.都是基于ANSI C语言的标准库函数写的. (一)文件的打开与关闭 一.文件的打开 1.语法 fid= ...

  10. 如何写出安全的API接口

    通过园友们的讨论,以及我自己查了些资料,然后对接口安全做一个相对完善的总结,承诺给大家写个demo,今天一并放出. 对于安全也是相对的,下面我来根据安全级别分析 1.完全开放的接口 有没有这样的接口, ...