用途
新着
履歴
言語

  • GoogleAppsScript
  • Git

SCSS スタイルの挿入や継承

SCSS スタイルの挿入や継承
SCSS スタイルの挿入や継承
SCSSなら何度もCSSで同じ記述しなくてもよいような機能があり、その中で挿入や継承についてのサンプルです。

SCSSはコンパイルしてCSSを作成する必要がありますが、とてもスマートな記述でCSSを生成することができます。

「_commonCss.scss」を挿入する場合

@import 'commonCss';

CSS内であとから挿入する場合

@mixin myIncStyle {
    .myBox {
        padding: 15px;
    }
}

#demo_box {
    @include myIncStyle;
    .myFont {
        font-size:10px;
    }
}

あとで使うが、少々値を変える場合

@mixin myPadding($num) {
    .myBox {
        padding: $num;
    }
}

#demo_box {
    @include myPadding(30px);
}

スタイルの内容だけ流用する場合

%sharedStyle {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}
.message {
    @extend %sharedStyle;
}

値を複雑に演算したい場合

.demo_article {
    width: 600px / 960px * 100%;
}
2019-08-03 23:41:45
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2019 kipure
Top