変数を#{}で囲んで使います。 font-size: clamp(10px, #{$mobile-font-size-vw * 1vw}, 20px);

高さではなく、paddingで調整する！ 親要素に position: relative; padding: calc(200 / 355 * 100%) 0 0; //padding-topに(高さ/幅*100％) 子要素(iframe)に position: absolute; top: 0; left: 0; width: 100%; height: 100%; アイフレームをスマホ対応さ…

togetoge.work

_base.scss @use "color" as c; @use "font" as t; //mean type // base layout variables $width_pc: 1536px; $sideMargin_pc: 80px; $width_sp: 768px; $sideMargin_sp: 20px; // tablet width $width_tab: 900; // margin size $margin_s: 40; $margin_m-…

親セレクタのクラスが違う時にスタイルを変更したい時は、 scssのネストの外のセレクタを指定した後に、&をつける。 ※ネストの中のセレクタを指定すると、ネストの中に入ってしまうので注意！ <div> <p>文字は青色</p> </div> <div class="txt_red"> <p>文字は赤色</p> </div> <section> <p>文字は緑色</p> </section> //scss p{ color: blu…

このように出来るだけパーツ化すると良さそう

@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…