Edited at

SCSSゆるっとまとめ

More than 3 years have passed since last update.

SCSSゆるっとまとめ


コメントについて

以下のコメントが使える

/* コンパイル後に表示される */ 

// コンパイルには反映されない


ネームスペースでネストできる

同一のネームスペースを持つプロパティは、ネームスペースでネストできる。


font-family

font-size

font-style


.fontnest{

font:{
family:family;
size:1.2em;
style:normal;
}
}


インポートでCSSファイルを1つにまとめられる

ファイル名にアンダースコアをつけたscssファイルはコンパイルされない。


_reset.scss

_main.scss

_footer.scss


@import "reset";

@import "main";
@import "footer";

最終的に生成されるCSSファイルが1つだけになる

→ サーバーの負荷を軽減!

※ 拡張子とアンダースコアはインポートの時、省略して書くことができる。


&について

&は親要素のセレクタを表す

#main {

font-size:20px;
a{
color:#f00;
// a:hover
&:hover{
color:#0f0;
}
}
}


変数について(変数:データにつけるラベル)


変数の宣言

$マークをつけてあげる

$baseFontSize: 14px;


Sassで使えるデータ型


  • 数値

  • 文字列

  • 真偽


  • リスト



算術演算子で値の加減乗除ができる

$baseFontSize: 14px;

$baseColor: ff44aa;
#main {
font-size: $baseFontSize - 2px;
color:$baseColor - #555;
}


別の単位同士で演算することもできる。

$baseFontSize: 14px;

#main {
font-size: $baseFontSize + 2in;
}


変数の展開 (変数管理)

#{変数名}を使用することで、変数を展開することができる。

$imgDir: "../img/";

#main {
background: url(#{$imgDir}"bg.png");
}


文字列について


  • 文字列の連結は + を使用する。

$imgDir: "../img/";

#main {
background: url($imgDir + "bg.png");
}


色について

Sassが用意している便利な命令(関数)がある


  • lighten

  • darken

$brandColor: rgba(255, 0, 0, 0.9);

#main {
color:lighten($brandColor, 30%);
color:darken($brandColor, 30%);
//30% 明るく,暗く
}


if文について


  • scssではif文が使用できる。

  • 頭に@をつけてあげる必要がある

$debugMode: true;

$x: 10;

#main {
@if $debugMode == true{
color:#f00;
} @else {
color:#00f;
}
p {
@if $x > 20{
color:#ccc;
}
}
}



ループについて


  • for文とwhite文が使用できる

  • 頭に@をつけてあげる必要がある

@for $i from 10 throught 14 {

.fs#{$i} { font-size: #{$i}px; }
}

@while $i <= 14 {

.fs#{$i} { font-size: #{$i}px; }
$i: $i + 1;
}



リストについて

似たようなデータをまとめて管理することができる

$animals: cat, dog, tiger;

@each $animal in $animals{
.#{animal}-icon { background: url("#{$animal}.png"); }
}

もしくは

@each $animal in cat, dog, tiger {

.#{animal}-icon { background: url("#{$animal}.png"); }
}



関数について


  • 複数の処理をまとめておこなうことができる

  • 頭に@をつけてあげる必要がある

$totalWidth: 940px;

$columnCount: 5;

@function getColumWidth($width, $count){
// $columWidthを計算
$padding: 10px;
$columWidth: floor(($width - ($padding * ($count -1))) / $count);
@return $columnWidth;
}

.grid{
float: left;
width: getColumWidth($totalWidth, $columnCount);
// 全体の横幅を計算する
}



定義は@mixin、呼び出しは@include

あるまとまったスタイルを変数のようにパッケージしておいて、

自由に呼び出して利用できる機能

/* 定義 */

@mixin main-text {
font:{
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}

/* 呼び出し */
.hoge{
@include maintext;
background-color:#fff;
}

↓ コンパイル ↓

/* 定義 */

/* 呼び出し */
.hoge{
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
background-color:#fff;
}




またミックスインでは、引数も使用することができる

//@mixin border-radius($radius) {

@mixin border-radius($radius:4px) { //初期値を使う場合
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }



スタイルの継承 @extend

共通部分のセレクタを継承して呼び出す

.errorMsg{

font-size:10px;
font-weight:bold;
padding:10px;
background-color:red;
color:white;
}

.warningMsg{
font-size:10px;
font-weight:bold;
padding:10px;
background-color:orange;
color:white;
}

↓ 共通部分が多いこんな場合は ↓


.msg{
font-size:10px;
font-weight:bold;
padding:10px;
color:white;
}
.errorMsg{
@extend .msg;
background-color:red;
}

.warningMsg{
@extend .msg;
background-color:orange;
}

↓ コンパイル ↓


.msg, .errorMsg, .warningMsg{
font-size:10px;
font-weight:bold;
padding:10px;
color:white;
}
.errorMsg{
//mixin,includeだとここに展開される。
background-color:red;
}

.warningMsg{
//mixin,includeだとここに展開される。
background-color:orange;
}