sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。

Contents

1 sassとは
2 インストール＆コンパイル
3 一般的な記法など
4 参考リンク

sassとは

一言でいうとCSSをプログラミングのように書ける言語です。具体的には下記のようなことができます。

変数、配列や条件分岐、繰り返しなどを使うことができる
ネストによりCSSの階層構造や継承を表記できる
テンプレート化したものを読み込んだりなどもできる
もちろん生のCSSを使うこともきます。

cssも保守するの結構大変ですもんね・・

インストール＆コンパイル

前提としてruby(とgem)がインストールされていないと動きません。

ruby(とgem)がインストールされていれば下記コマンドで一発インストールできます。

gem install sass

1	gem install sass

あとはsassの記法により、～.scssというファイルをつくり、下記コマンドで一気にcssファイルを作れます。

sass sample.scss:sample.css

1	sass sample.scss:sample.css

またnodeをインストールしたあと使うこともできます。

npm install -g node-sass

1	npm install -g node-sass

一般的な記法など

sample.scss

$imgDir:"../img";
$width:"50%";

#main{
  /** 変数を使うことができる **/
  width:$width;
  background:url("#{$imgDir}bg.png");
  
  p{
    /** 数式を使える  **/
    font-size:#{12+12}px;
  }
}

$debugMode:true;
$x:10;

/** 条件分岐 **/
#main2{
  @if $debugMode == true{
    color:red;
  } @else {
    color:green;
  }
  
  p{
    @if $x > 10 {
      color:yellow;
    }
  }

}

/**ループ  **/
$i:10;
$i2:10;
#main3{
  /**10から14まで **/
  /** 変数を文字で使うときは **/
  /** 下記のような記法をインターポーションという**/
  @for $i from 10 through 14 {
    .fs_#{$i} {font-size: #{$i}px;}
  }

  @while $i2 <= 14 {
    .fs_#{$i2} {font-size: #{$i2}px;}
    $i2:$i2+1;
  }
}

/**配列 **/
$animals: cat,dog,tiger;

@each $animal in $animals{
  /** 最初の#はidの# **/
  ##{$animal}_icon {background:url("#{$animal}.png");}
}


/** 関数 a**/
$totalWidth:940px;
$columnCount:10;
@function getColumnWidth($width, $count){
    $padding:10px;
    $columnWidth:floor( ($width) - $padding*($count) / $count );
    /** debugはコンソールに出力をする **/
    /** @debug $columnWidth **/;
    @return $columnWidth;
}

.grid{
  float:left;
  width:getColumnWidth($totalWidth, $columnCount);
}

/** mixin テンプレート的な機能 **/

@mixin round-btn($radius:4px) {
  border: 1px solid #b8b8b8;
  border-radius:5px;
  background-color:#c9c9c9x;
}

@mixin auto-color($color) {
  @include round-btn;
  color:$color;
}

.btn-blue{
   @include auto-color(blue);
}

.btn-red{
  @include auto-color(red);
}

/** 継承  **/

#main4{
  background-color:red;
  color:gray;
}

#main5{
  @extend #main4;
  border:1px solid white;
}

100

101

102

103

104

105

106

107

$imgDir:"../img";

$width:"50%";

#main{

/** 変数を使うことができる **/

width:$width;

background:url("#{$imgDir}bg.png");

/** 数式を使える **/

font-size:#{12+12}px;

}

$debugMode:true;

$x:10;

/** 条件分岐 **/

#main2{

@if $debugMode == true{

color:red;

} @else {

color:green;

}

@if $x > 10 {

color:yellow;

}

/**ループ **/

$i:10;

$i2:10;

#main3{

/**10から14まで **/

/** 変数を文字で使うときは **/

/** 下記のような記法をインターポーションという**/

@for $i from 10 through 14 {

.fs_#{$i} {font-size: #{$i}px;}

}

@while $i2 <= 14 {

.fs_#{$i2} {font-size: #{$i2}px;}

$i2:$i2+1;

}

/**配列 **/

$animals: cat,dog,tiger;

@each $animal in $animals{

/** 最初の#はidの# **/

##{$animal}_icon {background:url("#{$animal}.png");}

}

/** 関数 a**/

$totalWidth:940px;

$columnCount:10;

@function getColumnWidth($width, $count){

$padding:10px;

$columnWidth:floor( ($width) - $padding*($count) / $count );

/** debugはコンソールに出力をする **/

/** @debug $columnWidth **/;

@return $columnWidth;

}

