Sass基本機能をリファレンスとしてまとめてみた。
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

CSSを効率良くコーディングするためのメタ言語「Sass」について最近学習したので、復習も兼ねて基本機能をまとめたいと思います。書き方が分からなくなった時などの参考にしてください。

目 次

 

ネスト(入れ子)

ルールセットをネストする事ができます。

.box{
p{
color:#000;
a{
color: #FF0000;
}
}
}
.box p {
color: #000;
}
.box p a {
color: #FF0000;
}

目次に戻る

親セレクタの参照

ネスト内で親セレクタを参照する場合は、&(アンパサンド)を使います。

a{
color: #000;
&:hover{
color: #FF0000;
}
}

#label1{
& span{
text-align: center;
& strong{
color: #FF0000;
}
}
}
a {
color: #000;
}
a:hover {
color: #FF0000;
}

#label1 span {
text-align: center;
}
#label1 span strong {
color: #FF0000;
}

目次に戻る

プロパティのネスト

プロパティをネストで書く事ができます。

div{
margin: {
top:20px;
left:10px;
right:10px;
}

border: 1px solid #000{
top-color: #FF0000;
bottom: 0;
}
}
div {
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
border: 1px solid black;
border-top-color: #FF0000;
border-bottom: 0;
}

目次に戻る

プレースホルダーセレクタ

@extend専用の(%)セレクタで、コンパイル後に生成されないコードを書く事ができます。

%hideSelector{
width: 100%;
height: 100%;
}

body{
@extend %hideSelector;
}
body {
width: 100%;
height: 100%;
}

目次に戻る

変数

変数を定義して任意の場所で参照する事ができます。

$common_color:#FF0000;
.boxA{
color: $common_color;
}

.boxB{
color: $common_color;
}
.boxA {
color: red;
}

.boxB {
color: red;
}

目次に戻る

演算

四則演算を使って、数値や色、文字列を算出する事ができます。

$headerHeight:300px;
$footerHeight:200px;
#content{
height: 1000px - #{$headerHeight} - #{$footerHeight};
}

p{
color: #333;
strong{
color: #333 + #FF0000;
}
}

$suffix:"のページを表示します。";
.boxA{
content: "サンプル1" + quote(#{$suffix});
}

.boxB{
content: "サンプル2" + quote(#{$suffix});
}
#content {
height: 1000px - 300px - 200px;
}

p {
color: #333;
}
p strong {
color: #ff3333;
}

.boxA {
content: "サンプル1のページを表示します。";
}

.boxB {
content: "サンプル2のページを表示します。";
}

目次に戻る

規定値

!defaultを使って既に定義済みの同名の変数を参照する事ができます。

$max_height:100px;
div{
$max_height:150px !default;
max-height: $max_height;
}
div {
max-height: 100px;
}

目次に戻る

継承

@extendを使って指定したセレクタのスタイルを継承する事ができます。

.common{
width: 200px;
height: 300px;
}

.boxA{
@extend .common;
background: red;
}

.boxB{
@extend .common;
background: blue;
}
.common, .boxA, .boxB {
width: 200px;
height: 300px;
}

.boxA {
background: red;
}

.boxB {
background: blue;
}

目次に戻る

条件分岐

@ifを使って条件分岐を行う事ができます。

$isError:false;
.label{
@if $isError {
color: red;
}
@else{
color: black;
}
}
.label {
color: black;
}

目次に戻る

ループ処理

@for、@while、@eachを使って繰り返し処理を行う事ができます。

$count:3;
@for $i from 1 through $count{
#forLabel#{$i}{
color:black;
}
}

$count:1;
@while $count < 4{
#whileLabel#{$count}{
color: white;
}
$count:$count + 1;
}

$list:1,2,3;
@each $i in $list{
#eachLabel#{$i}{
color: red;
}
}
#forLabel1 {
color: black;
}

#forLabel2 {
color: black;
}

#forLabel3 {
color: black;
}

#whileLabel1 {
color: white;
}

#whileLabel2 {
color: white;
}

#whileLabel3 {
color: white;
}

#eachLabel1 {
color: red;
}

#eachLabel2 {
color: red;
}

#eachLabel3 {
color: red;
}

目次に戻る

関数

@mixinを使って関数を定義する事ができます。

@mixin func_radius($value){
border-radius: $value;
-moz-border-radius: $value;
-webkit-border-radius: $value;
}

.boxA{
@include func_radius(10);
}

.boxB{
@include func_radius(15);
}
.boxA {
border-radius: 10;
-moz-border-radius: 10;
-webkit-border-radius: 10;
}

.boxB {
border-radius: 15;
-moz-border-radius: 15;
-webkit-border-radius: 15;
}

目次に戻る

他にもSassが元々用意している関数(rgb、lightenなど)もありますが、今回はここまで。

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone