Dart Sass、使ってる？Preprosを使えばコンパイルも楽勝！
2020年6月14日 CSS, 便利ツール 最近Sass界隈が賑わっているように感じます。おそらく「Sassを@importから@useに置き換えるための手引き」という記事でDart Sassダートサスの存在を知った方も多いでしょう。今回はそんなDart Sassをザックリと、そして便利なコンパイラー「Prepros」について紹介します。 ↑私が10年以上利用している会計ソフト！ Dart Sassとは 一口にSassと言っても、実装している言語によって3つに分かれます： Ruby Sass … Ruby製。2019年没。サポートされません。 LibSass … C++製。今一番広く使われている様子。 Dart Sass … Dart製。公式推奨。 ICS MEDIAの池田氏によるアンケートだと、LibSassがだんとつ人気ですね。 ウェブのフロントエンジニアに質問。 Sassのコンパイル
CSS フレームワークを Vue.js のコンポーネントにする方法 - mya-ake com
この記事についてこの記事はVue.js #2 Advent Calendar 2018 - Qiitaの 20 日目の記事です。 この記事では Google が提供しているマテリアルデザインの CSS フレームワークであるMaterial Componentsを Vue.js のコンポーネントにしていく話を書いています。 その過程で Vue.js におけるコンポーネントを作るときの要点なども一緒に書いてます。 バージョンなど Vue.js: 2.5.21 Vue CLI: 3.2.1 Material Components: 0.42.x サンプルリポジトリhttps://github.com/mya-ake/vuepress-plugin-component-catalog/tree/master/example/material-components-web アウトライン Materi
CSSのマルチクラス設計の問題点 - morishitter blog
CSSのルールセットを細かく（classセレクタで）定義し、HTMLに複数のclass属性値を書いてスタイルをあてるような設計をマルチクラス設計と言ったりする。 マルチクラスにすることで冗長な記述が減り、ファイル容量が減り、ルールセットの再利用性が高くなり、保守性が向上する。 OOCSSをはじめとしたCSSの設計概念はマルチクラスを前提としており、Twitter Bootstrap等の多くのCSSフレームワークはマルチクラスでスタイルをあてるようになっている。 <!-- Twitter Bootstrapのボタンの例 --> <button class="btn btn-primary btn-lg">Save</button> 良いことしかないように見えるマルチクラス設計だが、いくつか問題点もある。 まず、HTMLに複数のclass属性値を書くと共通するプロパティが上書きされるということ
Sassの変数スコープと!global
Sassの変数スコープの仕様では、ローカル・コンテキストからグローバル変数を上書きできていた。LESSでは多くのプログラミング言語と一緒で上書きはできないという素直な仕様になっている。Sass 3.3では上書きしようとすると警告が出るようになり、!globalフラグを使い明示的に上書きしていることを教える必要があるようになった。将来的には仕様が変更され、警告なしでLESSと同じ挙動になるようだ。 Sassではローカル・コンテキストでグローバル変数を上書きでき、そのスコープを抜けてもそのままになる。 $color: #f00; .test-local { $color: #0f0; color: $color; // #0f0 } .test-global { color: $color; // #0f0 } 対してLESSでは上書きされない。 @color: #f00; .test-loc
Sass/Compassでコンパイルするとカラーコードが色名になってしまう件
Sass/Compassでコンパイルするとカラーコードが色名になってしまう件 先日行われた「CSS Nite LP, Disk 32: Sass」で「コンパイルするとカラーコードが色名になってしまいます。」という質問を受けたので対応方法を解説します。 まず、どういった現象かというと以下の様なSassを記述すると、 $color1 : #FFF; $color2 : #FFFFFF; .div1{ color:$color1; } .div1{ color:$color2; } コンパイル後に書き出されるCSSは以下のようになります。 /* line 3, ../sass/style.scss */ .div1 { color: white; } /* line 6, ../sass/style.scss */ .div1 { color: white; } Sass側で変数から値を抜き出す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VSCode(Visual Studio Code)で簡単にSASS/SCSSファイルのコンパイルができる拡張機能「Easy Sass」がお勧め | カレリエ
