SCSS– category –

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

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

本記事では、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/@retu...

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

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