【備忘録】Sassについて勉強してみたのでまとめてみた2

はじめに

本記事の目的は、現在フロントエンジニアを目指して勉強中の自分が忘れないように記録しておくためです。間違っている箇所等ありましたら、ご指摘頂けると助かります。

【備忘録】Sassについて勉強してみたのでまとめてみたの続きみたいなものです。
前回同様チュートリアルベースで学んだことをまとめていきたいと思います。

Sass のデータ型

これまで CSS で使っていた数字、色、リスト以外にも、マップ、null, boolean が使える

/*数字*/
.numbers {
    font-weight: 400:
    font-size: 20px;
}

/*色*/
.color {
    color: blue;
    background-color: #ff000;
    border-color: rgba(0,0,0,0.8);
}

/*リスト*/
.lists {
    margin: 10px 15px 5px 20px
    font-family: 'Raleway','Lato','Dosis';
    border: 1px solid blue;
}

マップ

/*マップ*/
/*stringやnumber型でも保持できる*/

$colors: (
    primary: blue,
    secondary: green,
    1: yellow,
  );

/*マップの使い方*/ 
h1 {
  /*map-getはビルトインモジュール。*/
  color: map-get($map: $colors, $key: 1); /*yellow*/
  background-color: map-get($map: $colors, $key: secondary); /*green*/
}

/*boolean -> true/ false */
/*If Directive*/

@mixin headingSize($size) {
  @if ($size == large) {
    font-size: 45px;
  } @else if($size == medium) {
    font-size: 30px;
  } @else {
    font-size: 15px;
  }
}

/*使い方*/
h1 {
  @include headingSize(large); /*45px*/
}

Interpolation　#{$some_variable}で代入できる。

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);

For Loop

/*key valueで保存*/
$colors: (
  1: red,
  2: green,
  3: blue,
  4: orange,
);

/* iでカウント。1 to 4に変更すると4を含まない*/
@for $i from 1 through 4 {
  /*i -> 1, 2, 3, 4*/
  /*セレクタを指定してスタイリング*/
  .paragraph-#{$i} {
    background-color: map-get($map: $colors, $key: $i);
  }
}

Each Loop

/*色のリスト保存*/
$each_colors: red green blue orange;

/*リストを一つずつみていく*/
@each $each_color in $each_colors {
  .paragraph-#{$each_color} {
    background-color: $each_color;
  }
}

便利な書き方

mixin を使ってレスポンシブを効率的に書く

@mixin responsive($breakpoint) {
  @if ($breakpoint == xl) {
    @media (max-width: 1200px) {
      @content;
    }
  }

  @if ($breakpoint == lg) {
    @media (max-width: 1000px) {
      @content;
    }
  }

  @if ($breakpoint == md) {
    @media (max-width: 700px) {
      @content;
    }
  }

  @if ($breakpoint == sm) {
    @media (max-width: 500px) {
      @content;
    }
  }
}

/*使い方*/
h1 {
  font-size: 100px;

  /*mixinをincludeした後の波括弧内のコードが@content部分に入る*/
  @include responsive(md) {
    font-size: 50px;
  }
  @include responsive(sm) {
    font-size: 20px;
  }
}

ファイル構造

チュートリアル内でフォルダを細かく分けていたのが、分かりやすくて参考にしたいと思いました。

root
    -css
        -main.css(main.scssからのコードを変換したもの)
    -scss
        -abstracts (mixinやvariableなど抽象的なもの)
            -_mixins.scss
            -_variables.scss
        -base(スタイリング全体で設定したいもの、*やhtml, containerなど)
            -_base.scss
        -components(部品として分けられるもの)
            -_button.scss
            -_heading.scss
            -_logo.scss
        -layout(セクションごとにスタイルシート分けて設定)
            -_header.scss
            -_footer.scss
            -_navigation.scss
    main.scss(上のシートを全てimportする)
    index.html

追記

Udemy のSASS - The Complete SASS Course(CSS Preprocessor) で学びました。
プロジェクトベースでとても分かりやすかったです。

　その他

Sass公式ウェブサイト