LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@akuden

sass初心者のメモ

Last updated at Posted at 2016-12-08

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 で継承させ
差分のみを記述すると、コードを短くできる
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?