sass初心者のメモ

sass初心者が使ってみた際のメモです。
個人用テキストメモをそのまま貼り付けているため、書いた本人以外には分かりづらいと思いますので、内容については本文中の各urlのページを参考にしてください。

```
saas note.txt
(OS:Windows7.32bit)


これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)
http://liginc.co.jp/web/html-css/css/56599


* Rubyをインストール

http://rubyinstaller.org/
最新版をDL（現時点：rubyinstaller-2.3.1.exe）
インストーラー起動
インストール先「C:\Ruby23」
セットアップのダイアログで、「Rubyの実行ファイルへ環境PATHを設定する」にチェック


* Sassをインストール

cmd起動、「gem install sass」と入力してEnter


* GUIソフト「Koala」インストール

http://koala-app.com/

インストール完了後、起動して
歯車のアイコンをクリックし、左側メニューの「Sass → compass」にチェック。
また、左側メニューの「General → Language」から日本語モードに


---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
#01 Sassとはなにか？
http://dotinstall.com/lessons/basic_sass/10201

Sassの基礎

* 概要
- CSSを効率的に書くための記法
- 2つの記法
-- .sass (Ruby/haml)
-- .scss (CSS3)


* 公式サイト
http://sass-lang.com/

* 知識
- HTML/CSS/CSS3
- unix

* 環境


= rybyコマンドプロント

操作ディレクトリを移動

cd C:\data\coding\sass_lessons



---------------------------------------------------------------------------------------
#02 はじめてのSass
http://dotinstall.com/lessons/basic_sass/10202

.scss -> sass -> .css

-main.scss---
#main {
  width: 90%;
  p {
      font-size: 14px;
  }
}

--ruby cmd---
cssに展開
sass scss/main.scss:css/main.css

--main.css--展開ファイル
#main {
  width: 90%; }
  #main p {
    font-size: 14px; }

--ruby cmd---
cssに展開（インデント無しで展開する場合　変換オプション）
sass --style expanded scss/main.scss:css/main.css

--main.css--展開ファイル
#main {
  width: 90%;
}
#main p {
  font-size: 14px;
}

-----

インデント無し展開オプションを毎回記述するのは面倒なので、
一度に設定する方法を次回


---------------------------------------------------------------------------------------
#03 自動で変換させてみよう
http://dotinstall.com/lessons/basic_sass/10203

--ruby cmd---
sass --style expanded --watch scss:css
                            （\scssの内容に変更があれば\cssに反映させるの意味）


-main.scss---
ファイルの内容を変更すると…
#main {
  width: 90%;
  p {
      font-size: 16px;
  }
}

--ruby cmd---
自動で変更を認識して展開を実行してくれる

[ctl]＋[C]キーで自動実行を停止


---------------------------------------------------------------------------------------
#04入れ子構造を使ってみよう
http://dotinstall.com/lessons/basic_sass/10204


-main.scss---

/* comment */
/*
comment
comment
*/
// comment
#main {
  width: 90%;
  p {
      font-size: 16px;
      a {
        text-decoration: none;
        &:hover {
          font-weight: bold;
        }
      }
  }
}


-----

コメントが利用可能
・通常のCSSコメント…展開後も残る
・//スラッシュ二つ…展開後は削除される

擬似要素
入れ子で「&:hover」などと記述
&…入れ子の親要素の意味


---------------------------------------------------------------------------------------
#05 変数を使ってみよう
http://dotinstall.com/lessons/basic_sass/10205

変数データ型　数値を使ってみる

-main.scss---

// 変数：データにつけるラベル
// データ型（数値、文字列、真偽、色、リスト）

$baseFontSize: 14px;

#main {
  width: 90%;
  p {
      font-size: $baseFontSize;
      .sub {
        font-size: $baseFontSize - 2px;
      }
  }
}


--main.css--展開ファイル

#main {
  width: 90%;
}
#main p {
  font-size: 14px;
}
#main p .sub {
  font-size: 12px;
}

-----

変数の宣言
 頭に「$（ダラー）」記号を付ける
 変数を使って計算も可能


---------------------------------------------------------------------------------------
#06 文字列を扱ってみよう
http://dotinstall.com/lessons/basic_sass/10206

変数データ型　文字列を使ってみる

-main.scss---
// 変数：データにつけるラベル
// データ型(文字列) 

$imgDir: "../img/";

#main {
  width: 90%;
  //backgoround: url($imgDir + "bg.png"); //通常の記述法
  backgoround: url("#{$imgDir}bg.png"); //このような書き方も
  p {
      .sub {
      // ＃｛hogehoge｝ 変数を使わず直接計算も
        font-size: #{12 + 12}px;
      }
  }
}

--main.css--展開ファイル

#main {
  width: 90%;
  backgoround: url("../img/bg.png");
}
#main p .sub {
  font-size: 24px;
}


-----

画像ディレクトリを変数に
＃｛hogehoge｝シャープ波括弧で計算も可能


---------------------------------------------------------------------------------------
#07 色を扱ってみよう
http://dotinstall.com/lessons/basic_sass/10207

変数データ型　色を使ってみる


-main.scss---
// 変数：データにつけるラベル
// データ型(色) 

//カラーはcssで使用できる値を使用可能
//$brandColor: red;
//$brandColor: #ff000;
$brandColor: rgba(255,0,0,0.9);

// lighten/darken 変数の値を 明るく/暗く　相対指定が可能（sass関数）

#main {
  width: 90%;
  p {
      //color: $brandColor;
      color: lighten($brandColor, 30%);
      .sub {
        font-size: 14px;
      }
  }
}


--main.css--展開ファイル
#main {
  width: 90%;
}
#main p {
  color: rgba(255, 153, 153, 0.9);
}
#main p .sub {
  font-size: 14px;
}

-----

Sassに組み込まれている関数の一覧：sass built-in functions
http://sass-lang.com/documentation/Sass/Script/Functions.html


---------------------------------------------------------------------------------------
#08 @if文を使ってみよう
http://dotinstall.com/lessons/basic_sass/10208

データ型　真偽を使ってみる

-main.scss---
// データ型 （真偽）
// 条件分岐 @if @else
// 比較演算子 == != < > <= >=

$debugMode: true;
$x: 10;

#main {
  @if $debugMode == true {
    color: red;
  } @else {
    color: green;
  }
  p {
    @if $x > 20 { color: yellow; }
  }
}

--main.css--展開ファイル
#main {
  color: red;
}

-----

比較演算子を使った条件分岐で値を変更したりも可能


---------------------------------------------------------------------------------------
#09 @for, @while文を使ってみよう
http://dotinstall.com/lessons/basic_sass/10209


-main.scss---

// ループ
// @for
// @while

// .fs10 { font-size: 10px; }

@for $i from 10 through 14 { // for文 変数宣言 from 開始数値 through（スルー）終了数値
  .fs#{$i} { font-size: #{$i}px; }
}

$i: 20; // while文では先に変数宣言すること
@while $i <= 24 {
  .fs#{$i} { font-size: #{$i}px; }
  $i: $i + 1;
}


--main.css--展開ファイル

.fs10 {
  font-size: 10px;
}

.fs11 {
  font-size: 11px;
}

.fs12 {
  font-size: 12px;
}

.fs13 {
  font-size: 13px;
}

.fs14 {
  font-size: 14px;
}

.fs20 {
  font-size: 20px;
}

.fs21 {
  font-size: 21px;
}

.fs22 {
  font-size: 22px;
}

.fs23 {
  font-size: 23px;
}

.fs24 {
  font-size: 24px;
}

-----

through スルー

---------------------------------------------------------------------------------------
#10 リストを扱ってみよう
http://dotinstall.com/lessons/basic_sass/10210

-main.scss---
// リスト（似たようなデータをまとめて管理）

$animals: cat, dog, tiger;

@each $animal in $animals {
  .#{$animal}-icon { background: url("#{$animal}.png"); }
}

// この書き方でも同じ
@each $animal in cat, dog, tiger {
  .#{$animal}-icon { background: url("#{$animal}.png"); }
}

--main.css--展開ファイル
.cat-icon {
  background: url("cat.png");
}

.dog-icon {
  background: url("dog.png");
}

.tiger-icon {
  background: url("tiger.png");
}

.cat-icon {
  background: url("cat.png");
}

.dog-icon {
  background: url("dog.png");
}

.tiger-icon {
  background: url("tiger.png");
}

-----

---------------------------------------------------------------------------------------
#11 関数を使ってみよう (1)/#12 関数を使ってみよう (2)
http://dotinstall.com/lessons/basic_sass/10211
http://dotinstall.com/lessons/basic_sass/10212


-main.scss---
// 関数

$totalWidth: 940px;
$columnCount: 10;

@function getColumnWidth($width, $count) {
  // $columnWidthを計算
  $padding: 10px; // 関数内で宣言した変数は、その中でしか使用できない
  $columnWidth: floor(($width -($padding * ($count - 1))) / $count);
  @debug $columnWidth; // 計算された数値を確認したいとき、@debug を使用するとコンソールに計算結果を表示可能
  @return $columnWidth;
}

.grid {
  float: left;
  width: getColumnWidth($totalWidth, $columnCount);
}

--main.css--展開ファイル
.grid {
  float: left;
  width: 85px;
}

-----

グリッドシステムを想定。
変数の数値を変えることで色々なカラム数に対応


---------------------------------------------------------------------------------------
#13 ファイルを分離させてみよう
http://dotinstall.com/lessons/basic_sass/10213

#12のコードを役割毎にファイルを分離してみる


- _settings.scss---

$totalWidth: 940px;
$columnCount: 10;


- _functions.scss---

@function getColumnWidth($width, $count) {
  // $columnWidthを計算
  $padding: 10px; // 関数内で宣言した変数は、その中でしか使用できない
  $columnWidth: floor(($width -($padding * ($count - 1))) / $count);
  @debug $columnWidth;
  @return $columnWidth;
}


-main.scss---

@import "settings"; // _settings.scss の読み込み
@import "functions"; // _functions.scss の読み込み

.grid {
  float: left;
  width: getColumnWidth($totalWidth, $columnCount);
}


--main.css--展開ファイル

.grid {
  float: left;
  width: 85px;
}


-----

関数などを別ファイルにしてスッキリ管理しやすく
読み込み用の外部ファイルはファイ不明の頭に「_(アンダーバー)」を付ける


---------------------------------------------------------------------------------------
#14 @mixinを使ってみよう
http://dotinstall.com/lessons/basic_sass/10214

-main.scss---

// mixin

//@mixin round {
//  border-radius: 4px;
//}
//
//.label {
//  font-size: 12px;
//  @include round(10px);
//}

//@mixin round($radius) {// 引数の指定も可能
//  border-radius: $radius;
//}
//
//.label {
//  font-size: 12px;
//  @include round(5px);
//}

@mixin round($radius:4px) {// 引数の初期値の設定も可能
  border-radius: $radius;
}

.label {
  font-size: 12px;
  @include round(10px);
}


--main.css--展開ファイル

.label {
  font-size: 12px;
  border-radius: 10px;
}


-----

@mixin（ミックスイン）


---------------------------------------------------------------------------------------
#15 @extendを使ってみよう
http://dotinstall.com/lessons/basic_sass/10215

-main.scss---

// @extend （継承）

// .errorMsg
// .warningMsg

.msg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white;
}

.errorMsg {
  @extend .msg;
  background: red;
}

.warningMag {
  @extend .msg;
  background: orange;
}

--main.css--展開ファイル

.msg, .errorMsg, .warningMag {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white;
}

.errorMsg {
  background: red;
}

.warningMag {
  background: orange;
}


-----

共通プロパティを持つクラスは、@extend で継承させ
差分のみを記述すると、コードを短くできる


```