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

a{
display: block;
text-align: center;
line-height: 50px;
color: #FFF;

  &:hover{
  background-color: gainsboro;
  color: #222;
  }
}

style.css

.g-nav ul li a {
  display: block;
  text-align: center;
  line-height: 50px;
  color: #FFF;
}
.g-nav ul li a:hover {
  background-color: gainsboro;
  color: #222;
}

擬似要素の場合

style.scss

a{
display: block;
text-align: center;
line-height: 50px;
color: #FFF;

  &::before{
  display: block;
  content: "";
  }
}

変数が使える

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;
  }
}