［アラフォプログラミング未経験］Sassの特徴について学んだみた

Sassの特徴の続きです。

この辺りの特徴はカリキュラムを進めてた時は流してましたが、、、

実装演習では、かなり使える！

というか使いこなせないと全くついていけませんでした。。。

ネストとかパーシャルとか、

恐る恐る実装してちゃんと画面が表示された時は、心地よい感動が駆け抜けましたぁー

目次

Sassのメリット

Sassには以下のようなメリットがあります。

プログラムのような処理ができる

Sassでは変数や条件分岐といったプログラムのような処理を記述できます。

そのため、CSSよりも柔軟なコーディングが可能となります。

Sassにおける変数

Sassでは、変数を使用することができます。

例えばピクセル数やカラーコードなどの何度も使用する値を変数を定義することで、

変数名で何度も使用することができます。変数を定義するには、

$変数名: 値;

のように記述します。

よく使うカラーコードや値は変数にすることであとで変更が楽になったり、コードが読みやすくなります。

例：Sassにおける変数

$section-color: rgb(30,30,30);

section {

 　　background-color: $section-color;
}

変数はまだ使いこなしてないなぁ。

確かに文字とかの色は変数で定義しておくと、

あとで修正楽そうだよね。。。

複数のCSSファイルを1つにまとめることができる

Sassではパーシャルという機能を使用することで、

複数のSassファイルを1つのCSSファイルとしてまとめることができます。

パーシャルを使えば機能ごとにファイルを分割することができ、CSSを管理しやすくなります。

パーシャル

パーシャルとは、分割したSassファイルのことです。

ファイルを分割することで、機能や内容ごとに管理ができるようになります。

一つのファイル に全てのスタイルを書くと膨大な記述になり、可読性が悪くなります。

一定のルールでファイルを分割して開発することで変更・修正がしやすくなります。

パーシャルファイルを作成するには、ファイル名を_（アンダースコア）から始めます。

パーシャルファイルを読み込むには、@import ファイル名と記述します。

〜カリキュラムより抜粋〜

sample.scss

@import “reset”;  /* _reset.scssを読み込む */
@import “header”; /* _header.scssを読み込む */

Railsで部分テンプレートを勉強した時も感じたけど、

便利やん！！

長いコードを見てられないアラフォーには必然ですよ、こりゃ。。。

同じ値を使い回すことができる

CSSでは、複数の要素に同じスタイルを適用させる場合、

何度も同じスタイルを書かなければなりません。

しかし、Sassでは変数を使うことによって、同じ値を使い回すことができます。

また、mixinという機能を使用することで、同じスタイルをまとめることもできます。

変数

Sassでは、変数を使用することができます。

何度も使用する値を変数を定義することで、変数名で何度も使用することができます。

変数を定義するには、

$変数名: 値;のように記述します。

_variable.scss

$mainYellowColor: #FFEC00; 　　　 /* #FFEC00という色をmainYellowColorという変数名で定義する */

変数を定義してある_variable.scssを読み込むことで、

_variable.scssに定義された変数を他のscssファイルで使用することができるようになります。

mixin

mixinとは、まとまったスタイルを定義することができる機能です。

<span style="color: #d32f2f">変数</span>

は値を定義するものでしたが、

<span style="color: #d32f2f">mixin</span>

はスタイルを定義するものです。

mixinを利用することで、何度も同じスタイルを記述する必要がなくなります。

mixinを定義するには、

<b>@mixin mixin名()　{}</b>

のように記述します。

_clearfix.scss

　　@mixin clearfix() {
 　　　&:after {
   　　　content: ‘’;
   　　　display: block;
   　　　clear: both;
 　　　}
　　}

&(アンパサンド)は、

擬似要素であるafterが適用されているセレクタを指します。

_sample.scss

.menu {
  @include clearfix();
  ...

  .menu__list {
    float: left;
    ...
  }
}

以下の例では、&は.menuに相当します。

_clearfix.scss

.menu {
  &:after {
    content: '';
    display: block;
    clear: both;
  }

  .menu__list {
    float: left;
    ...
  }
}

つまり、擬似要素afterは、.menuに対して適用されているということです。

このmixinの呼び出しは@includeを使用して以下のように書きます。

_sample.scss

.menu {
 @include clearfix();
 ...
 .menu__list {
   float: left;
   ...
 }
}

sample.scssの記述は以下のようなSassコードと同じです。

_clearfix.scss

.menu {
 　&:after {
   　content: ‘’;
   　display: block;
   　clear: both;
 　}
 　.menu__list {
   　float: left;
   　...
 　}
}

clearfixもさらにパーシャルで部分テンプレートにすれば、さらにスッキリするのか！

使いこなせるとかなり便利になりますね。。。