SlideShare a Scribd company logo
実践Sass   前編
自己紹介
NHN Japanという会社で
MEをやっています


        @a_t
共著しました
電子書籍ですが
ブラウザで見れます
今すぐアクセス!
実践Sass
• 前編
• 導入、運用してわかった
  ポイントについて解説
➡ Sassを使い始めた初級者向け
実践Sass
• 後編
• 社内ライブラリを作って気づいた
  ポイントを解説
➡ ライブラリを作ろうとしている
 中級者向け
前編で扱う内容
• NHN JapanでのSass導入
• 運用時のポイント
• コーディングのポイント
NHN JapanでのSass導入
導入した環境
• MEの6-7割がMac
• エディターもバラバラ
• 基本的には全員CUIで導入
※全員が黒い画面に使えるわけではない
コンパイル設定の共有
CSSにはない「コンパイル」が必要


Sassのコンパイルコマンド
sass
  --watch [sass dir]:[css dir]
  --style [圧縮形式]
プロジェクトのwikiで共有

➡ 忘れることもある
Compassで解決

Sassのフレームワーク

ライブラリの他に、Sassには
ない拡張機能を利用できる
設定ファイル:config.rb

対象ディレクトリや
圧縮形式を書いておく

プロジェクトごとに
ルートディレクトリにコミット
Compassがあれば
compass watch


 全プロジェクトこれでOK!
環境差異
出力される@charsetが違う
@charset "utf-8"、
@charset "UTF-8"とか
おかげでCSSがコンフリクト
詳細な原因は不明

Win/Macの違い
rubyのバージョンの違い?

   あと勝ち解消でOK
CUIが苦手な人には
GUIツールもある
プロジェクトでGUIとCUIが
混在しても問題ない
Scout
•   無償

•   Compassも対応

•   サイトからDLできるver.ではconfig.rbが読めない

•   githubの最新版は、config.rbとSass3.2対応

•   Sass3.2の対応が遅かった
    (一昨日ようやくリリース)
Compass.app
• $10(paypal支払い)
• インストール不要
 • dropboxに入れておけば、
   環境をまたいで使える

• Sass3.2対応も早かった
運用時のポイント
複数MEで同時作業したい
• 上書き、
 コンフリクト対策が必要
• 作業者毎にファイルを分割
• 分割ファイルは
 パーシャルで作成する

• ファイル名の最初を
  _(アンダーバー)にする
パーシャル
• パーシャルファイルは
 インポートして使う

• コンパイル時に
 CSSファイルにマージされる
• インポートしてコンパイル
• ファイルを分割すれば、
 上書き/コンフリクトが
 発生しない

• 手動マージがいらないため
 コストもかからない
CSSを直接触りたい
• 関係者全員への
 Sassインストールの徹底は
 難しい
• CSSディレクトリに、
 Sass管理外のCSSを作った
• Sassが使えない環境の人は
 このCSSを編集してもらう

• 全員Sassを使える保証が
 ない場合
 保険として有効
• 放置すると内容がカオスに
• 定期的に内容を
 マージする必要あり
•   納品先がCSSを編集する場合

•   修正や追加で戻ってきた時には
    Sassが使えない…

•   Sassを入れろ、とは言いえない
    ➡ Sass管理外のCSSで対応できる
修正箇所の見つけ方
• ブラウザから れるのは
 CSSまで

• 問題箇所がどのSassファイ
 ルにあるかはわからない
line-comments
sass
  --watch sass:css
  --style expanded
  --line-comments
こうなる
:
/* line 301, ../sass/core/_utility.scss */
.fuga {
  clear: both;
}

/* line 60, ../sass/style.scss */
.hoge {
  color: red;
}
:
• 作業が終わったら元の形式
 で再コンパイルすればOK

• 迷ったら--line-comments
:compressedの注意
• 圧縮形式のひとつ
• 改行やコメントを削除し
 て、容量を軽減してくれる
• コンパイル後、CSSは1行に
• 複数人での作業時、
 CSSがコンフリクト頻発
