管理Sass项目文件结构

  创设你的布局连串

CSS预处理器的性状之一是能够把您的代码分割成很多少个文本,而且不会影响属性。那都要归功于Sass的@import一声令下,只要在你的支付环境下,你调用不管多少文件,最终将编译出3个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.CR-V.LX570.
Tolkien

接下去,大家一一来看结构中的每1个文件目录。

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/是2个宏观的(定义全局的线框),components/是二个微观的。它里面放了一些一定的机件,比如说sliderloadingwidget抑或别的的小组件。常常components/目录下的都以一对小组件文件。

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

Page

假如你须求针对一些页面写一定的体制,小编想将他们位于page/文本夹中是尤其酷的,并且以页面包车型客车名称来命名。例如,你的首页须要营造2个一定的体制,那么你就能够在page/文件夹中开创三个名为_home.scss文件。

  • _home.scss
  • _contact.scss

基于你协调的陈设,你能够依照本人的须要调用那个文件,制止与任何样式文件合并在一块儿。那着实主取决于你协调,在自己工作的地方,作者是不允
许那样的事体时有产生,只在急需的页面调用须要的文件。比如说,大家首页有一个一定的布局样式,编写翻译出来的CSS大约有200行代码。为了幸免各个页面加载这几个代码,笔者只在主页文件上引用这几个文件。

Themes

假使您像本人同样要为一个大型的网站制作三个核心,那么有3个theme/文本夹是相当有含义的。你能够把主题相关的文本放在那些文件夹中。那纯属跟现实的花色有关,你若是觉得跟大旨相关的,有必不可少引入。

  • _theme.scss
  • _admin.scss

Vendors

终极三个但不要不主要,创立vendors/文件夹,重要用来含有来自外部的库和框架的CSS文件。比如Bootstrap,jQueryUI,FancyCarouselSliderjQueryPowered等等。把这么些文件放在同二个文件夹中,你能够说,嘿,那几个代码不是本人的,不是本身写的,跟自个儿毫无干系。

例如:

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

从另一个角度来说,在本身平时做事中,还创办了3个vendors-extensions/文件夹,用来放置一些覆盖从表面引入进来的库和框架中的小组件。例如,我们能够在_bootstrap.scss文本中用来覆盖Bootstrap框架中的一些小组件。那为了防止和表面间接引来的零部件升级导致的争论,可能那不是1个很好的方案。

大约正是那一个,但不相同的花色只怕会分裂,但本身能够毫无疑问,你们都有了这么的3个概念。在文书夹中嵌套一个文书夹,那样的做法作者直接不太反对,但自笔者不
太喜欢那样的主意。我发觉,在多数状态之下,只需三个层级就足丰盛,既有限帮衬结构的简单与鲜明,而且不复杂。但话又说回去,若是您认为您的品种有须求嵌套
更深层次的文件夹,你也足以无限制的表述。

友善提示:若是你以为您的架构并不能够向我们表明SCSS文本夹的架构,你能够在根目录下创立二个README.md文件(或者在main.scss文件中一步一步表明)解释。

文本很酷?

有叁个难点常被人问到“多少文件才好不不难很多文件呢?”作者常回答“再多文件都不算多”。拆分成八个文本的主旨是帮忙你团队你的代码。假若您认为某事值得拆分成多少个文件,能够随便的拆分。正如CHRIS
COYIER
在《Sass Style
Guide
》中所说:

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

只是,作者建议不把单个组件拆分成八个公文,除非你有很好的理由这么做。平常自身更倾向于一个组件四个文书。俗话说“没有更加多,唯有更少”。用一个简短语义化的称谓,用来表示模块的名称。那样大家就足以因而查找名称找到您供给的事物。

总结

本文全数内容都以依据自个儿这会儿在高卢雄鸡Crédit
Agricole银行做前端(唯一一前端)的做事经历。针对于各人,有各自的景况和经历,能够有不一致的方法。

假设大家能给创设2个Sass项目选拔3个纯金法则,它大概会简单一些:就像捡东西的3个道理。如若做为一个集体,项指标布局要肯定各类人用得都痛快,让大家都要理解是怎么3回事。

你对创设Sass项目框架结构有其余想法和提出,我们都13分想听听。

相关文章