构建你的结构体系

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. jetty与hessian结合

    Hessian是由caucho提供的一个基于binary-RPC实现的远程通讯library,支持多种语言,包括c++,java,c#等,还支持flash/flex     Jetty 是一个开源的s ...

  2. Android Inflate

    inflate就相当于将一个xml中定义的布局找出来. 三种方式可以生成LayoutInflater: LayoutInflaterinflater=LayoutInflater.from(this) ...

  3. matlab练习程序(图像球面化)

    十一没什么事干,接着看图像算法. 这个球面化算法最初是在ps上的球面化滤镜中看到的,感觉挺有意思,就研究了一下. 算法的详细推导可以在这篇博客中找到,我比较懒,只在纸上推了一遍,就不在博客上编辑了. ...

  4. 电赛总结(二)——AD芯片总结之AD7705

    1.特性参数 (1)16位无丢失代码性AD转化器 (2)只需要3.3V供电(即只需要单片机即可供电) (3)双通道差分输入 (4)基准电压为2.5V时,在单极性信号下,输入范围是0到2.5V,在双极性 ...

  5. Linux常用命令_(文件查看)

    文件查看主要有以下命令 cat.tac.more.less.head.tail.nl cat命令:是一个文本文件查看和连接工具.从第一个字节开始正向查看文件的内容,适用于小文件 以第一行开始,显示没有 ...

  6. A. Robot Sequence

    A. Robot Sequence time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  7. Oracle 使用小计

    1.Sequence 1.1 什么是Sequence? Sequence是oracle提供的一个对象,用于产生自增的主键.这与sql server的identity是类似的. 从数学的角度来说,其为一 ...

  8. 游戏 gui button

    using UnityEngine; using System.Collections; public class Gui : MonoBehaviour { public Texture2D but ...

  9. 【BZOJ】3809: Gty的二逼妹子序列

    http://www.lydsy.com/JudgeOnline/problem.php?id=3809 题意:n个元素(1<=n<=100000)每个元素有一权值<=n.q个询问, ...

  10. hiho#1145 : 幻想乡的日常

    描述 幻想乡一共有n处居所,编号从1到n.这些居所被n-1条边连起来,形成了一个树形的结构. 每处居所都居住着一个小精灵.每天小精灵们都会选出一个区间[l,r],居所编号在这个区间内的小精灵一起来完成 ...