WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

sassの便利な機能を使う

入れ子(ネスト)にできる

style.scss

header {
 width: 100%;
 height: 100px;
 background: #B6E3F4;
    h1 {
      text-align: center;
    }
}

style.css

header {
  width: 100%;
  height: 100px;
  background: #B6E3F4;
}
header h1 {
  text-align: center;
}
メデイアクエリーもネストで記述する事で、見通しが良くなります。

style.scss

body {
background: #F00;
  @media (max-width:640px) {
    background: #000;
  }
}

style.css

body {
  background: #F00;
}

@media (max-width: 640px) {
  body {
    background: #000;
  }
}

変数が使える

style.scss

$point-pc: 1240px;
$point-tablet: 959px;
$point-lsp: 767px;
$point-sp: 575px;

演算できる

style.scss

$space: 8px;

h1{
  margin-bottom:$space * 2;
}


style.css

h1 {
  margin-bottom: 16px;
}

関数で繰り返し等の処理が出来る

style.scss

 @for $i from 1 through 8 {
    $width: percentage(1 / $i);
    .col#{$i} {
      width: $width;
    }
  }


style.css

.col1 {
  width: 100%;
}

.col2 {
  width: 50%;
}

.col3 {
  width: 33.33333%;
}

.col4 {
  width: 25%;
}

.col5 {
  width: 20%;
}

.col6 {
  width: 16.66667%;
}

.col7 {
  width: 14.28571%;
}

.col8 {
  width: 12.5%;
}

@mixinと@include を使ってスタイルを定義して、後で呼び出せる

PCファーストの場合
style.scss

//PCファースト
$point-spc: 1239px;
$point-tablet: 959px;
$point-lsp: 767px;
$point-sp: 575px;

@mixin spc {
  @media (max-width:$point-spc) {
    @content;
  }
}
@mixin tablet {
  @media (max-width:$point-tablet) {
    @content;
  }
}
@mixin lsp {
  @media (max-width:$point-lsp) {
    @content;
  }
}
@mixin sp {
  @media (max-width:$point-sp) {
    @content;
  }
}
body {
  background: #ccc;
}
  @include spc {
    body{
      background: #cf619e;
    }
  }
  body{
    @include tablet {
      background: #f00;
    }
  }
  body{
    @include lsp {
      background: #0F0;
   }
  }
  body{
    @include sp {
      background: #00F;
    }
  }

style.css

body {
  background: #ccc;
}
@media (max-width: 1239px) {
  body {
    background: #cf619e;
  }
}
@media (max-width: 959px) {
  body {
    background: #f00;
  }
}
@media (max-width: 767px) {
  body {
    background: #0F0;
  }
}
@media (max-width: 575px) {
  body {
    background: #00F;
  }
}


モバイルファーストの場合

//spファーストの場合
$point-lsp: 576px;
$point-tablet: 768px;
$point-spc: 960px;
$point-pc: 1240px;

@mixin lsp {
  @media (min-width:$point-lsp) {
    @content;
  }
}
@mixin tablet {
  @media (min-width:$point-tablet) {
    @content;
  }
}
@mixin spc {
  @media (min-width:$point-spc) {
    @content;
  }
}
@mixin pc {
  @media (min-width:$point-pc) {
    @content;
  }
}

@useを使って複数のファイルを同時に読み込む

@import "_import1-1.scss";
@import "_import2-2.scss";
@import "_import3-3.scss";

@use機能を使う場合、読み込むファイルはコンパイルする必要は無いので、パーシャルファイルにしておきます。
_(アンダースコア)をファイル名の前につける事でパーシャルファイル化出来ます。
複数のパーシャルファイルをinportする場合にはパーシャルファイルを読み込む順番に気をつけましょう。