SlideShare a Scribd company logo
実践Sass   後編
$company: NHN Japan
$twitter: @kosei27
$website: www.culture27.com
• 後編はライブラリを
 つくる側の視点でお話します

• ライブラリ ≒
 ちょっと便利なミックスインや
 関数が集まったパーシャルファイル
Agenda
1. 社内ライブラリを作った理由
2. 社内ライブラリの管理
3. 社内ライブラリの中身
4. 社内ライブラリを作った結果
社内ライブラリを
 作った理由
Sassの導入時、

Compassも当然検討しました

http://compass-style.org/
多機能だし便利そう
これでいいかも?
でも、、
• CSSの新しい構文に一部未対応だった
• 一部ミックスインの引数が多かった
• 不要なベンダープリフィックスが出てた

※今はかなり改善されているようです
あと、
• ミックスインや関数の
 サンプルコードやデモが少なかった

• 外部に依存するのはまだ避けたかった


※今もサンプルコードやデモは少ない…
それに、、
• 自社用に特化したものが欲しい
• 自分で書いてみた方が勉強になる
• なので、とりあえず作ってみたい
作ってみました
社内ライブラリの管理
sass
                  @mixin
  _setting.scss   @function

  _utility.scss

  style.scss
sass
                     @mixin
  _setting.scss      @function

  _utility.scss

  style.scss      @import
sass
                         @mixin
      _setting.scss      @function

      _utility.scss

      style.scss      @import
      style2.scss


他のファイルも同様にして、どこでも使えるように。
もっと細かいことはこちら…

NAVERでのSassの使い方 « NAVER Engineers' Blog
http://tech.naver.jp/blog/?p=1027
社内ライブラリの中身
いろいろ作ってみました
• CompassにもあるCSS3用のもの
• その他、地味だけど便利なもの
いくつか紹介します
1. inline-block
2. Link Underline
3. font-family
4. Placeholder Color
5. Minor CSS Hacks
•断っておきますが、

•基本的に地味です

•でも便利です
1. inline-block
display: inline-block;

.sample {

     display: inline-block;

     *display: inline;

     *zoom: 1;

}
毎回書くのはめんどう
display: inline-block;のミックスイン

@mixin inline-block {

    display: inline-block;

    *display: inline;

    *zoom: 1;

}
ミックスインを使う
@mixin inline-block {

    display: inline-block;

    *display: inline;

    *zoom: 1;

}

.sample {

    @include inline-block;

}
地味に便利ですね
問題: IE6/7対応が不要になった時

.sample {

    display: inline-block;

    *display: inline;

    *zoom: 1;

}

無駄なコードが出たままに…。
問題: IE6/7対応が不要になった時

@mixin inline-block {

    display: inline-block;

    *display: inline;

    *zoom: 1;

}          delete?
削除した場合の問題点
• 別プロジェクトのライブラリと
 差ができてしまう

• 後でやっぱりIE6/7対応が
 必要になった時に面倒
解決策
グローバル変数を使って、
出力するコードを出し分ける
変数でコードを出し分ける




$support-ie6: false !default;

$support-ie7: false !default;




これはIE6/7対応が不要な場合。
variables for settings
    sass

      _setting.scss
      _utility.scss

      style.scss
                      @import



プロジェクト全体の設定用なので、どこでも使えるように。
ほか、設定用の変数

// HTML5の要素の使用
$use-html5: true !default;

// IE8-10, Firefox, WebKit, Opera
$support-ie8     : true !default;
$support-ie9     : true !default;
$support-ie10    : true !default;
$support-mozilla: true !default;
$support-webkit : true !default;
$support-opera   : true !default;

これらを使ってコードの出し分けをします。
変数でコードを出し分ける

@mixin inline-block {

    display: inline-block;

    @if $support-ie6 or $support-ie7 {

        *display: inline;

        *zoom: 1;

    }

}

2つの変数のどちらかがtrueであればIE用のコードが出ます。
変数でコードを出し分ける
// _setting.scss
$support-ie6: false !default;
$support-ie7: false !default;


// _utility.scss
@mixin inline-block {
    display: inline-block;
    @if $support-ie6 or $support-ie7 {
        *display: inline;
        *zoom: 1;
    }
}

IE6/7対応が必要になったら、trueにしてコンパイルするだけ。
より地味に便利ですね
2. Link Underline
1. あり → なし

2. あり → あり

