SCSSゆるっとまとめ #CSS

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;
}