SCSS– category –

本記事では、SCSSの@extendの使い方と使いどころについて解説しています。 @extendの使い方 @extendはセレクタのスタイルを継承したい時に使います。使い方は以下のとおりです。 .example { @extend 継承元セレクタ; } @extendを使ったサンプルコードを用...

本記事では、SCSS(SASS)で必要のないcssファイルを出力されないようにする方法について解説しています。 ファイル名の先頭に_を付ける 例えば、ヘッダーのスタイルのみを記述しているheader.scssと、フッターのスタイルのみを記述しているfooter.scssを、s...

本記事では、SCSS(SASS)→CSSに変換(コンパイル)した時に一緒に生成されるstyle.css.mapファイルの役割について解説しています。 style.css.mapの役割 style.css.mapの役割ですが、結論から申し上げますとコンパイルされた.cssファイルと.scssファイルを繋...

本記事では、Visual Studio CodeでSCSS→CSSに変換(コンパイル)する時に便利な拡張機能Live Sass Compilerでcssファイルの出力先を変更する方法について解説しています。 Live Sass Compilerのデフォルト出力先はコンパイルするscssファイルと同階層です。 ...

本記事では、SCSS→CSSに変換(コンパイル)する時に「Error: Function finished without @return.」のエラーが出力された時の原因と対処法について解説しています。 原因と対処法 このエラーが出る原因は、関数(@function)に@returnを設定していないことです...

本記事では、SCSS→CSSに変換(コンパイル)する時に「required parameters must precede optional parameters」のエラーが出力された時の原因と対処法について解説しています。 原因と対処法 このエラーは、@functionや@mixinなどの引数の順番によって引き起...

本記事では、min()やmax()をSCSSで使用していてCSSに変換(コンパイル)した時に「Internal Error: Incompatible units: 'px' and 'vw'.」のエラーが返された時の対処法について解説しています。 対処法 このエラーが返される箇所に対して、unquote()を使用...

本記事では、SCSSの関数(@function)の使い方について解説しています。実際に関数をしようしたサンプルコードも用意しているので、使いどころについても理解できると思います。 関数(@function)の使い方 SCSSで関数を使用したい場合は、@function/@returnを...

本記事では、SCSSでfor文・while文・each文の使い方について解説しています。実際にサンプルコードを用意しているので、どのような場面で使用するのかが少しは理解できると思います。 for文の使い方 for文の基本的な使い方は以下のとおりです。 @for $i fr...

本記事では、SCSSでif文(else if,else)の使い方・使いどころについて解説しています。 if文の使いどころ JavaScriptなどのプログラミング言語では非常に使われるif文が、なんと！SCSSでも使用することが出来ます！どんなことが出来るんだろう！とワクワク...