Sassの基本的な操作と使い方

プログラミングの勉強日記

2020年6月14日　Progate Lv.95
JavaScript編が終了したのでSaasを勉強した。次はSQLについて勉強しようと思う。

Sassとは

　CSSをより便利かつ効率的に書くことができる。SassにはSASS記法とSCSS記法の2種類の書き方があるが、SCSS記法について説明する。拡張子は「.scss」となる。SassのメリットはCSSより記述量を減らすことができ、コードを再利用することができるところだ。

入れ子構造

　CSSを書き換えることができる。Sassでは1つのセレクタの中に別のセレクタを入れ子にして指定することができる。そのため、同じセレクタを何度も書かなくていい。
　メリット：大規模なサイトになるほど効果が大きくなる。クラス名の変更が楽になる。

html

<div class="header">
  <ul> 
    ...
  </ul>
</div>

css

.header{
  width:100%;
}
.header ul{
  padding:10px;
}

sass

.header{
  width:100%;
  ul{ 
    padding:10px;
  }
}

CSSでは.headerを2回書かないといけないが、Sassでは1回書けばいい。Sassの中の.headerの中にるulタグに対するCSSは、「.header ul」と同じ扱いになる。

入れ子構造の中でhover機能やactive機能を使う

　「セレクタ:hover」を「&:hover」と書きかえることで、hover機能やactive機能を使うことができる。

css

li{
  font-size:15px;
}
li:hover{
  background-color:red;
}

sass

li{
  font-size:15px;
  &:hover{
    background-color:red;
  }
}

特定要素の参照

　ある特定の要素のみの指定はCSSで「要素.クラス名」としていた。Sassの場合は&を使うことで簡単に指定することができる。

html

<ul>
  <li>1</li>
  <li class="second">2</li>
  <li class="third">3</li>
</ul>

css

li{
  font-size:15px;
}
li.second{
  color:red;
}

sass

li{
  font-size:15px;
  &.second{
    color:red;
  }
}

変数の定義

　$変数名:値;で定義することができる。
　メリット：同じ値を繰り返し使えるようになるので、変更が楽になる。
関数の定義は変数を利用する前に行う。また、変数の利用できる範囲のことをスコープという。例えば、h1{}内で定義した変数はh1の中でしか使えない。基本は入れ子構造の一番外で定義する。

sass

$program-page:red;
h1{
  color:program-page;
}
p{
  color:program-page;
}

mixin

　いくつかのコードを1つにまとめて複数個所で簡単に呼び出すことができる機能のこと。同じコードを何度も書く必要がなくなる。mixinは@mixin mixin名 {コード}とすることで定義できる。使用するためには、使用したいSassファイルの中で@include mixin名とすることで使える。

css

.lesson-1{
  width:300px;
  margin:20px;
  background-color:red;
}
.lesson-2{
  width:300px;
  margin:20px;
  background-color:red;
}

sass

@mixin lesson-card{
  width:300px;
  margin:20px;
  background-color:red;
}
.lesson-1{
  @include lesson-card;
}
.lesson-2{
  @include lesson-card;
}

　mixinには様々な情報を引数として渡すことができる。

引数を使わない場合

@mixin font-data{
  font-size:15px;
  color:red;
}
.card{
  @include font-data;
  color:blue;
}

　この例のようにfontを青くしたいときは、includeの下で指定しなければいけない。そこで、引数を使うと便利である。

引数を使う場合

@mixin font-data($color){
  font-size:15px;
  color:$color;
}
.card{
  @include font-data(blue);
}

色における便利な関数

　darken：色を暗くする関数
　lighten：色を明るくする関数
　rgba：色の不透明を指定する関数

使い方

color:darken(blue,50%);
color:lighten(blue,50%);
color:rgba(blue,50%);

外部ファイルを読み込む

　importを使う。読み込み先のファイル名の先頭には_(アンダーバー)を付ける必要がある。ファイルを読み込むためには@import "ファイル名"とする。ファイル名は_と拡張子は省略可能である。importは変数をまとめたファイルを作成して、使いたいファイル内で読み込むようにして使う。

_colors.sass

  $program-color:blue;

stylesheet.sass

@import "colors";
p{
  color:$program-color;
  font-size:15px;
}