3. なし → あり

4. なし → なし
下線 あり→なし パターン
.link {

!   !   &:link,

!   !   &:visited {

          text-decoration: underline; }

!   !   &:hover,

!   !   &:active,

!   !   &:focus {

          text-decoration: none; }

}
毎回書くのはめんどう
ミックスインを使う




.link {

    @include link-underline(line-to-none);

}
ミックスインのコード

@mixin link-underline($type) {
    @if $type == line-to-none { // 1.あり→なし
        &:link, &:visited {text-decoration: underline;}
        &:hover, &:active, &:focus {
            text-decoration: none;}
    } @else if $type == line { // 2.あり→あり
        &:link, ..., &:focus {
            text-decoration: underline; }
    } @else if $type == none-to-line {..} // 3.なし→あり
    } @else if $type == none {..} // 4.なし→なし
}
タイプを指定する



@include link-underline(line-to-none);

@include link-underline(line);

@include link-underline(none-to-line);

@include link-underline(none);
地味に便利ですね
3. font-family
font-familyのコード

font-family:

   'Hiragino Kaku Gothic Pro', Meiryo,

    'MS PGothic', sans-serif;



font-family:
   Verdana, Arial, Helvetica, sans-serif;



組み合わせは他にも沢山。
font-familyのコード




font-family: monospace, serif;
                            for WebKit
// For IE6
_font-family: 'MS Gothic', monospace;
   underscore hack



CSSハックを使わないといけないケースも。
毎回書くのはめんどう
ミックスインのコード
@mixin font-family($type, $important: null) {
    @if ($important == 'important') or $important {
        $important: ' !important';
    }
    @if $type == sans-serif {
        font-family: sans-serif#{$important};
        @if $support-ie6 {
            _font-family: 'MS PGothic', sans-serif#{$important};
        }
    } @else if $type == serif {
        font-family: serif#{$important};
        @if $support-ie6 {
            _font-family: 'MS Mincho', serif#{$important};
        }
    } @else if $type == meiryo {
        font-family: Meiryo, 'MS PGothic', sans-serif#{$important};
    } @else if $type == monospace {
        font-family: monospace, serif#{$important};
        @if $support-ie6 {
            _font-family: 'MS Gothic', monospace#{$important};
        }
    } @else if $type == hiragino {
        font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif#{$important};
    } @else if $type == verdana {
        font-family: Verdana, Arial, Helvetica, sans-serif#{$important};
    } @else if $type == tahoma {
        font-family: Tahoma, Arial, Helvetica, sans-serif#{$important};
    }
}
ミックスインのコード
@mixin font-family($type, $important: null) {
    @if ($important == 'important') or $important {
        $important: ' !important';
    }
        :
    } @else if $type == monospace {
        font-family: monospace, serif#{$important};
        _font-family: 'MS Gothic', monospace#{$important};
    } @else if $type == hiragino {
        font-family: 'Hiragino Kaku Gothic Pro', Meiryo,
                    'MS PGothic', sans-serif#{$important};
    :
}
タイプを指定する




@include font-family(hiragino);

@include font-family(monospace);

@include font-family(**, important);




!important宣言もしたい場合は、第2引数にimportantを。
地味に便利…ですが、
ミックスインのコード
@mixin font-family($type, $important: false) {
    @if $important == 'important' or $important == true {
        $important: ' !important';
    } @else {
        $important: '';
    }
    @if $type == sans-serif {
        font-family: sans-serif#{$important};



                                    ちょっと
        @if $support-ie6 {
            _font-family: 'MS PGothic', sans-serif#{$important};
        }
    } @else if $type == serif {
        font-family: serif#{$important};
        @if $support-ie6 {
            _font-family: 'MS Gothic', serif#{$important};



                               失敗でした
        }
    } @else if $type == meiryo {
        font-family: Meiryo, 'MS PGothic', sans-serif#{$important};
    } @else if $type == monospace {
        font-family: monospace#{$important};
        @if $support-ie6 {
            _font-family: 'MS Gothic', monospace#{$important};
        }
    } @else if $type == hiragino {
        font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif#{$important};
    } @else if $type == verdana {
        font-family: Verdana, Arial, Helvetica, sans-serif#{$important};
    } @else if $type == tahoma {
        font-family: Tahoma, Arial, Helvetica, sans-serif#{$important};
    }
}
失敗だった理由
IE6対応も隠せたし、
便利は便利でした…が、
他の人が
別のフォントを追加しにくい…
教訓
1. ムリにCSSハックを
 隠そうとしない
