SCSSについて勉強した

結構適当ですが、自分用にまとめたものです。

SASS、SCSSとは？

SASS　＝　CSSを拡張したメタ言語
SCSS　＝　SASSの別文法（Sassy CSS）CSS風にかける文法。

どんなことができる？

• 変数　（$var）
• セレクタのネスト
• ミックスイン（@mixin）
• セレクタの継承　（@extend）

簡単なサンプルコード

/***** 基本 *****/
/* 変数 */
$black: #333;
$gray: #888;

/* mixin */
@mixin logofont {
  font: {
    family: "lucida grande", "lucida sans", sans-serif;
    size:   300%;
    weight: bold;
  }
}

/* ネスト */
body {
  margin: 0 auto;
  width: 800px;

  header {
    h1 {
      /* mixinを使う */
      @include logofont;
      /* 変数を使う*/
      border-bottom: 1px dotted $black;
    }
  }

  div {
    margin: 0 0 20px;
  }

  footer {
    border-top: 1px solid $gray;

    address {
      font-size: 90%;
    }
  }
}

コンパイルすると
　　　　↓

@charset "UTF-8";   
/***** 基本 *****/      
/* 変数 */    
/* mixin */     
/* ネスト */      
body {
  margin: 0 auto;
  width: 800px; }  
  body header h1 {
    /* mixinを使う */     
    font-family: "lucida grande", "lucida sans", sans-serif;  
    font-size: 300%;      
    font-weight: bold;    
    /* 変数を使う*/   
    border-bottom: 1px dotted #333333; }
  body div {
    margin: 0 0 20px; }
  body footer {
    border-top: 1px solid #888888; }
    body footer address {
      font-size: 90%; }

ネストで親要素の指定（&で指定できる）

$black: #333;
$gray: #888;

/* ネストで親要素を指定 */
a {
  background-color: $black;

  &:hover {
    background-color: $gray;
  }
}

コンパイルされると
　　　　↓

@charset "UTF-8";   
/* ネスト上で親要素を指定 */
a {
  background-color: #333333; }
  a:hover {
    background-color: #888888; }   

継承（@extend）を使ってみる

$black: #333;

/* extend */
.btn {
  margin: 0;
  padding: 0;

  .item {
    color: $black;
  }
}

.btn-red {
  /* @extend を使う */
  @extend .btn;
  backgournd: red;

  .item {
    bacoground-color: pink;
  }
}

コンパイルされると
　　　　↓

@charset "UTF-8";   

/* extend */
.btn, .btn-red {
  margin: 0;
  padding: 0; }
  .btn .item, .btn-red .item {
    color: #333333; }

.btn-red {
  backgournd: red; }   
  .btn-red .item {
    bacoground-color: #333333; }

プレフィックスを作ってみる

/* プレフィックスを作ってみる */  
$set_prefix: -webkit-, -moz-, -ms-, -o-, ''; 

@mixin radius($radius) {
  /* eachが使える */  
  @each $prefix in $set_prefix {
    #{$prefix}border-radius: $radius;
  }
}
@mixin gradient($startColor: #f7f7f7, $endColor: #f5f5f5) {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor));
  @each $prefix in $set_prefix {
    background-image: #{$prefix}linear-gradient(top, $startColor, $endColor);
  }
}

.test-box {
  @include radius(10px);
  @include gradient();
}

コンパイルされると
　　　　↓

@charset "UTF-8";   

/* プレフィックスを作ってみる */  
.test-box {
  /* eachが使える */  
  -webkit-border-radius: 10px;  
  -moz-border-radius: 10px; 
  -ms-border-radius: 10px;
  -o-border-radius: 10px;   
  border-radius: 10px;    
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$startColor, endColorstr=$endColor, GradientType=0);     
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(whitesmoke));   
  background-image: -webkit-linear-gradient(top, #f7f7f7, whitesmoke);  
  background-image: -moz-linear-gradient(top, #f7f7f7, whitesmoke);
  background-image: -ms-linear-gradient(top, #f7f7f7, whitesmoke);
  background-image: -o-linear-gradient(top, #f7f7f7, whitesmoke);
  background-image: linear-gradient(top, #f7f7f7, whitesmoke); }

function,ifが使える

/* function が使える */  
@function opacityBlack($opacity) {
  @return rgba(0, 0, 0, $opacity);
}
.function-sample {
  background-color: opacityBlack(.5);
}


/* if が使える */
@mixin ifSample($status) {
  @if $status == 1 {
    color: #000;
  }@else if $status == 2 {
    color: #333;
  }@else {
    color: #555;
  }
}
.if-sample {
  @include ifSample(2);
}

コンパイルされると
　　　　↓

@charset "UTF-8";   

/* function が使える */
.function-sample {
  background-color: rgba(0, 0, 0, 0.5); }

/* if が使える */
.if-sample {
  color: #333; }

LESSとの比較

SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント

COMPASSは便利

すぐに使えるSCSS入門｜Compass基礎編

メディアクエリ用のミックスイン

メディアクエリ用のミックスイン