SASS

_core.scss

// 全コアファイルのインポート用SCSSファイル

@import "core/setting";
@import "core/utility";
@import "core/utility-css3";
@import "core/style-mixin-reset";
@import "core/style-mixin-base";
@import "core/style-mixin-layout";
@import "core/style-mixin-module";

_setting.scss

$column-width: 60px;    // 12 columns = 720px
$gutter-width: 20px;    // 11 gutters = 220px

// # Vendor-prefixed CSS Property
$use-prefix-webkit: true;
$use-prefix-moz   : true;
$use-prefix-ms    : true;
$use-prefix-o     : true;

//サポートブラウザの設定
$support-ie6: false;
$support-ie7: true;
$support-ie8: true;
$support-ie9: true;
$support-mozilla: true;
$support-webkit : true;
$support-opera  : true;

// # IE
$use-ie-filter    : false;
$use-ie-expression: false;

// # Path
$path-pj : "*****";
$path-img: "#{$path-pj}/img";
$path-sprite: "#{$path-img}/sprite.png";

// DOCTYPEがHTML5の場合のみ、
// $use-html5をtrueにし、スタイルを出力する。

$use-html5: true;

_style-mixin-base.scss

// 基本スタイルの変数とMixinsを記述します。

@mixin base-common {
  // ここにベースのスタイルを記述します。
  body {
  }
}

_style-mixin-layout.scss

// レイアウト用スタイルの変数とMixinsを記述します。


@mixin layout-site-header {
}

@mixin layout-site-footer {
}

_style-mixin-module.scss

// モジュール用スタイルの変数とMixinsを記述します。


@mixin mod-pageTtl {
    // ここにモジュールのスタイルを記述します。
    .pageTtl {
    }
}

// 記述するのは変数とMixins、関数などCSSに出力されないものだけです。
// 下記のように規則集合やCSSコメントは記述してはいけません。

/* @:topicPath */
.mod-topicPath {
    :
}

_style-mixin-reset.scss

// リセットスタイルの変数とMixinsを記述します。


@mixin reset-common {
  // ここにリセットのスタイルを記述します。
  html {
    overflow-y: scroll;
  }
  @if $use-html5 {
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
  }
}

_utility-css3.scss

// ベンダープリフィックスが必要なプロパティのMixinsを記述しています。


@mixin border-radius($property-value, $property-type: shorthand) {
  // [NOTE]
  // Firefox3.6以下のtopleftやbottomrightなどの
  // 1コーナーのみを指定する記述には対応していません。
  //
  $property: border-radius;
  @if $property-type != shorthand {
    $property: border-#{$property-type}-radius;
    // e.g. 'top-left', 'bottom-right'
  }
  // OUTPUT
  @if $use-prefix-webkit { -webkit-#{$property}: #{$property-value}; }
  @if $use-prefix-moz { -moz-#{$property}: #{$property-value}; }
  #{$property}: #{$property-value};
}

_utility.scss

// 画像置換やclearfixなどのスタイルセット用と、inline-blockやfont-familyといったプロパティ用のMixinsを記述しています。


// スタイルセット用のMixins

// # grid
// .container {
//   @include grid-unit(12);
// }
// .main {
//   @include grid-unit(8);
// }
// .side {
//   @include grid-unit(4);
// }
@mixin grid-unit($span) {
  float: left;
  margin-right: $gutter-width;
  width: ($column-width * $span) + ($gutter-width * ($span - 1));
}

@mixin clearfix {
    @if $support-ie6 or $support-ie7 {
        *zoom: 1;
    }
    &:after {
        content: "";
        display: block;
        clear: both;
    }
}

// プロパティ用のMixins