2. 他の人がパターンを
 追加するケースを考える
解決策
素直に変数を使う
素直なコード

$ff-hiragino:

    'Hiragino Kaku Gothic Pro', Meiryo,

    'MS PGothic', sans-serif !default;



.sample {

    font-family: $ff-hiragino;

}
素直なコード
$ff-monospace: monospace, serif !default;

$ff-monospace-ie6:

            'MS Gothic', monospace !default;



.sample {

    font-family: $ff-monospace;

    _font-family: $ff-monospace-ie6;

}
Font-family用の変数

// # English
$ff-arial: Arial, Helvetica, sans-serif !default;
    :

// # Japanese
$ff-meiryo : Meiryo, 'MS PGothic',
                  sans-serif !default;
$ff-hiragino: 'Hiragino Kaku Gothic Pro', Meiryo,
                  'MS PGothic', sans-serif !default;
    :

// # Korean
$font-dotum-escape: B3CBC6C0; // 돋움(dotum)
$ff-dotum: #{$font-dotum-escape}, dotum,
               Arial, sans-serif !default;
地味に便利ですね
4. Placeholder Color
placeholderのコード



   2 colons
::-webkit-input-placeholder { color: red; }



:-moz-placeholder { color: red; }

   1 colon


地味に違いがある。今後はIE10用にさらに1行追加…?
毎回書くのはめんどう
ミックスインを使う




@include placeholder-color(red);
コンパイル後のコード



::-webkit-input-placeholder { color: red; }



:-moz-placeholder { color: red; }
ミックスインのコード

@mixin placeholder-color(
      $color,
      $selector: null
) {
      #{$selector}::-webkit-input-placeholder {
          color: #{$color}; }
      #{$selector}:-moz-placeholder {
          color: #{$color}; }
}
セレクタを指定する


input {
    @include placeholder-color(**, "&");
}

// コンパイル後のCSS
input::-webkit-input-placeholder {..}
input:-moz-placeholder {..}



親セレクタの参照の「&」を使う。
セレクタを指定する

<input type="text" required placeholder="**">


// SCSS
input {
    @include placeholder-color(**, "&:required");
}


// コンパイル後のCSS
input:required::-webkit-input-placeholder {..}
input:required:-moz-placeholder {..}
セレクタを指定する

input {
    @include placeholder-color(#333, "&");
    @include placeholder-color(blue, "&:required");
}


// コンパイル後のCSS
input::-webkit-input-placeholder {..}
input::-moz-placeholder {..}
input:required::-webkit-input-placeholder {..}
input:required::-moz-placeholder {..}
地味に便利ですね
@contentでより便利に
@contentを使う
@mixin placeholder-color($color, $selector: null) {
    #{$selector}::-webkit-input-placeholder {
        color: #{$color};
        @content;
    }
    #{$selector}:-moz-placeholder { color: #{$color}; }
}

input {
    @include placeholder-color(red) {
        background-color: blue;
        font-style: italic;
    }
}


{}を使ってコードブロックを記述して、@mixinに渡す。
@contentを使う
@mixin placeholder-color($color, $selector: null) {
    #{$selector}::-webkit-input-placeholder {
        color: #{$color};
        @content;
    }
    #{$selector}:-moz-placeholder { color: #{$color}; }
}

input {
    @include placeholder-color(red) {
        background-color: blue;
        font-style: italic;
    }
}


コードブロックを入れたい場所に@contentを書く。
現時点ではFirefoxはcolor以外は効かないので@contentなし。
@contentを使う
@mixin placeholder-color($color, $selector: null) {
    #{$selector}::-webkit-input-placeholder {
        color: #{$color};
        @content;
    }
    #{$selector}:-moz-placeholder { color: #{$color}; }
}

input {
  @include placeholder-color(red) {
    background-color: blue;
    font-style: italic;        CSS
  }
}                             input::-webkit-input-placeholder {
                               color: red;
                               background-color: blue;
       compiled                font-style: italic;
                             }
                             input:-moz-placeholder { color: red; }
地味に便利ですね
5. Minor CSS Hacks
マイナーなCSS Hackの例


button::-moz-focus-inner {

    border: 0;

    padding: 0;

}


