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: 960px;
$point-lsp: 768px;
$point-sp: 480px;

演算できる

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 を使ってスタイルを定義して、後で呼び出せる

style.scss

$point-pc: 1240px;
$point-tablet: 960px;
$point-lsp: 768px;
$point-sp: 480px;


@mixin pc {
  @media (max-width:$point-pc) {
    @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: #aaa;
}
  @include pc {
    body{
      background: #000;
    }
  }

  body{
    @include tablet {
      background: #f00;
    }
  }

  body{
    @include lsp {
      background: #0F0;
   }
  }
  body{
    @include sp {
      background: #00F;
    }
  }

style.css

body {
  background: #aaa;
}

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

@media (max-width: 960px) {
  body {
    background: #f00;
  }
}

@media (max-width: 768px) {
  body {
    background: #0F0;
  }
}

@media (max-width: 480px) {
  body {
    background: #00F;
  }
}

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

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

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

設定ファイル

liveSassCompilerでは書き出すCSSのフォーマットを「nested」、「expanded」、「compact」、「compressed」の4つの中から選ぶことができます。「nested」はネストを維持したまま出力されます。「expanded」は通常のスタイルシートのように出力されます。「compact」は通常のスタイルシートのように出力されますが、全ての指定が一行ずつになります。「compressed」は可読性は無くなりますが、もっとも軽量化された出力になります。

  "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            //"format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css/"
        }
    ],