はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

トップ > Sass > Sassの基本操作（コメント文、ネスト、親セレクタの省略、演算、変数、標準で使える関数）

Sassの基本操作（コメント文、ネスト、親セレクタの省略、演算、変数、標準で使える関数）

Sass CSS

Sassの基本操作（コメント文、ネスト、親セレクタの省略、演算、変数、標準で使える関数）

Sass の基本操作である、コメント文、ネスト、親セレクタの省略、演算、変数、標準で使える関数についてのメモです。

コメント文

Sass には、CSS と同じコメント文が使える。 しかし、CSSファイルに反映されるものとそうでないものがある。

  •               

/* CSS に反映される */


  • 
// CSSに反映されない

ネスト(nest)

Sass では、入れ子(nest)構造で書くことができる。

Sass

        

.box {
 padding: 10px;
 .hoge1 {
  width: 100px;
 }
 .hoge2 {
  width: 200px;
 }
}

CSS


.box {
 padding: 10px;
}
.box .hoge1 {
 width: 100px;
}
.box .hoge2 {
 width: 200px;
}

&（親セレクタの省略）

親セレクタを省略して、& を使うことができる。

Sass

        
          .hoge {
            color: #000;
            &:hover {
              color: red;
            }
            &.hidden {
              opacity: 0.5;
            }
            .ie-hack &{
              display: none;
            }
          }

CSS

        
          .hoge {
            color: #000;
          }
          .hoge:hover {
            color: red;
          }
          .hoge.hidden {
            opacity: 0.5;
          }
          .ie-hack .hoge {
            display: none;
          }

演算(operation)

四則演算を行うことができる。 なおCSS3 では、XX : calc(); 関数で四則演算ができる。 

calc - CSS | MDN

Sass

        
          .hoge {
            width: 10px + 10px;
            height: 20px - 10px;
            padding: 5px * 5;
            margin: (50px) / 5;
          }

CSS

        
          width: 20px;
          height: 10px;
          padding: 25px;
          margin: 10px;

変数(variables)

Sass では、変数を使ってプロパティの値を管理できます。 変数には先頭に「$」を付けます（PHPに似てる）。

数値の例

Sass

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

CSS

          
            #main p {
              font-size: 14px;
            }
            #main p .sub {
              font-size: 12px;
            }

文字列の例

Sass

          
            $imgDir: "../img/";
            #main {
              background: url($imgDir + "bg.png");
              // \#{式}という書き方もできる。\#{}の中の式を評価して使う。
              background: url("#{$imgDir}bg2.png");
            }

CSS

          
            #main {
              background: url("../img/bg.png");
              background: url("../img/bg2.png");
            }

カラーの例

カラーコードも変数として扱うことができる。

Sass

          
            $red: #BE3624;
            $blue: #23599b;
            $yellow: #f8c528;
            .box-a {
              color: $red;
            }
            .box-b {
              color: $blue;
            }
            .box-c {
              color: $yellow;
            }

CSS

          
            .box-a {
              color: #BE3624;
            }

            .box-b {
              color: #23599b;
            }

            .box-c {
              color: #f8c528;
            }

標準で使える関数(sass build in function)

Sass では、標準で使える関数がある。 以下で調べることができる。 

Module: Sass::Script::Functions — Sass Documentation

以下、例です。 lighten(colorCode, X%) で、X% 明るいカラーコードを出力します。 逆に、darken(colorCode, Y%) で、Y% 暗いカラーコードを出力します。 また、random(max_value) で、コンパイルするごとに、 max_value までの乱数を出力します。

Sass

        
          $brandColor: rgba(255, 0, 0, 0.9);
          #main {
            p {
              background-color: $brandColor;
              // 30%明るく
              color: lighten($brandColor, 30%);
              // 30%暗く
              border-color: darken($brandColor, 30%);
            }
            .random {
              // random(上限) で乱数を出力
              font-size: random(20)px;
            }
          }

CSS

        
          #main p {
            background-color: rgba(255, 0, 0, 0.9);
            color: rgba(255, 153, 153, 0.9);
            border-color: rgba(102, 0, 0, 0.9);
          }
          #main .random {
            font-size: 17 px;
          }