これ、なんのハックだっけ…。
調べるのはめんどう
ミックスインを使う




button {

    @include hack-fx-remove-button-padding;

}
ミックスインのコード
// Firefoxでbutton要素に自動的に追加される余白を取り除く

// http://www.aheadcreative.com/removing-
unwanted-button-padding-in-firefox/

@mixin hack-fx-remove-button-padding {

    &::-moz-focus-inner {

        padding: 0;

        border: 0;

    }

}

このハックがどんなものか、他の人や自分が探す手間が省ける。
地味に助かりますね
ライブラリを作る手順
ライブラリを作る手順
1. 毎回書くのが面倒なコードを見つける

2. とりあえずミックスイン化する

3. 引数でプロパティの値を
 変更できるようにする

4. 設定用の変数でコードを
 出し分けられるようにする
ちゃんと使われるために
• ドキュメントを用意する
• 最初は説明会を開くと効果的
ドキュメントの内容
• ファイルの一覧とその役割
• 設定用変数の一覧とその役割
• ミックスイン
 • 役割や引数の説明
 • 使い方のサンプル(CSS to SCSS)
作る時に気をつける点
グローバル変数とローカル変数

$foo: 5px; // グローバル変数



.sampleA {

    $bar: 10px; // ローカル変数

}

仕様にはありませんが、便宜上、こんな感じで…。
ローカル変数のスコープ

.sampleA {

    $foo: 5px;      $fooのスコープ
    margin: $foo;   (使える範囲)

}

.sampleB {

    margin: $foo; // スコープ外 → エラー

}
グローバル変数のスコープ

$foo: 5px;

.sampleA {

    margin: $foo; // -> 5px
                              宣言後は
}                             どこでも
                              使える
.sampleB {

    margin: $foo; // -> 5px

}
グローバル変数と同名のローカル変数
$foo: 5px;

.sampleA {

    $foo: 10px; // グローバル変数の$fooを上書き

    margin: $foo; // -> 10px

}

.sampleB {

    margin: $foo; // -> こっちも 10px

}
グローバル変数と同名のローカル変数
.sampleA {

    $foo: 10px;

    margin: $foo; // -> 10px

}

$foo: 5px; // -> ここから先はグローバル変数?

.sampleB {

    margin: $foo; // -> 5px

}
おこるかもしれない問題
ローカル変数と
同名のグローバル変数を
追加する・されると、
出力結果が変わってしまう
解決策
ローカル変数の
命名ルールをつくる
ローカル変数の命名ルール
$foo: 5px;

.sampleA {

    $_foo: 10px; // ローカル変数

    margin: $_foo; // ローカル変数を使う

}

.sampleB {

    margin: $foo; // グローバル変数を使う

}

$_から始める。グローバル変数と被らなければ何でもいいです。
ミックスイン内のローカル変数

$foo: 5px;

@mixin sample {

    $_foo: 10px;

    margin: $_foo;

    // 意図的に $foo を上書き

    $foo: $_foo * 2;

}

@mixinや@function、ネストの中も同じルールで。
例外
@mixinの引数だけは
グローバル変数と
同名でも干渉しあわない
@mixinの引数とグローバル変数
$foo: 5px;

@mixin sample($foo:0) { // グローバル変数と同名の引数

    $foo: 10px; // $foo を上書き

    margin: $foo; // -> 10px

}

div {

    @include sample;

    padding: $foo;

}
@mixinの引数とグローバル変数
$foo: 5px;

@mixin sample($foo:0) { // グローバル変数と同名の引数

    $foo: 10px; // $foo を上書き

    margin: $foo; // -> 10px

}

div {

    @include sample;

    padding: $foo; // -> ????px

}

marginは10px、paddingはどうなるのか。
@mixinの引数とグローバル変数
$foo: 5px;

@mixin sample($foo:0) {

    $foo: 10px; // $foo を上書き

    margin: $foo; // -> 10px

}

div {

    @include sample;

    padding: $foo; // -> 5px が出力される!

}

グローバル変数の$fooと@mixinの引数$fooは別物として処理。
社内ライブラリを
 作った結果
コストがかかりました…
• 新規作成コスト
• 検証コスト(品質保障)
• 仕様変更対応コスト(CSS/Sass)
コストはかかりましたが
いいこともあります!
いいこと 1
コードを読み書きして
理解が深まった
➡ なので、よいコードが
 書けるようになった(はず)
