管理Sass项目文件结构
构建你的结构体系
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/
是一个微观的。它里面放了一些特定的组件,比如说slider
,loading
,widget
或者其他的小组件。通常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项目文件结构的更多相关文章
- Nodejs+Grunt配置SASS项目自动编译
Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...
- 巡风代码架构简介以及Flask的项目文件结构简介
一.巡风: 巡风是一款什么东西,想必安全同行都不陌生吧.用它作为内网漏洞扫描管理架构是一种很好的选择,扫描快,开源,还可自己编写符合规则的POC直接放入相应目录来扩展.今天下午趁着有点时间捋了一下巡风 ...
- 使用maven来管理java项目
初学maven,简单总结一下学习心得,若有不对的地方,欢迎各位大神给我指正~ 总结分为6个部分 maven概述 maven安装 maven项目结构和创建方法 maven配置文件settings.xml ...
- 免费电子书:使用VS Online敏捷管理开源项目
今天推荐的是一本由微软出版社发布的免费电子书,涉及的话题是如何在Visual Studio Online中基于敏捷的思想来管理开源项目. 本书的几位作者(自称ALM领域的游侠),给大家分享了在一个敏捷 ...
- (ios开发学习笔记一)ios项目文件结构
转自:http://www.cnblogs.com/macroxu-1982/archive/2012/07/31/2616389.html 下面是单个窗体项目例子,我们从这个项目开始,说明ios项目 ...
- VM Depot 镜像新增系列III – 社交媒体,内容管理 与 项目协同系统
发布于 2014-06-30 作者 刘 天栋 对于架设可协同作业的网站平台, Windows Azure有着得天独厚的优势.这不仅在于其强大的扩展性和安全性,更重要的是 Azure 平台对各类 ...
- maven管理的项目出现Error configuring application listener of class org.springframework.web.context.ContextL
eclipse里用maven管理的项目,在运行的时候出现 Error configuring application listener of class org.springframework.web ...
- 酒店管理web项目总结
酒店管理web项目总结 半个月的努力,一个完整的酒店项目也就新鲜出炉了,在项目的制作中总结了一些酒店管理项目的特点. 1.需求分析,酒店管理需要什么? 1)首先系统的安全性,对于任何一个系统来说,安全 ...
- 用tortoiseGit管理GitHub项目代码(完整教程)
一.为什么要写这篇博客呢,因为在一开始用tortoiseGit来管理项目的时候,在百度上找了很多教程,但是感觉说的都不是很全,有些东西以及操作没写清楚,所以想写一片比较完整用tortoiseGit管理 ...
随机推荐
- FreeMarker备忘
以下内容全部是网上收集: FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主要由如下4个部分组成: ,文本:直接输出的部分 ,注释:<#-- ... --& ...
- 【读书笔记】读《JavaScript设计模式》之代理模式
一.定义 代理是一个对象,它可以用来控制对另一个对象的访问.它与另外那个对象实现了同样的接口,并且会把任何方法调用传递给那个对象.另外那个对象通常称为本体.代理可以代替其实体被实例化,并使其可被远程访 ...
- struts2 标签 --<<s:url >
Struts2中的链接标签 <s:url>和<s:a> 普通链接 Web程序中最普通的应用是链接到其他页面,下面看Welcome.jsp. <%@ page conten ...
- Fresco 源码分析(三) Fresco服务端处理(2) Producer具体实现的内容
我们以mProducerFactory.newNetworkFetchProducer()为例,因为这些创建新的producer的方式类似,区别在于是否有包装的处理器,即如果当前处理器中没有正在处理的 ...
- ubuntu下安装jdk
参考:http://blog.csdn.net/gobitan/article/details/24322561 Ubuntu Linux下安装Oracle JDK Dennis Hu 2014-4- ...
- Sonar相关资料
Sonar介绍及安装:http://www.cnblogs.com/suncoolcat/p/3323200.html Sonar安装: http://www.myexception.cn/open- ...
- SURF算法与源码分析、下
上一篇文章 SURF算法与源码分析.上 中主要分析的是SURF特征点定位的算法原理与相关OpenCV中的源码分析,这篇文章接着上篇文章对已经定位到的SURF特征点进行特征描述.这一步至关重要,这是SU ...
- ML 01、机器学习概论
机器学习原理.实现与实践——机器学习概论 如果一个系统能够通过执行某个过程改进它的性能,这就是学习. ——— Herbert A. Simon 1. 机器学习是什么 计算机基于数据来构建概率统计模型并 ...
- MATLAB学习笔记(四)——文件操作
首先,声明,如果学过C的话就可以不用看了,因为是一样的,只要注意一些系统变量的名字稍微变动了而已.都是基于ANSI C语言的标准库函数写的. (一)文件的打开与关闭 一.文件的打开 1.语法 fid= ...
- 如何写出安全的API接口
通过园友们的讨论,以及我自己查了些资料,然后对接口安全做一个相对完善的总结,承诺给大家写个demo,今天一并放出. 对于安全也是相对的,下面我来根据安全级别分析 1.完全开放的接口 有没有这样的接口, ...