• diffをとっても
 問題箇所がわからない
• 作業時は:expandedなど
 他の圧縮形式で

• 内容確定してから
 :compressed
コーディングのポイント
色値の扱いのコツ
• 変数に色値を入れると、
 カラーネームに
 自動変換される
変換例

//変換されない
.hoge{                    compiled
  color: #000000;
}
                    CSS
//変換される
                    .hoge{
$color:#000000;       color: #000000;}
.piyo{
  color: $color;    .piyo {
}                     color: black;}
• Sass3.2で変換対象の
 カラーネームが激増

• カラーネームのほうが
 色値より長い場合がある
長くなる例
#fafad2   →   lightgoldenrodyellow
#00fa9a   →   mediumspringgreen
#66cdaa   →   mediumaquamarine
#7b68ee   →   mediumslateblue
#48d1cc   →   mediumturquoise
#c71585   →   mediumvioletred
#ffebcd   →   blanchedalmond
#6495ed   →   cornflowerblue
#556b2f   →   darkolivegreen
#778899   →   lightslategrey
#b0c4de   →   lightsteelblue
#3cb371   →   mediumseagreen
• 長くなるのはちょっと…
• 色値とカラーネームが
 混ざるのも気になる

• 回避策は用意されていない
➡ ので何とかしたい
対応策 : 変換できない色値にする

//カラーネームに存在しないので変換されない
$color:#000001;

.piyo{
  color: $color;
}
                   CSS


                   .piyo {
     compiled
                     color:#000001;}
• 色が変わってしまう
➡ 厳密な色が必要な場合は使えない
対応策 : 文字列型で管理する

//文字列型にしてから、クォートを外す
$color:unquote('#000000');

.piyo{
  color: $color;
}
                   CSS


                   .piyo {
     compiled
                     color:#000000;}
対応策 : 文字列型で管理する

//これでも同じ
$color:#{'#000000'};

.piyo{
  color: $color;
}
                   CSS


                   .piyo {
     compiled
                     color:#000000;}
• 色型が文字列型になる
➡ 色をあつかう関数が使えなくなる
• 出力を:compressedにする
 • 色値/カラーネームのうち
  最も短い方を
  自動的に選択してくれる
 ➡ 両方の混在は回避できない
• Sassスクリプト自体を修正
• カスタムSass関数で対応
➡ 導入や作業者間の共有で難あり
• 状況によって
 対応方法を考えましょう
コードの保守性を上げる
• Mixin、@extend、変数、
 Sassコメント
 ➡ そのコードが何を意図したものかを
  明確にできる
こんなCSS
.hoge {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 200px;
  height: 300px;
  overflow: hidden;
  padding: 0;
  border: none;
  background: url(hoge.png) no-repeat 0 0;
  text-align: left;
  text-indent: -9999px;
  *text-indent: 0;
  *line-height: 9999px;
  *word-wrap: normal;
  -webkit-box-shadow: 1px 0 1px #000;
  -moz-box-shadow: 1px 0 1px #000;
  box-shadow: 1px 0 1px #000;
  border: 1px solid #000;
}
Sassではこう

.hoge{
  @include img-replacement
     (20px,30px,'hoge.png');
  @include box-shadow
     ('1px 0 1px #000');
  border:1px solid #000;
}
• 何のためのコードか、
 考える必要がない

• 要素固有のルールセットが
 見つけやすい
➡ 他人が見てもわかりやすい
• 変数を使うと値そのものに
 名前を付けられる

• 何のための値か明示できる
変数を使わないで書く

.hoge{
  background-color:#000;
  @include linear-gradient
   (top, #000, #fff);
}
ちょっとだけ使いやすいソース

.hoge{
  $start:#000;
  $end :#fff;
  background-color:$start;
  @include linear-gradient
   (top,$start,$end);
}
• 引数に直接値を書くと
 値を使いまわしづらい

• コピペもしづらい
• 変数で取り回しがよくなる
• 演算を使う場合も
 細かくコメントしておく

• Sassコメントは
 CSSに出力されないため、
 気軽に書ける
コンパイル後を意識する
• Mixinは@includeされた
 箇所で毎回展開される
 ➡ CSSが醜く肥大化する恐れ
• Mixin以外にも
• 不要なネスト
• @importの重複
➡ 気がつくと肥大化してたりする
• CSSのベタ書きよりも
 容量が増えたのでは意味が無い

• コンパイル結果をイメージした
 コーディングが重要
➡ たまにはコンパイルしたCSSを
 見てみましょう
@extendを安全に使う
• 任意のルールセットに、
 グループセレクタとして
 追加してくれる
@extendのサンプル

.foo{
" border:1px solid black;
" color:red;                       compiled
}
:
.hoge{
" @extend .foo;      CSS

}                   .foo,.hoge,.fuga{
.fuga{              " border:1px solid black;
" @extend .foo;     " color:red;}
" margin:10px;      :
}                   .fuga{margin:10px;}
• コードのスリム化
• グループセレクタの
 管理が容易に
ただし
ルールを決めずに使うと…
そのコード修正して大丈夫?
どこかから
@extendされてるかも…
恐怖
• 運用でカバー
• @extendしたいCSSは
 クラス名"extend-"で用意

• その他のルールセットへの
 @extendは禁止
NHN Japanでの運用
.extend-box{
" @include linear-gradient(top, #000, #fff);
" @include box-shadow(“0 0 1px #3cf”);
" border:1px solid red;
}
                         CSS
:
.hoge{                   .extend-box,
" @extend .extend-box;   .hoge{
" width:100px;           " extend-boxのコード}
}                        :
                         .hoge{
     compiled
                            width:100px;}
安心
• しかしこんな問題も
• どこからも@extendしなくても、
  .extend-のルールセットは
  出力されてしまう

• @extendすると、
  必ず不要なセレクタが出力される
@extendしなくても出力される
.extend-box{
" border:1px solid red;
" @include box-shadow(“0 0 1px #3cf”);
" @include linear-gradient(top, #000, #fff);
}
:
                         CSS
.hoge{
" width:100px;           .extend-box{
}                        " extend-boxのコード}
                         :
                         .hoge{
     compiled               width:100px;}
不要なセレクタが出力される
.extend-box{
" border:1px solid red;
" @include box-shadow(“0 0 1px #3cf”);
" @include linear-gradient(top, #000, #fff);
}
                         CSS
:
.hoge{                   .extend-box,
" @extend . extend-box; .hoge{
" width:100px;           " extend-boxのコード}
}                        :
                         .hoge{
     compiled
                            width:100px;}
• Placeholder Selector
  (Sass3.2から登場)

• 無駄なセレクタを
  抑制できるようになった
Placeholder Selectorのサンプル
%box{
" border:1px solid red;
" @include box-shadow(“0 0 1px #3cf”);
" @include linear-gradient(top, #000, #fff);
}
:                        CSS
.hoge{                  .hoge{
" @extend %box;
                        " %boxのコード}
" width:100px;
}                       :
                        .hoge{
      compiled               width:100px;}
• @extend、
 正しく使えば怖くない
後編につづく

More Related Content

What's hot

First sass
First sassFirst sass
First sass
Toshiaki Sasaki
 
Css preprocessorの始めかた
Css preprocessorの始めかたCss preprocessorの始めかた
Css preprocessorの始めかた
Hiroki Shibata
 
⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3
Nishida Kansuke
 
Sass(SCSS)について
Sass(SCSS)についてSass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
 
Sassをはじめよう!
Sassをはじめよう!Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
 
Css拡張言語のコトハジメ
Css拡張言語のコトハジメCss拡張言語のコトハジメ
Css拡張言語のコトハジメregret raym
 
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」Shunsuke Watanabe
 
マークアップ講座 02 CSS
マークアップ講座 02 CSSマークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
 
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化するメディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化するAtsushi Tadokoro
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
 

What's hot (12)

First sass
First sassFirst sass
First sass
 
Css preprocessorの始めかた
Css preprocessorの始めかたCss preprocessorの始めかた
Css preprocessorの始めかた
 
⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3
 
Sass(SCSS)について
Sass(SCSS)についてSass(SCSS)について
Sass(SCSS)について
 
Sassをはじめよう!
Sassをはじめよう!Sassをはじめよう!
Sassをはじめよう!
 
CSS3 Design Recipe
CSS3 Design RecipeCSS3 Design Recipe
CSS3 Design Recipe
 
Css拡張言語のコトハジメ
Css拡張言語のコトハジメCss拡張言語のコトハジメ
Css拡張言語のコトハジメ
 
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
 
マークアップ講座 02 CSS
マークアップ講座 02 CSSマークアップ講座 02 CSS
マークアップ講座 02 CSS
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
 
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化するメディア芸術基礎 Ⅰ 第4回:CSS入門  情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
 

Viewers also liked

HTML5とIE10とWindows 8
HTML5とIE10とWindows 8HTML5とIE10とWindows 8
HTML5とIE10とWindows 8
Microsoft
 
HTML5Conference2012 LT ピンチとチャンス
HTML5Conference2012 LT ピンチとチャンスHTML5Conference2012 LT ピンチとチャンス
HTML5Conference2012 LT ピンチとチャンス
Hajime Ogushi
 
Porky
PorkyPorky
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
 
Firefox and Firebug with Foxkeh
Firefox and Firebug with FoxkehFirefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
dynamis
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
Keisuke Todoroki
 
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
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
 
HTML5, きちんと。
HTML5, きちんと。HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
 
アプリケーションプラットホームとしてのWordPress
アプリケーションプラットホームとしてのWordPressアプリケーションプラットホームとしてのWordPress
アプリケーションプラットホームとしてのWordPress
Takayuki Miyauchi
 
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編Monaca
 
5分で分るflexbox
5分で分るflexbox5分で分るflexbox
5分で分るflexboxAzusa Tomita
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
masaaki komori
 
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
Microsoft
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
 
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
Keisuke Todoroki
 

Viewers also liked (20)

HTML5とIE10とWindows 8
HTML5とIE10とWindows 8HTML5とIE10とWindows 8
HTML5とIE10とWindows 8
 
HTML5Conference2012 LT ピンチとチャンス
HTML5Conference2012 LT ピンチとチャンスHTML5Conference2012 LT ピンチとチャンス
HTML5Conference2012 LT ピンチとチャンス
 
Porky
PorkyPorky
Porky
 
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
 
Firefox and Firebug with Foxkeh
Firefox and Firebug with FoxkehFirefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
 
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
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 
HTML5, きちんと。
HTML5, きちんと。HTML5, きちんと。
HTML5, きちんと。
 
アプリケーションプラットホームとしてのWordPress
アプリケーションプラットホームとしてのWordPressアプリケーションプラットホームとしてのWordPress
アプリケーションプラットホームとしてのWordPress
 
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
 
5分で分るflexbox
5分で分るflexbox5分で分るflexbox
5分で分るflexbox
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
HTML5とはなにか?マイクロソフトはHTML5をどう考えているのか?
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
 
CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法CSS Regionsを使った新しい CSSレイアウトを作る方法
CSS Regionsを使った新しい CSSレイアウトを作る方法
 

Similar to 実践Sass 前編

compassで簡単! CSS3を手軽に利用する
compassで簡単!  CSS3を手軽に利用するcompassで簡単!  CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
 
Sassを使ってみよう
Sassを使ってみようSassを使ってみよう
Sassを使ってみよう
GIG inc.
 
Less - first step
Less - first stepLess - first step
Less - first step
Kohki Nakashima
 
Sass
SassSass
SassSu Ga
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
 
CSS Preprocessor Hands-on
CSS Preprocessor Hands-onCSS Preprocessor Hands-on
CSS Preprocessor Hands-on
littlebustersreply
 
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話もOocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
 
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるReact で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
 
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
Toshimichi Suekane
 
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
 
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTechCSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
 
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
Koji Ishimoto
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and ProgrammingTaku AMANO
 
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
Ryuma Tsukano
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
 
壊れやすいCSS
壊れやすいCSS壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
 
Sass紹介
Sass紹介Sass紹介
Sass紹介
Daisuke Hirayama
 
SCSS + COMPASS 入門
SCSS + COMPASS 入門SCSS + COMPASS 入門
SCSS + COMPASS 入門
NOAN
 
CSSにもオブジェクト指向を - OOCSSことはじめ
CSSにもオブジェクト指向を - OOCSSことはじめCSSにもオブジェクト指向を - OOCSSことはじめ
CSSにもオブジェクト指向を - OOCSSことはじめ
Nisei Kimura
 
LESS楽しいれす(^q^)
LESS楽しいれす(^q^) LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
taiju higashi
 

Similar to 実践Sass 前編 (20)

compassで簡単! CSS3を手軽に利用する
compassで簡単!  CSS3を手軽に利用するcompassで簡単!  CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
 
Sassを使ってみよう
Sassを使ってみようSassを使ってみよう
Sassを使ってみよう
 
Less - first step
Less - first stepLess - first step
Less - first step
 
Sass
SassSass
Sass
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
 
CSS Preprocessor Hands-on
CSS Preprocessor Hands-onCSS Preprocessor Hands-on
CSS Preprocessor Hands-on
 
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話もOocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
 
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるReact で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
 
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
 
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
 
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTechCSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
 
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
 
壊れやすいCSS
壊れやすいCSS壊れやすいCSS
壊れやすいCSS
 
Sass紹介
Sass紹介Sass紹介
Sass紹介
 
SCSS + COMPASS 入門
SCSS + COMPASS 入門SCSS + COMPASS 入門
SCSS + COMPASS 入門
 
CSSにもオブジェクト指向を - OOCSSことはじめ
CSSにもオブジェクト指向を - OOCSSことはじめCSSにもオブジェクト指向を - OOCSSことはじめ
CSSにもオブジェクト指向を - OOCSSことはじめ
 
LESS楽しいれす(^q^)
LESS楽しいれす(^q^) LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
 

実践Sass 前編

Editor's Notes

  1. \n
  2. \n
  3. 実践Sassのセッション\n
  4. よむ\n
  5. sassの入門書を共著した→\nepubの電子書籍だけどブラウザから見れる→\nアクセス ⌘tab\n
  6. 前編は後編に分かれている\n読む\n
  7. \n
  8. よむ\n前置きはこのぐらいにして本編を始めます\n
  9. 本編をはじめる前に、前置きをもう一点、 \n発表中に「Sass」や「Sassファイル」と言った場合、\nそれは「SCSS記法」で書かれた「.scss」ファイルを指しています。\n エスシーエスエスっていうのはなにせが発音しづらいので、\nサンプル説明などで、scssファイルについてサスファイルなどといった場合は任意で脳内補完をおねがいします。\n scss記法の他にsass記法というのがあって混乱しがちですが、\n今回はsass記法については触れませんので、\nsassといったらscssであるということでひとつよろしくおねがいします\nという感じで、前置きはこのぐらいにして、そろそろ本編を始めさせていただきたいと思います\n
  10. \n
  11. 弊社のMEの6,7割がmacをつかってます→\nエディタもvimやcoda、dwなどバラバラ→\nSassは全員CUIで導入した→\nただ全員が黒い画面を使いこなしてるわけではない\nwikiにインストール方法などをまとめて共有\n\n
  12. Sassを導入してCSSから変わる点\nコンパイルが必要→\nよむ\nプロジェクトごとに変わってくる\n
  13. なので、プロジェクトごとにwikiで共有しました→\nしかし人力なので忘れるなど\nヒューマンエラーもある\n
  14. compassを使うともっと簡単に共有できる→\ncompassとは、\ncss3のミックスインなどがつまったライブラリと、\nSassにはない拡張機能が使えるようになるフレームワーク\n
  15. compassにはconfig.rbという設定ファイルが必要です\nそこに対象ディレクトリや形式を書いておく\n\nそして、それをプロジェクトごとに\nルートにコミットしておきます\n
  16. あとは\ncompass watchでOK→\n全プロジェクト共通でこのコマンドだけでよくなるため\n共有のミスなどは避けられます\n
  17. 続きまして環境差異についてです\nさきほどご覧頂いたとおり、弊社のMEの環境はバラバラ\nそんな中でSassを使っていると→\nよむ\nあ\n
  18. \n
  19. 続きましてSassのツールについてです\nsassにはGUIツールもある\nMEでもCUIが苦手な人や、\nデザイナーディレクターにインスコしてもらいたい場合は\nGUIを使いましょう→\n混在しても問題はないので、心置きなく使って行きましょう\n次に、メジャーなGUIツールである\nscout、config.appについて軽く紹介します\n
  20. 一つ目はスカウトです→\n無償で→コンパスにも対応しています→\nしかしサイトからDLできるバージョンは古くてconfigが読めない\nリンククリック\n→githubからDLしましょう。\nリンククリック\nこちらの最新版はconfigと3.2に対応済み\n戻る\n→ただ、無償ということもあるのかリリースが遅い\n
  21. よむ\n最後にサイト開いてみせる\n以上が、導入時に気になったポイントです\n
  22. 続きまして運用時のポイント\n
  23. 弊社では複数MEでひとつのプロジェクト作業することがあります\n弊社に限らず規模がある程度のところではよくある話\n当然対策が必要になる\n
  24. sassはこのように作業者ごとに\nファイルを分割して作業しました\n
  25. ファイル分割コツは、\n分割ファイルはパーシャルで作成する→\nファイル名の最初にアンダーバーを\nつけるとパーシャルになります\n
  26. パーシャルファイルとはなにかというと\nSassはコンパイル時に、sassディレクトリにある\nsassファイルと同名のCSSファイルを出力します\nこの際パーシャルのCSSは出力さません\n
  27. ではどう使うか。\nインポート前提→\nコンパイル時にマージされてCSSに出力されます\n
  28. 図で見るとこういう流れになります\n
  29. 読む\nこのような形で、\n作業者が複数になる場合は対応していました\n
  30. 続きまして、CSSを直接触りたい人がいる場合についてです\n例えばDがCSSをわかっていると、\nMEに依頼するまでもない細かい修正をDがやってしまうケース\nDもSassをインスコしているといいのですが、\n人数が増えれば増えるほど、全員にSassインスコの徹底は難しい\n
  31. そんな状況に対応するため\nよむ\n
  32. \n
  33. \n
  34. 自社案件でなく、受託開発の場合でも\nよむ\nかといってsassをインストールしてとはいいづらいです。\nそれよりも、このCSSに編集してくださいのほうが\n依頼しやすいかとおもいます\n\n頻繁に戻りがあるようなケースで相手方とコンセンサスがとれれば、\nひとつの方法としてはありかとおもいます\n
  35. 続いて修正箇所の見つけ方です\nブラウザで問題箇所を見つけた時、\n辿れるのはCSSまでです\n問題がsassのどこにあるかはわかりません\nとくに複数ファイルにまたがっている場合、\nどこに書いてあるか探すのに手間取る\n
  36. sassにはline-comentという出力がよういされています\nコンパイル時に指定することで、\nCSSにsassのどこにかいてあるかを出力してくれます\n具体的に見てみます\n
  37. これはラインコメントで出力したCSSです\n左から行数、ファイルのパスをCSSに出力してくれる\n
  38. \n
  39. 次に、compressedの注意点についてです\n読む\n
  40. \n
  41. \n
  42. 以上が運用全般でのポイントとなります\nつぎに、コーディング作業時の細かなポイントについて見てみます\n
  43. \n
  44. まずは色値の扱いです\nSassでは、\nよむ\n
  45. 具体的に見ましょう\nCSSの形式でベタ書きしている場合は変換されませんが、\n変数に格納してしまうと、カラーネームに変換されてしまいます\n
  46. この変換対象ですが、3.2になって激増しました。\n中には、色値より長いカラーネームも存在します\n
  47. \n
  48. 長くなってしまうのは歓迎できるものではありません\n混ざるのも気になります。\n出来れば変換しないで細しいですが\n困ったことに回避策が用意されていません\n
  49. よむ\n
  50. \n
  51. 2つめは文字列型で管理する方法です\n色値をクォートすることで文字列型にしつつ、\nアンクォート関数により文字列型のままで\nクォートを取り除きます\n\n
  52. アンクウォート関数は書くのが面倒なので\nハッシュマークを使ったこちらでも構いません\n
  53. \n
  54. \n
  55. \n
  56. \n
  57. コードの保守性を上げるコツです。\n内容としてはmixin、extend、変数、Sassコメントなど、\nSassの機能を正しく使おう、というものです。\nこれらを上手に使っていく事で、\nCSSのコードの塊について、\nどのコードがどんな意図を持って書かれたものか、\n明確にしていくことができます\n
  58. 例えばこんなCSSです。\nぱっと見長くて解読するのに骨が折れそうですが\n
  59. Sassではこうできました。\nimg-replacementはNHN Japanのライブラリで、\nCSSの画像置換をミックスイン化したものです。\nこのように、ミックスインによって、\nこの要素は画像置換の他には\nborderとboxshadowがあるとすぐに分かる\n
  60. よむ\n使いやすいものにできるし、\nそうしなければSassを使う意味が無いとも言える。\n
  61. 変数を使っても同じように\nちょっとした保守性を高めることができます\n読む\n
  62. \n
  63. \n
  64. \n
  65. よむ\nこのように、Sassの機能をきちんとつかっていくことで、\n保守性の高いコードをつくることができます\n
  66. Sass側のコードの保守性も重要ですが、\nコンパイル後、つまりCSSを意識したコーディングも重要\nたとえばmixin\n読む\n
  67. \n
  68. \n
  69. コンパイルしたコードを減らす方法として、\nextendがある\nextendとは何かというと\n読む\n
  70. .fooを、hogeとfugaがextend。\nコンパイルすると、右下のCSS。\nfooに、hogeとfugaが\nグループセレクタとして追加す\n
  71. \n
  72. \n
  73. 運用のルールを決めておかずに使ってしまうと、→\nコードを修正する場合→\n常に、どこからかextendされているかもという\n危険がともなうことになります\n
  74. まつ\nこれでは恐ろしくてうかつに修正もできません\n
  75. そんな状況を回避するために、運用でカバーします\nNHNJapanでは、・・・読む\n
  76. コードを見てみます。\n.extend-boxというextend用のルールセットを作り、\nそれをextendしています。\nこうすることで、\nどこかしらで修正作業が発生した場合も、\nextendされるものとそうでないものが明確なので\n影響範囲がわかりやすく、安心して作業できます\n
  77. まって\n\n安心です\n
  78. ただそれでもまだ問題がありました\nよむ\n
  79. .extend-boxはどこからも\n@extendされていない\nCSSには出てしまう\n赤字の部分\n
  80. extendしている場合も\nルールセットにHTMLからは指定しない\nextend-boxがでてしまう\n
  81. \n
  82. さきほどとほとんど同じですが、\nCSSの方に出力されていません。\n綺麗なコードを保つことができます\nまた、extend-と明示するまでもなく%はextend前提のため、\nクラス名のextend-を取っています・\n冗長だった@extend extend-の部分も綺麗になります\n\n
  83. 読む\nネストやミックスインと比べて、使い始めの頃は今ひとつ使いにくく感じてしまうextendですが、非常に強力な機能ですので、是非使ってみてください。\n\n
  84. 以上で前編の内容は終了となります。\n引き続き後半に映らせて頂きます\n