いいこと 2
自社用に特化したコードや
得たノウハウを共有できた
➡ チーム全員の作業効率も上がった
いいこと 3
電子書籍を出せました!
(注:書店にはありません)

 ➡ 『Sass入門』

 ➡ Sass 3.2の機能について
  追加執筆予定
ただ、オススメするのは…
1. Compassを導入(初期コスト減)

2. その中で必要なものだけ使う

3. 問題があるところは、
 ムリに使わないか、自作して解決する
Compassを使いつつ、
自作ライブラリを育てよう!
ありがとうございました

More Related Content

What's hot

⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3
Nishida Kansuke
 
Sass(SCSS)について
Sass(SCSS)についてSass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
 
Css拡張言語のコトハジメ
Css拡張言語のコトハジメCss拡張言語のコトハジメ
Css拡張言語のコトハジメregret raym
 
BDD勉強会 第6回
BDD勉強会 第6回BDD勉強会 第6回
BDD勉強会 第6回zakihaya
 
マークアップ講座 02 CSS
マークアップ講座 02 CSSマークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
 
第3回BDD勉強会
第3回BDD勉強会第3回BDD勉強会
第3回BDD勉強会zakihaya
 
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_QueryHidekazu Ishikawa
 
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Nishida Kansuke
 

What's hot (9)

⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3
 
Sass(SCSS)について
Sass(SCSS)についてSass(SCSS)について
Sass(SCSS)について
 
CSS3 Design Recipe
CSS3 Design RecipeCSS3 Design Recipe
CSS3 Design Recipe
 
Css拡張言語のコトハジメ
Css拡張言語のコトハジメCss拡張言語のコトハジメ
Css拡張言語のコトハジメ
 
BDD勉強会 第6回
BDD勉強会 第6回BDD勉強会 第6回
BDD勉強会 第6回
 
マークアップ講座 02 CSS
マークアップ講座 02 CSSマークアップ講座 02 CSS
マークアップ講座 02 CSS
 
第3回BDD勉強会
第3回BDD勉強会第3回BDD勉強会
第3回BDD勉強会
 
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
 
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
 

Viewers also liked

HTML5とIE10とWindows 8
HTML5とIE10とWindows 8HTML5とIE10とWindows 8
HTML5とIE10とWindows 8
Microsoft
 
Porky
PorkyPorky
HTML5Conference2012 LT ピンチとチャンス
HTML5Conference2012 LT ピンチとチャンスHTML5Conference2012 LT ピンチとチャンス
HTML5Conference2012 LT ピンチとチャンス
Hajime Ogushi
 
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
Futomi Hatano
 
HTML Web Platform
HTML Web PlatformHTML Web Platform
HTML Web Platform
dynamis
 
HTML5時代のWebデザイン
HTML5時代のWebデザインHTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.js
yomotsu
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
Keisuke Todoroki
 
Firefox and Firebug with Foxkeh
Firefox and Firebug with FoxkehFirefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
dynamis
 
Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.next
yoshikawa_t
 
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53
masaaki komori
 
アプリケーションプラットホームとしてのWordPress
アプリケーションプラットホームとしてのWordPressアプリケーションプラットホームとしてのWordPress
アプリケーションプラットホームとしてのWordPress
Takayuki Miyauchi
 
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
Microsoft
 
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
Keisuke Todoroki
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
 
HTML5, きちんと。
HTML5, きちんと。HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
 

Viewers also liked (20)

HTML5とIE10とWindows 8
HTML5とIE10とWindows 8HTML5とIE10とWindows 8
HTML5とIE10とWindows 8
 
Porky
PorkyPorky
Porky
 
HTML5Conference2012 LT ピンチとチャンス
HTML5Conference2012 LT ピンチとチャンスHTML5Conference2012 LT ピンチとチャンス
HTML5Conference2012 LT ピンチとチャンス
 
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012HTML5マークアップ珍プレー集 - HTML5 Conference 2012
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
 
HTML Web Platform
HTML Web PlatformHTML Web Platform
HTML Web Platform
 
HTML5時代のWebデザイン
HTML5時代のWebデザインHTML5時代のWebデザイン
HTML5時代のWebデザイン
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.js
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
 
Firefox and Firebug with Foxkeh
Firefox and Firebug with FoxkehFirefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
 
Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.next
 
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53
 
