Sass 基礎文法 1

はじめに

フロント実装を学んでいく上で、Sassを用いておりますので、用語等を中心に整理していきます。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。

Sass(サス)とは

• cssを効率的に書く言語（cssを拡張した言語）
• cssの中で変数を使え、計算を行うことができる。
• Sassファイル
  • cssファイルに記述はできない
  • Scssファイルにcssを記述することはできる。
  • Sassを扱うファイルの拡張子は２種類
    • sass拡張子（SASS記法を用いるが、cssの記法と差があり、普及しなかった。）
    • scss拡張子（cssの記法によく似たSCSS記法)

Sassのメリット

• 記述の簡略化
• プログラムのような処理
• 複数のcssファイルを1つにまとめることができる
• 同じ値を使い回すことができる

記述の簡略化

• CSSをネスト（入れ子）して記述できる。
• 親要素を複数記述しなくてもよくなった。

　　　　

プログラムのような処理

• 変数や条件分岐といったプログラミング処理ができる

qiita.scss

$変数名: 値;

//例）ピクセル数やカラーコードなどを何度も使用する値を変数定義
$section-color: rgb(30,30,30);
 section {
 background-color: $section-color;
}

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

パーシャル

• 複数のSassファイルを1つのCSSファイルとしてまとめることができる。
• また、パーシャルを使えば、機能ごとにファイルを分割し、管理することができる。

パーシャルファイル作成方法

• ファイル名を　_ から始める。(例えば、reset.scss)

_reset.scss

   //処理を記載する。

• パーシャルファイルを別ファイルで読み込む。

qiita.scss

   @import "reset";

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

変数を用いる。 ($変数名: 値;)

• 例）FFEC00という色をmainYellowColorという変数名で定義する。

color.scss

$mainYellowColor: #FFEC00; 

mixin　　

• まとまったスタイルを定義することができる。
• 変数は値を定義するものだったが、mixinはスタイルを定義するもの。

qiita.scss

//mixinを定義
@mixin mixin名() {}   

//mixinを呼び出す。
@include

例）.clearfoxをよく使うので、パーシャルファイルを作成し、ファイル内にmixinを定義する。

_clearfix.scss

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

&(アンパサンド) とは

• コードを簡易にできる。

_sample.scss

//例）_sample.scssにmixinを呼び出す。
.menu {
 @include clearfix();
  ...
 .menu__list {
  float: left;
  ...
  }
 }

//例２）mixinを使わなければ・・・冗長になる。
 .menu {
  &:after {
  content: '';
  display: block;
  clear: both;
  }

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

さいごに

日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。