Help us understand the problem. What is going on with this article?

SCSSについて勉強した

More than 5 years have passed since last update.

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

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基礎編

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

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

masamitsu-konya
転職サイトGreenとTalentBaseのWebデザイナー&フロントエンドエンジニア。 バックエンドもマスターしたれぃ、と勉強中。
http://www.green-japan.com
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
https://atrae.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away