現状、（自分の中で）最も良いと思われるRailsでのStylesheetsディレクトリの構成

基本的な構成

前提

• Bootstrapを使う
• importの機能を理解して（requireも）、フレームワークとアプリケーションのスタイルを疎な関係にする
• application.scssは、requireをするだけ。そこにスタイルを記述してはならない。

構成

app/assets/stylesheets/
|-- applications.scss
|-- bootstrap_style.scss
|-- style.scss
|-- globals
    |-- _all.scss
    |-- _functions.scss
    |-- _mixins.scss
    |-- _variables.scss
|-- bootstrap_customs
    |-- _buttons.scss
    |-- _navbar.scss
    |-- ...
|-- modules
    |-- _welcome.scss
    |-- ...

applications.scss

/*
 *= require_self

 *= require font-awesome
 *= ...

 * vendor/assets
 *= require animate/animate.css
 *= ...

 * rails-assets
 *= require jquery-bar-rating/dist/themes/fontawesome-stars.scss
 *= ...


 *= require bootstrap_style
 *= require style
*/

bootstrap_style.scss

/* Bootstrap */
@import "bootstrap-sprockets";
@import "bootstrap";

style.scss

/* Global */
@import "globals/all";

/* Bootstrap Custom */
@import "bootstrap_custom/buttons";
@import "bootstrap_custom/navbar";

/* Application Style */
@import "modules/*";

globals/_all.scss

@import "./variables";
@import "./functions";
@import "./mixins";

globals/_variables.scss

$serif: Georgia, serif;
$sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;

$title-font-size: 42px;
$headline-font-size: 26px;
$sub-headline-font-size: 20px;
$base-font-size: 16px;
$small-font-size: 13px;

$baseline: 25px;
$base-line-height: ($baseline/$base-font-size);

参考
https://mattbrictson.com/smacss-and-rails
https://mattbrictson.com/lightning-fast-sass-reloading-in-rails