#4 Sassを使ってCSSを効率的に記述する

Sassサス(サース)はCSSを便利に書く方法です。

Sassを使うとCSSを記述する際に変数や関数が使えるようになり、シンプルで効率的に記述することが可能になります。 Sassには「Sass(.sass)」や「Scss(.scss)」「Less(.less)」といった記法がありますが、 ここではScssサスを使って説明いたします。
また、Scss記法で記述したとしても最終的にCSSファイルとして書き出したいために コンパイル(変換)という作業が必要となります。 コンパイルする方法はアプリを使ったりターミナルからコマンド入力してコンパイルしますが、テキストエディタでも簡単にできます。

例)scssでの記述の仕方

.main{
  width:90vw;
  &__text{
    text-align:center;
    &--sub{
      font-size:0.8em;
    }
  }
  &__image{
    margin:0 auto;
  }
}
↓ cssとしてコンパイルしたとき

.main{
  width:90vw; }
.main__text{
    text-align:center; }
.main__text--sub{
    font-size:0.8em; }
.main__image{
    margin:0 auto; }

Visual Studio CodeでSCSSをコンパイルする設定

Visual Studio Code(VS codeブイエス コード)を使えば簡単にSCSSを扱えるようになります。

インストールとセッティングの手順

○ VS codeを起動して、左のアイコンの「機能拡張」をクリックし、検索窓に「Live Sass Compile」と入力。

出てきたらインストールボタンをクリック。
○ インストールボタンが消えて、歯車ボタンが出ますのでクリック。

「拡張機能の設定」をクリックすると設定ウィンドウが開きます。
○ 項目の設定をします。
Live Sass Compile › Settings: Formats
にあるsettings.jsonを編集をクリック
formats部分を以下のように変更します。

{
  "liveSassCompile.settings.formats": [

      {
          "format": "nested",
          "extensionName": ".css", /* 拡張子cssファイルをコンパイルする */
          "savePath": "~/../css"   /* scssフォルダと同改装にあるcssフォルダに入れる場合 */
      }
  ],
}
"format": は出力されたときの書かれ方(フォーマット)を指定できます。
説明を表示する/非表示にする

.classname{
  color:#F00;
  font-size:2em;
  span{
    padding:3px;
  }
}

/* expandedに設定したときの出力 */
.classname {
  color: #F00;
  font-size: 2em;
}

.classname span {
  padding: 3px;
}

/* nestedに設定したときの出力 */
.classname {
  color: #F00;
  font-size: 2em; }
  .classname span {
    padding: 3px; }

/* compactに設定したときの出力 */
.classname { color: #F00; font-size: 2em; }

.classname span { padding: 3px; }

/* compressedに設定したときの出力 */
.classname{color:#F00;font-size:2em}.classname span{padding:3px}
expanded: 普通の形式のcss、改行が入る
nested: 改行を詰めたcss
compact: セレクタごとの波括弧が1行になる。改行が入る
compressed: どこにも改行がない形式、で出力されます。
Live Sass Compile › Settings: Generate Map
にあるsettings.jsonを編集をクリック

{
  "liveSassCompile.settings.generateMap": false
}
.mapファイルを作らないように設定します。
同じファイルになる場合は以下のように記述
説明を表示する/非表示にする

{
  "liveSassCompile.settings.formats": [
      {
          "format": "nested",
          "extensionName": ".css",
          "savePath": "~/../css"
      }
  ],
  "liveSassCompile.settings.generateMap": false,
  その他設定A...,
  その他設定B...,
}

7. 画面下に表示される「Watch Sass」をクリックすると、scssファイルを保存すると同時に、 cssファイルをコンパイルし生成されます。

#5 SCSSの使い方

SCSSにより変数と関数を使えるようになり非常に便利です。

変数を使う

変数という箱に色や数値を入れておき、各プロパティの値に変数名で指定することで、変数に代入している値を変えるだけで変数を使っているすべての箇所変わります。

$colorA:#f3bebe; /* 文字列の頭に$をつけて変数の扱いになる */
$sizeB:12px;

.bg{
  background-color:$colorA;
}
.area{
  font-size:$sizeB;
  background-color:$colorA;
}
.navi{
  font-size:$sizeB;
}

.bg {
  background-color: #f3bebe; }
.area {
  font-size:12px;
  background-color: #f3bebe; }
.navi {
  font-size:12px; }

関数を使う

関数は自分で作る独自関数と、あらかじめ作られているネイティブな(ビルトインされた)関数の2種類があります。 Sassのネイティブ関数
@function 関数名($引数) {
  @return 戻り値;
 }


/*独自関数を作る*/
@function Round-pixel($i) {
  @return round($i)+px;  /*ネイティブのround関数 = 小数点の四捨五入*/
}

/*使い方*/
.selector{
  width: Round-pixel(123.656);
}
↓出力結果

.selector {
  width: 124px; }

変数とメディアクエリの初期設定

SCSSでメディアクエリを使うときに便利になる書き方の初期設定です。
今度コーディングするときにこちらを使ってみましょう。コピーして使ってみてください。

/* マップ $map:(key: value)  各幅の値を登録しておく */
$breakpoints: (
  'sm': 340,
  'md': 768,
  'lg': 1024,
  'xl': 1230,
  'xxl': 2000,
) !default; /*変数定義前に自動で値を代入させるため*/

@mixin mq($mq, $bp1:lg, $bp2:lg){        /* @mixin = 引数によってスタイルの設定を細かく指示 */
  $w1    : map-get($breakpoints, $bp1);
  $w2    : map-get($breakpoints, $bp2);  /* $breakpoints = マップ、から値を取得(map関数) */
  $min1  : 'min-width: #{($w1+1)}px';    /* xxx-width: と1px調整 */
  $max1  : 'max-width: #{($w1)}px';
  $min2  : 'min-width: #{($w1+1)}px';
  $max2  : 'max-width: #{($w2)}px';

  @if $mq == min {
    @media screen and ($min1) {
      @content;  /* @includeしたとき「プロパティ:値」をココに挿入させる */
    }
  }
  @else if $mq == max {
    @media screen and ($max1) {
      @content;
    }
  }
  @else if $mq == min-max {
    @media screen and ($min2) and ($max2) {
      @content;
    }
  }
}
以下のように使います

#contents_wrap{
  margin: 0 auto;
  padding:5px;
  @include mq('max','md'){ /*769pxまで*/
    width:800px;
    padding:8px;
    position:relative;
    border: 1px solid #F00;
  }
  @include mq('min-max','md','xl'){ /*770px以上、1230pxまで*/
    width:95vw;
    border: 1px solid #00F;
  }
  @include mq('min','xl'){ /*1231px以上*/
    width:1200px;
    padding:10px;
    position:relative;
    border: 1px solid #FF0;
  }
}
↓出力結果

#contents_wrap {
  margin: 0 auto;
  padding: 5px; }
  @media screen and (max-width: 768px) {
    #contents_wrap {
      width: 800px;
      padding: 8px;
      position: relative;
      border: 1px solid #F00; } }
  @media screen and (min-width: 769px) and (max-width: 1230px) {
    #contents_wrap {
      width: 95vw;
      border: 1px solid #00F; } }
  @media screen and (min-width: 1231px) {
    #contents_wrap {
      width: 1200px;
      padding: 10px;
      position: relative;
      border: 1px solid #FF0; } }
powerd by