SCSSのファイル構成

SCSS（Sass）は、FLOCSSの様な構成でBEMの様な書き方をします。

WordPressのコーディング規約に則り__や--は使いません。

CSSとSCSSファイルはこういう構成になるようにしてください。

.
├── css
│   └── app.css
├── scss
│   ├── app.scss
│   ├── foundation
│   │   ├── _base.scss
│   │   └── _reset.scss
│   ├── layout
│   │   ├── _footer.scss
│   │   ├── _header.scss
│   │   ├── _main.scss
│   │   └── _sidebar.scss
│   └── object
│       ├── component
│       │   ├── _button.scss
│       │   ├── _dialog.scss
│       │   ├── _grid.scss
│       │   └── _media.scss
│       ├── project
│       │   ├── _articles.scss
│       │   ├── _comments.scss
│       │   ├── _gallery.scss
│       │   └── _profile.scss
│       └── utility
│           ├── _align.scss
│           ├── _clearfix.scss
│           ├── _margin.scss
│           ├── _position.scss
│           ├── _size.scss
│           └── _text.scss
└── style.css

ファイルは、必要に応じて追加して行きます。

app.cssはimport用に使います。

// ==========================================================================
// Foundation
// ==========================================================================

@import "foundation/reset";
@import "foundation/base";

// ==========================================================================
// Layout
// ==========================================================================

@import "layout/footer";
@import "layout/header";
@import "layout/main";
@import "layout/sidebar";

// ==========================================================================
// Object
// ==========================================================================

// -----------------------------------------------------------------
// Component
// -----------------------------------------------------------------

@import "object/component/button";
@import "object/component/dialog";
@import "object/component/grid";
@import "object/component/media";

// -----------------------------------------------------------------
// Project
// -----------------------------------------------------------------

@import "object/project/articles";
@import "object/project/comments";
@import "object/project/gallery";
@import "object/project/profile";

// -----------------------------------------------------------------
// Utility
// -----------------------------------------------------------------

@import "object/utility/align";
@import "object/utility/clearfix";
@import "object/utility/margin";
@import "object/utility/position";
@import "object/utility/size";
@import "object/utility/text";