.grid{

float:left;

width:getColumnWidth($totalWidth, $columnCount);

}

/** mixin テンプレート的な機能 **/

@mixin round-btn($radius:4px) {

border: 1px solid #b8b8b8;

border-radius:5px;

background-color:#c9c9c9x;

}

@mixin auto-color($color) {

@include round-btn;

color:$color;

}

.btn-blue{

@include auto-color(blue);

}

.btn-red{

@include auto-color(red);

}

/** 継承 **/

#main4{

background-color:red;

color:gray;

}

#main5{

@extend #main4;

border:1px solid white;

}

そして上記のファイルをコンパイルすると下記のようなcssができあがります。

sample.css

@charset "UTF-8";
#main {
  /** 変数を使うことができる **/
  width: "50%";
  background: url("../imgbg.png"); }
  #main p {
    /** 数式を使える  **/
    font-size: 24px; }

/** 条件分岐 **/
#main2 {
  color: red; }

/**ループ  **/
#main3 {
  /**10から14まで **/
  /** 変数を文字で使うときは **/
  /** 下記のような記法をインターポーションという**/ }
  #main3 .fs_10 {
    font-size: 10px; }
  #main3 .fs_11 {
    font-size: 11px; }
  #main3 .fs_12 {
    font-size: 12px; }
  #main3 .fs_13 {
    font-size: 13px; }
  #main3 .fs_14 {
    font-size: 14px; }
  #main3 .fs_10 {
    font-size: 10px; }
  #main3 .fs_11 {
    font-size: 11px; }
  #main3 .fs_12 {
    font-size: 12px; }
  #main3 .fs_13 {
    font-size: 13px; }
  #main3 .fs_14 {
    font-size: 14px; }

/**配列 **/
/** 最初の#はidの# **/
#cat_icon {
  background: url("cat.png"); }

/** 最初の#はidの# **/
#dog_icon {
  background: url("dog.png"); }

/** 最初の#はidの# **/
#tiger_icon {
  background: url("tiger.png"); }

/** 関数 a**/
.grid {
  float: left;
  width: 930px; }

/** mixin テンプレート的な機能 **/
.btn-blue {
  border: 1px solid #b8b8b8;
  border-radius: 5px;
  background-color: #c9c9c9x;
  color: blue; }

.btn-red {
  border: 1px solid #b8b8b8;
  border-radius: 5px;
  background-color: #c9c9c9x;
  color: red; }

/** 継承  **/
#main4, #main5 {
  background-color: red;
  color: gray; }

#main5 {
  border: 1px solid white; }

@charset "UTF-8";

#main {

/** 変数を使うことができる **/

width: "50%";

background: url("../imgbg.png"); }

#main p {

/** 数式を使える **/

font-size: 24px; }

/** 条件分岐 **/

#main2 {

color: red; }

/**ループ **/

#main3 {

/**10から14まで **/

/** 変数を文字で使うときは **/

/** 下記のような記法をインターポーションという**/ }

#main3 .fs_10 {

font-size: 10px; }

#main3 .fs_11 {

font-size: 11px; }

#main3 .fs_12 {

font-size: 12px; }

#main3 .fs_13 {

font-size: 13px; }

#main3 .fs_14 {

font-size: 14px; }

#main3 .fs_10 {

font-size: 10px; }

#main3 .fs_11 {

font-size: 11px; }

#main3 .fs_12 {

font-size: 12px; }

#main3 .fs_13 {

font-size: 13px; }

#main3 .fs_14 {

font-size: 14px; }

/**配列 **/

/** 最初の#はidの# **/

#cat_icon {

background: url("cat.png"); }

/** 最初の#はidの# **/

#dog_icon {

background: url("dog.png"); }

/** 最初の#はidの# **/

#tiger_icon {

background: url("tiger.png"); }

/** 関数 a**/

.grid {

float: left;

width: 930px; }

/** mixin テンプレート的な機能 **/

.btn-blue {

border: 1px solid #b8b8b8;

border-radius: 5px;

background-color: #c9c9c9x;

color: blue; }

.btn-red {

border: 1px solid #b8b8b8;

border-radius: 5px;

background-color: #c9c9c9x;

color: red; }

/** 継承 **/

#main4, #main5 {

background-color: red;

color: gray; }

#main5 {

border: 1px solid white; }

参考リンク

CSSの常識が変わる！「Compass」の基礎から応用まで！
※タイトルはcompassですがsassの説明も含まれています。