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

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

Sassを使うとCSSを記述する際に変数や関数が使えるようになり、シンプルで効率的に記述することが可能になります。 Sassには「Sass（.sass）」や「Scss（.scss）」「Less（.less）」といった記法がありますが、ここではScss（サス）を使って説明いたします。
また、Scss記法で記述したとしても最終的にCSSファイルとして書き出したいためにコンパイル（変換）という作業が必要となります。コンパイルする方法はテキストエディタなどで簡単にできます。
また、scssファイルはcssフォルダと別に、scssフォルダを作りそのなかで管理しましょう。
階層イメージ


├── css
│   ├── reset.css
│   └── style.css
├── images
├── index.html
└── scss
    └── style.scss

例）scssでの記述の仕方


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

↓ cssフォルダに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でメディアクエリを使うときに便利になる書き方の初期設定です。
今度コーディングするときにこちらを使ってみましょう。コピーして使ってみてください。

ブレイクポイントは、$breakpoints変数に入れていますが、必要に応じて増やしたり、いらないものは削除して構いません。ただ$bp1と$bp2用に最低でも2つのブレイクポイントは登録しておきましょう。keyの名称に特にルールはないので何にしても構いません。


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

/* @mixin = 引数によってスタイルの設定を細かく指示 */
@mixin mq($mq, $bp1:lg, $bp2:lg){
  $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; } }

以前作ったレスポンシブサイトをscss化してみよう。

基礎1 #7 レスポンシブコーディングでサイト制作① で作成したレスポンシブデザインのcssをscss化してみましょう。

ここでは早速ブレイクポイントや色を変数で指定してみます。ただ、この変数を記述したファイルは別のファイルで管理したいため _variables.scss （variable（バリアブル） = 変数）という名前で保存し、 style.scssでそのファイルをインポートさせて使います。この2つのファイルはscssフォルダに入れておきます。
ファイル構成は以下のとおりです。


├── css
│   ├── reset.css
│   └── style.css
├── images
├── index.html
└── scss
    ├── _variables.scss
    └── style.scss

答え

_variables.scss


/* _variables.scss */
$breakpoints: (
  'sm': 340,
  'md': 768,
  'lg': 1215,
) !default;
@mixin mq($mq, $bp1:lg, $bp2:lg){
  $w1    : map-get($breakpoints, $bp1);
  $w2    : map-get($breakpoints, $bp2);
  $min1  : 'min-width: #{($w1+1)}px';
  $max1  : 'max-width: #{($w1)}px';
  $min2  : 'min-width: #{($w1+1)}px';
  $max2  : 'max-width: #{($w2)}px';

  @if $mq == min {
    @media screen and ($min1) {
      @content;
    }
  }
  @else if $mq == max {
    @media screen and ($max1) {
      @content;
    }
  }
  @else if $mq == min-max {
    @media screen and ($min2) and ($max2) {
      @content;
    }
  }
}

$mainColor:#7BC2BA;

style.scss


/* style.scss */
@charset "utf-8";
@import '_variables.scss';

body {
  font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
  color: $mainColor;
}
a {
  text-decoration: none;
}
.btn a,
input[type="submit"]{
  display:inline-block;
  margin:0 auto;
  padding:10px 0;
  width:130px;
  cursor:pointer;
  font-size:1.3em;
  color:#58847F;
  text-align:center;
  border: 10px solid #58847F;
  background-color:transparent;
}

/* ===========================
 header
=========================== */
header {
  border-top:20px solid $mainColor;
  /* widthをpx指定している部分がレスポンシブ化のポイントになります */
  .header__contents{
    width:1200px;
    margin:43px auto 88px;
    display:flex;
    justify-content:center;
    @include mq('max','md'){
      display:block;
      margin-top:240px;
      position:relative;
    }
    @include mq('max','lg'){
      width:100%;
    }
    &--text{
      align-self:flex-end;
      margin:0 30px;
      width:25%;
      border-top:1px solid $mainColor;
      border-bottom:1px solid $mainColor;
      @include mq('max','md'){
        margin:0 auto;
        width:90%;
      }
    }
    .text-right{
      text-align:right;
      @include mq('max','md'){
        text-align:left;
        border-bottom:none;
      }
    }
    &--logo{
      text-align:center;
      @include mq('max','md'){
        position: absolute;
        top:-228px;
        left: 0;
        right: 0;
        margin: auto;
      }
      &-mark{
        margin-bottom:20px;
      }
    }

  }
  .header__image{
    position:relative;
    height:600px;
    background:$mainColor url('../images/bg_header.jpg')no-repeat right center / cover;
    @include mq('max','md'){
      position:relative;
      height:40vh;
      background:$mainColor url('../images/bg_header.jpg')no-repeat right center / cover;
    }
    img{
      position:absolute;
      top:-60px;
      right:5vw;
    }
  }
}

/* ===========================
 nav
=========================== */
nav {
  background-color:$mainColor;
  ul{
    width:1200px;
    margin:0 auto;
    display:flex;
    justify-content: space-around;
    @include mq('max','md'){
      flex-wrap:wrap;
    }
    @include mq('max','lg'){
      width:100%;
    }
    li{
      width:120px;
      height:60px;
      @include mq('max','md'){
        margin:6px 0;
      }
      a{
        display:flex;
        justify-content: center;
        align-items: center;
        height:100%;
        color:#fff;
        @include mq('max','md'){
          border:1px solid #fff;
        }
      }
    }
  }
}


