@charset "utf-8"; // ============================== // サイトの基本設定 // ============================== // 幅の関係----------------------- $width-base: 1200px; // 全体 $width-main: 800px; // メインエリアの幅 $width-side: 400px; // サイド…

最初にサンプル //親セレクタを変更してスタイルを変えたい時 @mixin replace($original, $replacement){ @at-root #{selector-replace(&, $original, $replacement)}{ @content } } //親セレクタを変更して同一スタイルを適用したい時 @mixin extend($origi…

基本の配列 $nameList : top, about, contact; @each $name in $nameList{ .sample-#{$name}{ background: url("../img/bg_#{$name}.png"); } } .sample-top { background: url("../img/bg_top.png"); } .sample-about { background: url("../img/bg_about.p…

functionでpx指定のような感覚でフォントサイズをremにする $baseFontSize: 16; html{ font-size: $baseFontSize + px; } @function rem($pixels, $context: $baseFontSize){ @return $pixels / $context * 1rem; } //使用するとき .text{ font-size: rem(12…

$breakpoints: ( 'sm': 'screen and (max-width: 414px)', 'md': 'screen and (max-width: 767px)', 'lg': 'screen and (max-width: 999px)', 'xl': 'screen and (max-width: 1199px)', ) !default; //上で設定した変数をmq（）で呼び出せるようにmixinを定…

プロパティのネスト .item{ margin: auto { top:10px; } } 上のように1箇所だけcssを変更する時はプロパティをネストします。 下記のようになります。 .item { margin: auto; margin-top: 10px; } ハイフンがあるプロパティは全てネストできる font:{ family…