Sassクイックスタートチュートリアル

@import
scssをcssファイルにコンパイルしたくない場合は、scssファイル名の前に下線_を付けます.
CSS@importコマンドを使用するデフォルトでは、@importは現在のディレクトリでscssファイルをロードする必要があります.オリジナルcssのimportコマンドを使用するには、次の4つのルールを使用します.

@importの後ろに付いているファイル名が.cssで終わる場合.

@importの後ろにhttp://の先頭の文字列が付いている場合.

@importの後ろにurl()関数が付いている場合.

@importの後ろにmedia queriesが付いている場合.

@importインポートファイルを使用@importインポート下線先頭ファイルを使用して下線を追加する必要はありません.compassは自動的にファイル名に下線インポートを追加します.
親セレクタ

a {
    &:hover {
        color: blue;
    }
}

ここで、&記号は接続の親を表し、最終的にコードを生成します.

a:hover {
    color: blue;
}

属性ネスト

.main-sec {
    font-family: $main-sec-ff;
    
    .headline {
        font: {
            family: $main-sec-ff;
            size: 16px;
        }
    }
}

変数＃ヘンスウ＃
定義＃テイギ＃

$color-withe: #FFFFFF;

$記号の先頭と後ろに文字列を変数名とし、後に:と変数値を付け、コロンはセパレータで、変数名と変数値を分割します.使用

.main {
    background: $color-withe;
}

変数名参照を直接使用すると、変数値が使用されます.
関数＃カンスウ＃
組み込み関数functionsと呼ばれています
再利用可能コードブロック
minxin
使用時にコピーが存在し、@includeで呼び出されます.
定義＃テイギ＃

@mixin col-6 {
    width: 50%;
    float: left;
}

//   
.webdemo-sec {
    @include col-6;
    
    &:hover {
        background: $color-FFF;
    }
}

生成されたコード:

.webdemo-sec {
    width: 50%;
    float: left;
}
.webdemo-sec:hover {
    background: $color-FFF;
}

パラメータ関数

@mixin col ($width) {
    width: $width;
    float: left;
}
//   
.webdemo-sec {
    @include col(30%);
}

デフォルトパラメータ付き

@mixin col ($width: 50%) {
    width: $width;
    float: left;
}
//   
.webdemo-sec {
    @include col();
}

使用時には組合せ宣言で存在し、@extendで呼び出されます.継承者セレクタを、継承者セレクタが表示される場所に挿入します.

.error {
    color: #F00;
}
.serious-error {
    @extend: .error;
    border: 1px #F00 solid;
}

注意:extendはセレクタシーケンスを継承できません.%を使用して、セレクタのみを継承します.

%error {
    color: #F00;
}
.serious-error {
    @extend: %error;
    border: 1px #F00 solid;
}

at-root
ネストされたコンテンツがスタイルシートの最上位レベルに出力されます

.main-sec {
    font-family: $main-sec-ff;
    
    @at-root {
        .main-sec-headline {
            font: {
                famili: $main-sec-ff;
                size: 16px;
            }
        }
        .main-sec-detail {
            font-size: 12px;
        }
    }
}
//      
.main-sec {
    font-family: $main-sec-ff;
}
.main-sec-headline {
    font-family: sans;
    font-size: 16px;
}
.main-sec-detail {
    font-size: 12px;
}

おすすめ:
SASSを巧みに使ってどのようにnのサブ要素を遍歴してそしてそのために属性を設定します