■Sass( SCSS ) Prev　Top　Next
関連ページ：

今回はSassをやります。SassはTypeScriptのCSS版のような位置づけとなっておりCSSのコードを生成するための言語です。
Sass - ウィキペディア

Sassには構文が２種類あります。

１．インデント構文
　　ファイルの拡張子は.sass
　　コードブロックや改行コードの分離にインデントを使用する。
　　文の最後にセミコロンが不要

※ウィキペディアよりサンプル抜粋
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

２．SCSS構文
　　ファイルの拡張子は.scss
　　コードブロックや改行コードの分離に{}を使用する。
　　文の最後にセミコロンが必要

※ウィキペディアよりサンプル抜粋
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 20%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

インデント構文のほうがタイプ量が少なく済むのでよさげですが、CSSに似た文法のほうがわかりやすい気がするのでSCSS構文でやっていきます。

SCSS構文で記述したSassはSassMeisterというサイトを使用してCSSファイルへコンパイルできます。

１．スタイル定義のネスト

２．変数

３．演算子

４．関数

５．条件分岐

６．リストのループ

７．配列のループ

８．ミックスイン

９．スタイルの継承

10．外部スタイルシートのインポート

■スタイル定義のネスト

スタイル定義のネスト
セレクタおよびプロパティのネスト 
#tbl1{
   // border-XXXX プロパティのネスト
   border: {
      width: 2px;
      color: #ff0000;
      style: solid;
   }

   #tr1{
      background-color: yellow;
      border-width: 2px;
      
      td{
         &:hover{    // & はSCSSの予約語で親セレクターを参照する
            background-color: green;
         }
      }
   }
}
サンプル

■変数

変数
変数といっても他言語のように動的に変更する用途で使用することはできない。どちらかというとマクロ定義である。 
$tblbgcolor: yellow;   // $を使用して変数を宣言

#tbl1{
   #tr1{
      background-color: $tblbgcolor;   // プロパティの値を変数で置き換えられる
   }
   #tr2{
      background-color: $tblbgcolor;
   }
}

$side: top;

#tbl2 {
   .td3{
      border-#{$side}-color: #00ff00;   // セレクタやプロパティの #{変数名} の部分は変数で置き換えられる
      border-#{$side}-width: 3px;
      border-#{$side}-style: solid;
   }
}
サンプル

■演算子

演算子
+、-、*、/、and、orなどの演算子が使用できる。 
$tblbgcolor: #a0a0a0;
$tblborderwidth: 2px;

#tbl1{
   #tr1{
      background-color: $tblbgcolor;

      td{
         border: {
            top: {
               color: #0000ff;
               width: $tblborderwidth;
               style: solid;
            }
         }
      }
   }
   #tr2{
      background-color: $tblbgcolor + #0f0f0f;   // 色を増加

      td{
         border: {
            top: {
               color: #0000ff;
               width: $tblborderwidth + 3px;   // 幅を増加
               style: solid;
            }
         }
      }
   }
}
サンプル

■関数

関数
色／明るさを操作するための関数。これは使える。
関数一覧についてはSass（SCSS）入門参照 
$tblbgcolor: #a0a0a0;

#tbl1{
   #tr1{
      background-color: $tblbgcolor;
   }
   
   #tr2{
      background-color: darken( $tblbgcolor, 20% );   // 輝度を暗くする
   }
}
サンプル

■条件分岐

条件分岐
定数しか扱えないのに条件分岐の使いどころがわからない... 
$status: success;
// $status: error;

#tbl1{
   #tr1{
      @if $status == success{
         background-color: #afafff;
      }
      @else if $status == error{
         background-color: #ffafaf;
      }
      @else{
         background-color: #ffffff;
      }
   }
   
   #tr2{
      @if $status == success{
         background-color: #afafff;
      }
      @else if $status == error{
         background-color: #ffafaf;
      }
      @else{
         background-color: #ffffff;
      }
   }
}
サンプル

■リストのループ

リストのループ
変数のリストを一元管理できるので使いどころはあるかもしれない 
@each $colorlist in red, green, blue{
   #tbl1{
      #tr_#{$colorlist} {
         background-color: #{$colorlist};
      }
   }
   
   #tr2{
      #tr_#{$colorlist} {
         background-color: #{$colorlist};
      }
   }
}
サンプル

■配列のループ

配列のループ
こちらは配列のループ 
$i : 1;

@while $i <= 3{
   #tbl1{
      #tr#{$i} {
         background-color: lighten( #a0a0a0, $i * 15% );
      }
   }
   
   $i : $i + 1;
}
サンプル

■ミックスイン

ミックスイン
スタイルシートの再利用 
$tblbgcolor: #00ff00;

@mixin line1{
   border:{
      top:{
         color: #0000ff;
         width: 2px;
         style: solid;
     }
  }
}

@mixin line2( $color, $width, $style:solid ){
   border:{
      top:{
         color: $color;
         width: $width;
         style: $style;
     }
  }
}

#tbl1{
   #tr1{
      background-color: $tblbgcolor;

      td{
         @include line1;
      }
   }

   #tr2{
      background-color: $tblbgcolor;

      td{
         @include line2( #ff0000, 4px );
      }
   }
}
サンプル

■スタイルの継承

スタイルの継承
スタイルを継承して新しいスタイルを作成する 
.line{
   border:{
      top:{
         color: #0000ff;
         width: 2px;
         style: solid;
      }
   }
}

#tbl1{
   background-color: #ff0000;
   
   .tr{
      .td{
         @extend .line;
      }
   }
}
サンプル

■外部スタイルシートのインポート

外部スタイルシートのインポート
外部のスタイルシートをインポートする。なおSassMeisterでは@importは対応してないようです。 
// stylesheet10_1.css.scss

$tblbgcolor: #00ff00;

@mixin line{
   border:{
      top:{
         color: #0000ff;
         width: 2px;
         style: solid;
     }
  }
}


// stylesheet10.css.scss

@import 'stylesheet10_1.css.scss';

#tbl1{
   .tr{
      background-color: $tblbgcolor;

      .td{
         @include line;
      }
   }
}
サンプル

Prev　Top　Next
inserted by FC2 system