アプリケーションプラットホームとしてのWordPress
アプリケーションプラットホームとしてのWordPressアプリケーションプラットホームとしてのWordPress
アプリケーションプラットホームとしてのWordPress
 
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
 
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 
HTML5, きちんと。
HTML5, きちんと。HTML5, きちんと。
HTML5, きちんと。
 

Similar to 実践Sass 後編

[JANOG38]Peeringの見える化を自力でやってみた。
[JANOG38]Peeringの見える化を自力でやってみた。[JANOG38]Peeringの見える化を自力でやってみた。
[JANOG38]Peeringの見える化を自力でやってみた。
Yutaka Kumamoto
 
2017年夏のPerl
2017年夏のPerl2017年夏のPerl
2017年夏のPerl
charsbar
 
Mojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてるMojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてるjamadam
 
最近の PHP の話
最近の PHP の話最近の PHP の話
最近の PHP の話
y-uti
 
とあるプロジェクトのつらみなコード
とあるプロジェクトのつらみなコードとあるプロジェクトのつらみなコード
とあるプロジェクトのつらみなコード
Yuya Taki
 
2018年夏のPerl5
2018年夏のPerl52018年夏のPerl5
2018年夏のPerl5
charsbar
 
CMSとPerlで遊ぼう
CMSとPerlで遊ぼうCMSとPerlで遊ぼう
CMSとPerlで遊ぼう
Daiki Ichinose
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
 
Less - first step
Less - first stepLess - first step
Less - first step
Kohki Nakashima
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
 
compassで簡単! CSS3を手軽に利用する
compassで簡単!  CSS3を手軽に利用するcompassで簡単!  CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
 
Hack/HHVM 入門
Hack/HHVM 入門Hack/HHVM 入門
Hack/HHVM 入門
y-uti
 
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013純生 野田
 
「Perl怖い」 In Chiba.pm #3
「Perl怖い」 In Chiba.pm #3「Perl怖い」 In Chiba.pm #3
「Perl怖い」 In Chiba.pm #3
民人 青山
 
Ruby 同好会宣言
Ruby 同好会宣言Ruby 同好会宣言
Ruby 同好会宣言
Yuya Takeyama
 
CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?
Hayato Mizuno
 
卒研発表
卒研発表卒研発表
卒研発表
yayugu
 
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
Hiroaki KOBAYASHI
 
知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数
Wataru Terada
 

Similar to 実践Sass 後編 (20)

[JANOG38]Peeringの見える化を自力でやってみた。
[JANOG38]Peeringの見える化を自力でやってみた。[JANOG38]Peeringの見える化を自力でやってみた。
[JANOG38]Peeringの見える化を自力でやってみた。
 
2017年夏のPerl
2017年夏のPerl2017年夏のPerl
2017年夏のPerl
 
Mojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてるMojoliciousをウェブ制作現場で使ってみてる
Mojoliciousをウェブ制作現場で使ってみてる
 
最近の PHP の話
最近の PHP の話最近の PHP の話
最近の PHP の話
 
とあるプロジェクトのつらみなコード
とあるプロジェクトのつらみなコードとあるプロジェクトのつらみなコード
とあるプロジェクトのつらみなコード
 
2018年夏のPerl5
2018年夏のPerl52018年夏のPerl5
2018年夏のPerl5
 
CMSとPerlで遊ぼう
CMSとPerlで遊ぼうCMSとPerlで遊ぼう
CMSとPerlで遊ぼう
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
 
Less - first step
Less - first stepLess - first step
Less - first step
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
 
compassで簡単! CSS3を手軽に利用する
compassで簡単!  CSS3を手軽に利用するcompassで簡単!  CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
 
Hack/HHVM 入門
Hack/HHVM 入門Hack/HHVM 入門
Hack/HHVM 入門
 
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
 
「Perl怖い」 In Chiba.pm #3
「Perl怖い」 In Chiba.pm #3「Perl怖い」 In Chiba.pm #3
「Perl怖い」 In Chiba.pm #3
 
Ruby 同好会宣言
Ruby 同好会宣言Ruby 同好会宣言
Ruby 同好会宣言
 
CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?
 
卒研発表
卒研発表卒研発表
卒研発表
 
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
 
数数
 
知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数知ってるようで意外と知らないPHPの便利関数
知ってるようで意外と知らないPHPの便利関数
 

実践Sass 後編

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n
  106. \n
  107. \n
  108. \n