SASSについて学習したので内容をまとめてみる

sass.png
今回サイト制作会社では必ず使われているという「SASS」について勉強した。
学習に利用させていただいたのがこちら
たにぐちさんという方のYoutube講座
「Sassではじめる CSSプリプロセッサー」
https://www.youtube.com/playlist?list=PLh6V6_7fbbo-6wW7n8v6APW0Xkhhm1yRk
全7回の講座だ。語り口も優しく説明もとてもわかり易かった。今回、講座の中でも今の自分にとって大事そうなことを以下にまとめた。
(基本的に自分用のまとめなので、ご了承ください)
========================================
●ネストについて
セレクタの記述が1回で済む。これは自分でも即活用できそうだ。
①基本形
.container {
  h1 { color: red;}
  p { color: blue;}
}
②同列の記述
a {
  color: red;
  &:hover {text-decoration: none;}
}
③メディアクエリ
  h1 {
    color: red;
    @media screen and (max-width: 760px) {
      font-size: 10px;
    }
  }
========================================
●変数について
各セレクタの値を可変にすることが出来る。谷口さんいわく「変数はSassを使う一番のメリット」とのこと。マスターカラーなどサイト全体の設定に活用できそうだ。「&」で別のclass名を与え、そのclassに対して変数を利用することも可能(下記の場合、「.btn-large」「.btn-smal」)
$primary-color: red;
$btn-width: 100px; 
.btn {
  background-color: $primary-color;
  width: $btn-width;
  display: inline-block;
  &.btn-large { width: $btn-width * 2;}
  &.btn-small { width: $btn-width / 2;}
 }
========================================
●ミックスインについて
複数のプロパティをまとめて定義したい時に使う。
「ミックスインはどういう風に定義すれば再利用しやすいか分かりにくいので、同じ様な溜まってきてから定義を考えても良い」とのこと。
--------------------—-
①基本形
下の例ではimgやbtnを中央寄せにしたい時のプロパティのセットを@mixin hogeで定義。各セレクタに@include hogehogeと指定することによって、その内容を呼び出すことを可能にしている
@mixin hoge {
  display: block;
  margin: 10px auto;
}
img { @include hoge;}
button { @include hoge;}
--------------------—-
②引き数を定義
引き数を定義することによって、一部プロパティの値を可変にすることが出来る。
下の例では、$margin部分が該当
@mixin hoge($margin) {
  display: block;
  margin: $margin auto;
}
img { @include hoge(5px);}
button { @include hoge(10px);}
 
--------------------—-
③引き数の初期値の設定
mixinでプロパティを($margin: 3px)などと指定し、かつ@includeの()の中を空白にすることによって、mixinで指定したプロパティを初期値として指定することが出来る
@mixin hoge($margin:3px) {
  display: block;
  margin: $margin auto;
}
img { @include align-center();}
button { @include align-center(10px);}
--------------------—-
④その他:@content
@contentを使ってメディアクエリの設定を行う方法について説明されていたが、これはmixinに慣れてから使ってみる
=========================
●関数について
Sassでは「関数」が用意されており、また自分で生成することもできるとのこと。
動画で挙げられていた関数は下記。
ceilは切り上げ、floorは切り捨て、roundは四捨五入
その他
色の指定方法 text-shadow: 1px 1px 1px rgba(red, .3);
color: lighten(#333, 50%);
など。
@functionで関数を生成できるみたいだけど、難しそうなので飛ばす。
-------------------------–
$width: 100px;
.boxNormal { width: $width / 6;}
.boxCeil { width: ceil($width / 3);}
.boxCeil { width: floor($width / 3);}
.boxRound { width: round($width / 6);}
-------------------------–
.container {
  width: 800px;
  margin: 0 auto;
  $margin: -20px;
  h1 {
    background-color: #ccc;
    margin-left: $margin;
    padding-left: $margin * -1;
    text-shadow: 1px 1px 1px rgba(red, .3);
    color: lighten(#333, 50%);
  }
}
============================
●その他諸々
①Sassファイルでのコメントアウトについて
/* */でコメントアウトすると、CSSファイルにも残る
//でコメントアウトすると、CSSファイルには残らない
h1 {
  font-size: 24px;
  /* 色を赤にする */
  // 一行コメント
 /*! 色を赤にする */
}
“format”: “compressed””に設定を変更し、かつコメントアウト時にアスタリスクをつけるとCSSファイル内でコメントを表示させることが出来る。使わないと思うが一応。
---------------
②変数のスコープ
$primary-color: red;
全体に反映させたい時は一番外に記述しなければならない
---------------
③パーシャル(インポート)について
cssファイルを分ける時
○「_head.scss」と頭にアンダーバーをつけるとhead.cssが生成されないので、煩雑にならない
○style.scssにおいて、 @import “_head.scss”が基本形なんだけども、実は「_」も拡張子も省略できる。なので「@import “head”;」が一番短い形でベスト。
------&#4
5;--------
④for構文 と while構文
どちらも実務ではまだ必要なさそうなので、覚えないでおく。
================================
かねやん的まとめ
●ネスト→ ネストを使った記述はすぐに使えるので、取り入れてみる
●変数→ サイト全体共通する記述(サイトカラーなど)に変数を取り入れてみる
●ミックスイン→ 使い回すことの多い共通パーツに関する記述(main h1など?)にミックスインを取り入れてみる
まずはこの3つかな。それ以外は慣れたら考えよう!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です