sass

sass baseサンプル fontサンプル

_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 ファイル読み込み

@importを使用していたものを@use,@fowardに変更 ファイル読み込み @use "../foundation" as f; @use "sass:math"; 使う時:読み込み先を指定する必要がある background-color: f.$bg-room; @include f.media-pc { padding-top: f.get_vw(164, 1536); }

scss 『セレクタの後に&』で親セレクタを変更

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

scss 設計サンプル

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

Scss サイトの基本設定を変数にして一元管理する

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

Sacc selector-replace()とselector-extend()で同一のスタイルを便利にする

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

Scssの配列

基本の配列 $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…

Scssでfontの管理

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

Scss メディアクエリポイントの設定

$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を定…

基本のSacc

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