sass / scss

gemでsassをインストールします。

[vagrant@localhost ~]$ sudo gem install sass
Successfully installed sass-3.4.22

sass記法でcssを記載していきます。

#main {
  width: 90%;
  p {
    font-size: 14px;
  }
}

sassコマンドで、main.cssに変換します。

sass --style expanded scss/main.scss:css/main.css

変換結果です。

#main {
  width: 90%;
}
#main p {
  font-size: 14px;
}

sassからcssへの自動変換コマンド

[vagrant@localhost sass]$ sass --style expanded --watch scss:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: scss/main.scss
      write css/main.css
      write css/main.css.map

scssの特徴である入れ子構造

#main {
  width: 90%;
  p {
    font-size: 18px;
    a {
      text-decoration: none;
      &:hover {
        font-weight: bold;
      }
    }
  }
}

変数

$baseFontSize: 14px;

#main {
  width: 90%;
  p {
    font-size: $baseFontSize;
    .sub {
      font-size: $baseFontSize - 2px;
    }
  }
}

文字列

$imgDir: "../img/";

#main {
  width: 90%;
  background: url($imgDir + "bg.png");
  p {
    font-size: $baseFontSize;
    
  }
}