Edited at

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


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

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