/* ===========================
 footer
=========================== */
footer {
  text-align:center;
  .footer {
    color:#fff;
    padding:60px 0 70px;
    background-color:$mainColor;
    h2{
      font-size:50px;
      margin:30px auto 80px;
      @include mq('max','md'){
        font-size:2em;
      }
    }
    &__image{
      width:100%;
      height:600px;
      background:$mainColor url('../images/bg_footer.jpg')no-repeat center center / cover;
      @include mq('max','md'){
        height:40vh;
      }
    }
    &__column{
      width:1200px;
      display:flex;
      margin:40px auto 100px;
      @include mq('max','md'){
        display:block;
      }
      @include mq('max','lg'){
        width:100%;
      }
      &--form{
        flex:1;
        width:60%;
        @include mq('max','md'){
          flex:1;
          width:100%;
        }
        form{
          width:60%;
          margin:10px auto 0;
          display:flex;
          flex-direction:column;
          text-align:left;
          @include mq('max','md'){
            width:80%;
          }
          p{
            font-size:0.9em;
            margin-bottom:15px;
          }
          input[type="text"]{
            margin: 0 0 20px 0;
            padding:5px 10px;
            font-size:1.2em;
            border-radius:5px;
            border:none;
          }
          textarea{
            margin: 0 0 20px 0;
            padding:10px;
            height:8em;
            font-size:1.3em;
            border-radius:5px;
            border:none;
          }
        }
      }
      &--map {
        flex:1;
        text-align:left;
        width:500px;
        height:450px;
        @include mq('max','lg'){
          margin:0 auto;
          width:97%;
        }
        iframe{
          width:500px;
          height:450px;
          @include mq('max','md'){
            width:90%;
            margin:50px auto 0;
            text-align:center;
          }
          @include mq('max','lg'){
            width:40vw;
            height:450px;
          }
        }
      }
    }
    &__copy{
      font-size:0.8em;
      padding:20px 0;
      color:#aaa;
    }
  }
}


/* ===========================
 コンテンツ
=========================== */
main {
  .menu {
    width:1200px;
    margin:0 auto;
    @include mq('max','md'){
      margin:30px auto 0;
    }
    @include mq('max','lg'){
      width:100%;
    }
    &__content{
      display:flex;
      text-align:center;
      @include mq('max','md'){
        display:block;
        position:relative;
      }
      &--text{
        flex:1;
        @include mq('max','md'){
          position: absolute;
          top:30px;
          left: 0;
          right: 0;
          margin: auto;
          z-index:99;
        }
        img{
          margin-top:80px;
          text-align:center;
        }
        h1{
          margin:20px 0 50px;
          font-size:1.3em;
        }
        p{
          width:65%;
          margin:0 auto 20px;
        }
      }
      &--image{
        flex:1;
        height:600px;
        @include mq('max','md'){
          position: relative;
          margin-bottom:2px;
          &::before{
            height:600px;
            background-color: rgba(0,0,0,0.6);
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            content: ' ';
          }
        }
      }
      .img-cording{
        background:url('../images/menu_cording.jpg')no-repeat center center / cover;
      }
      .img-design{
        background:url('../images/menu_design.jpg')no-repeat center center / cover;
      }
    }
  }

  .vision {
    position: relative;
    @include mq('max','md'){
      margin-top:50px;
    }
    &__image{
      border-top: 60px solid $mainColor;
      height:600px;
      background:$mainColor url('../images/bg_contents.jpg')no-repeat center center / cover;
      display:flex;
      justify-content: center;
      align-items: center;
      flex-direction:column;
      @include mq('max','md'){
        font:bold 1.6em/1.9em sans-serif;
      }
      /*背景画像に黒いカバーをかける方法*/
      &::before{
        height:600px;
        background-color: rgba(0,0,0,0.6);
        position: absolute;
        top: 60px;
        right: 0;
        bottom: 0;
        left: 0;
        content: ' ';
      }
      h1{
        font:bold 31px/2.3em sans-serif;
        text-align:center;
        color:#fff;
        z-index:99;
      }
      p{
        margin-top:75px;
        z-index:99;
      }
    }

    &__columun{
      width:1200px;
      margin:80px auto 150px;
      display:flex;
      justify-content: space-between;
      @include mq('max','md'){
        width:90%;
        margin:10px auto;
        display:block;
      }
      @include mq('max','lg'){
        width:97%;
      }
      &--item{
        width:30%;
        text-align:left;
        @include mq('max','md'){
          width:90%;
          margin-top:40px;
          text-align:left;
        }
        &-img{
          margin:0 0 50px;
          text-align:center;
          @include mq('max','md'){
            margin:0 0 10px;
        text-align:center;
          }
          img{
            height:200px;
          }
        }
      }
    }
  }
}

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

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

Visual Studio CodeでSCSSをコンパイル（変換）する設定

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

#5 SCSSの使い方

変数を使う

関数を使う

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

以前作ったレスポンシブサイトをscss化してみよう。

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア中級5）

実践3（バックエンド Laravel）

実践4（バックエンド Java）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

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

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

Visual Studio CodeでSCSSをコンパイル（変換）する設定

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

#5 SCSSの使い方

変数を使う

関数を使う

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

以前作ったレスポンシブサイトをscss化してみよう。

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ 初級）

基礎2（マークアップ 中級）

基礎3（マークアップ 上級）

応用1（フロントエンドエンジニア 初級）

応用2（フロントエンドエンジニア 中級1）

応用3（フロントエンドエンジニア 中級2）

実践1（フロントエンジニア 中級3）

実践2（フロントエンドエンジニア 中級4）

実践3（フロントエンドエンジニア 中級5）

実践3（バックエンド Laravel）

実践4（バックエンド Java）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア中級5）