Vue単一ファイルコンポーネントで共通のSCSSファイルを読み込む - UUUMエンジニアブログ
どうもエンジニアのやまぐちです。 年末はビルドツールを触る機会が多かったため寝ても覚めてもWebpackな感じでした。 そんな中で単一ファイルコンポーネントでSCSS共通の変数やmixinを使う場合に少し悩んだので、 同じように苦労している方がいれば参考にしていただけたら幸いです。 https://github.com/webpack-contrib/sass-loader ディレクトリ構成 ディレクトリ構成は以下で進めていきます。 /example ├ webpack.config.js ├ dist │ ├ app.js │ └ index.html └ src └ assets ├ script │ ├ app.js │ └ App.vue └ style ├ global.scss ├ _mixins.scss └ _variables.scss /src/assets/style
【Sass】SASS記法からSCSS記法に変換して、SCSS記法を使用したいのだ | バシャログ。
やっピー、石田です。 ここ最近、のりピー語を流行させようと多用してます。 「よろぴく」ものりピー語から来ていたのを知り、びっくりしたピー。 さてさて、今回はSassについてです。 Sassの記法は2種類 今ではSCSS記法が主流となっていますが、 Sassはバージョン3.0前までは、SASS記法のみでした。 バージョン3.0からSCSS記法が導入され、これまでCSSを利用していた人にとっては移行しやすいのもあり、いまではSassといったらSCSSって感じになってますね。 しかーし、バシャログ。メンバーはこれまでSASS記法をとりいれていました。 SASS記法を使ったことがない方も多いかと思いますので、 ここで簡単にご説明しますね。 SASS記法についてのおさらい ファイル拡張子は、「.sass」 波括弧（{}） のかわりに インデントを使用する セミコロン（;）が不要 プロパティ後のコロン
SCSSとSASSならどっちを使う？ 違いを徹底比較！
Sassの表記には、２種類あります。 SCSSとSASS（Sass構文）です。 では、Sassを使うとしたら、どちらを使うべきなのでしょうか。 この記事では、ふたつの記法の違いを比較しつつ、どちらを使うべきなのかをまとめていきます。 ※この記事は2022/10/10に、見直しと、書き直しを行なっております。 Sass、SCSS、SASSの意味と定義 Sass、SCSS、SASSという言葉は、使われ方が曖昧な部分があるので、まずここで整理しておきましょう。 Sassにはふたつの書き方があります。 SCSS構文とインデント構文です。 SCSS構文は、CSSに新しい機能が加わったような記法で、{}を使って入れ子構造を作ります。 インデント構文は、{}の代わりに、スペースやタブによるインデントを使った記法です。 このインデントを使った書き方のことを、「Sass」と言う場合もあります。 しかし、上記
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
