, ,

[Susy2] Susy2 でプロジェクトを作成する

公開日: 2014/07/24
更新日: 2018/11/14

おさらいしつつ、サンプルプロジェクトを作成してみる。

Contents

プロジェクトの作成

インストールは完了しているものとします。

プロジェクトを作成します。
途中から適用する場合は、compass install susy でOK。

% compass create --using susy sample_susy2

下記のようなファイルが生成されました。

.
├── config.rb
├── sass
│   ├── _grids.scss
│   └── style.scss
└── stylesheets
    └── style.css

[補足] config.rb

先日見た際には require 'susy' の記述があったが無くなった？
確かになくても動きました。

[補足] grunt の設定

現在、compass watch がうまく動かないので、grunt で監視できるよう設定しておきます。

package.json を作成します。

package.json
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
  }
}

grunt をインストールします。

% npm install grunt grunt-contrib --save-dev

Gruntfile.coffee を作成します。

Gruntfile.coffee
'use strict'
module.exports = (grunt) ->
  grunt.loadNpmTasks('grunt-contrib');
  grunt.initConfig
    compass:
      dev:
        options:
          config: 'config.rb'
          environment: 'development'
          force: true
      prod:
        options:
          config: 'config.rb'
          environment: 'production'
          force: true
    watch:
      files: ['sass/*.scss']
      tasks: ['compass:dev']
  grunt.registerTask 'default', ['compass:prod']
  • grunt watch で sass/*.scss を監視し、変更があればコンパイル。
  • grunt で production 指定でコンパイル。

サンプルファイルを用意する

公式ドキュメントと下記のチュートリアルを動かしてみると、何となく利用方法がつかめるのですが、もう少しシンプルな内容を用意してみます。

index.html

レイアウトしたい要素を用意します。
contents と aside を container で囲みます。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
  <div class="container">
    <h1>Container</h1>
    <div class="contents">
      <h2>contents</h2>
    </div><!-- /.contents -->
    <div class="aside">
      <h2>aside</h2>
    </div><!-- /.aside -->
  </div><!-- /.container -->
</body>
</html>

style.scss

見やすくするため、チュートリアルの設定を元に div box の背景とタグの装飾だけ設定しておきます。

style.scss
// Screen
// ======
@import "grids";
.container {
  background-color: #fbeecb;
}
.contents {
  background-color: #fae7b3;
}
.aside {
  background-color: #71dad2;
}
h2 {
  text-align: center;
  font-size: 1rem;
  font-weight: normal;
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}

_grid.scss

こちらを変更しながら確認していきます。
css reset を設定しておきます。

_grid.scss
// Requirements
// ============
@import "compass";
@import "compass/reset";
@import "susy";
$susy: (
  global-box-sizing: border-box,
  use-custom: (rem: true)
);
@include border-box-sizing;
.container {
}
.contents {
}
.aside {
}

チュートリアルをみるといきなり上記の設定があってビックリしますが、とりあえずそのまま使います。

2014-07-24_susy2_02

$susy に設定を書く

準備ができたので susy を利用してみます。
susy では、$susy という hash に設定を書く決まりになっています。
謎の記述について確認しておきます。

@include border-box-sizing;

susy の global-box-sizing という mixin のそのまたショートカットのようです。
こんな CSS が出力されました。

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

global-box-sizing: border-box

global-box-sizing: border-box は、前述の border-box-sizing の設定値になります。

use-custom: (rem: true)

rem module の設定値のよう。default で true のようなので記述の必要ありませんね。

レイアウトする

@include container でコンテナを指定します。
clearfix は Compass の mixin です。

_grid.scss
.container {
  @include container;
  @include clearfix;
}

@include span で左右にレイアウトします。
12 カラムに分割し、9/12 を contents、3/12 を aside の表示に指定しています。
last オプションを付けると、その要素を最後の要素として扱ってくれます。
この場合は、3/12 の aside 要素が左に寄せになります。

_grid.scss
.contents {
  @include span(9 of 12 last);
}
.aside {
  @include span(3 of 12);
}

2014-07-24_susy2_01

基本的には、@include container と @include span だけでレイアウトをしてくれるようです。
この他にも細かな制御など色々と機能があるようなので、また調べてみます。