【sass】sassフレームワークprofoundgridの使いかた

①sassフォルダにダウンロードデータの中のprofoundgrid/sass/grid/_grid.scssを入れる

②style.scssの冒頭に

@import "_grid.scss";

をいれる

③すぐ下のおれおれ変数ゾーンに以下の変数を入れる。
※ここで注意したいことが。この3つに「%指定」と「px指定」が混ざっていると、エラーが出てSassがコンパイルされない。

$total_width:100%; //カラムの総幅。px/%指定が可能
$container_margin:2%; //container左右のマージン。px/%/auto指定が可能
$gutter_width:2%; //生成カラムの余白（ガーター）幅。px/%指定が可能

また、カラム数も自分で決めることができます。よほどのことがなければ変えなくていい。

$total_columns:12;//カラム数。デフォルトは12

④例えば、ＰＣビューでは3つの要素が横並び、タブレットでは左2つの要素が横並び、最後の要素が段落ちして全幅にしたいときは以下のコード。

.container{
  width: 100%;
  margin:auto;
  position:relative;
  padding: 0 8.75%;
  box-sizing: border-box;
  @include media(min_container){
    padding: 0;
    max-width: 1640px;
  }
}

.grid_container{
  @include container();
  @include clearfix();
  @include media(tablet){
    @include generate_grid_positions(div,6);
  }
}


.cc{
  @include column(4);
  background: blue;
  height: 500px;
  @include media(tablet){
    @include column(6);
    margin-bottom: 10px;
  }
}

.grid_container .cc:nth-child(1){
  @include push(0);
}

.grid_container .cc:nth-child(2){
  @include push(4);
  @include media(tablet){
    @include push(6);
  }
}

.grid_container .cc:nth-child(3){
  @include push(8);
  @include media(tablet){
    @include push(0);
    @include column(12);
  }
}

全体を囲う要素containerを最大幅1640pxにして、その子要素にgrid_containerを入れる。
このgrid_containerがgridシステムの親要素として機能させるためprofoundgridのmixinである@include containerと@include clearfixを入れ、
メディアクエリ内で@include generate_grid_positions(div,6);を設定。引数はgrid_containerの子要素と、デフォルトとして一つの要素に何カラム使うのかの数値を。
メディアクエリでレイアウトを変えたい時、grid_containerにこの@include generate_grid_positions(div,6);をいれてやらないと、要素が重なってしまう。

あとはgrid_containerの子要素であるdiv.ccに@include column()と@include push()を設定。メディアクエリ内でこのmixinを設定することでブレイクポイントでレイアウトが変えられる。

【参考サイト】
http://commonsense-design.com/web/profound-grid-introduction/