Sass(Scss) Memo: 変数 | Culture27
今回は変数についてです。 $ から始めて、値はCSSと同じようにして設定します。 こんな感じ。 Scss $margin: 2em 0; // $margin に "2em 0" をいれて定義する。 h1 { margin: $margin; } CSS h1 { margin: 2em 0; } 変数はそれが記述された{}内でのみ有効になります。 どのCSSルールセットやmixinにも含まれない場合、どこでも使えるグローバルな変数になります。 こんな感じ。 Scss h1 { $margin: 2em 0; // ここで$marginを定義する。 margin: $margin; } p { margin: $margin; // ここでは使えない！コンパイル時にエラーになります。 } インターポレーション 変数はプロパティの値だけでなく、セレクター名やプロパティ名にも使うことができます
ここがすごいぞ！ stylelint！ - Qiita
ESLintのようなconfigでPostCSSプラグインとして動くstylelint。 唐揚げチャーハンのような「美味いものと美味いもの組み合わせたら絶対おいしいじゃん！」みたいなプロダクトが実際とても良かったので色々利点を記載。 導入についての手順などはすでに記事があったので、そちらへリンクしたい CSSのLintをstylelintにする ESLintっぽくて良い所 javascriptのLinterとしてスタンダードになってきたESLintに非常に良く似て作られているので、一度そちらを導入していればstylelintの導入はおそらくすんなり出来る。 また、ESLintの持っていた良い所をそのまま持ってきたような良さがある。 config周りがESLintにすごく近いので覚えることが少なめ 肝となるstylelintのconfigは、だいたいこんな感じで、ESLintにかなり近く作ら
Sassを捨ててPostCSSに移行したのでそのときの工程メモ - Qiita
CSSはずっとSassを使っていて、gulp-sassでコンパイルする感じの僕でしたがPostCSSに移行してみたのでそのときの工程をメモとして残しておきます。 PostCSSとは何か なぜSassからPostCSSに移行したのか むしゃくしゃしてやった。 ほんとは ただ単にSassを使っているということに飽きたってのが1点。 あとはSassの機能において僕はmixinとかextendとか正直必要ないなって考えていて、変数であるとかネストであるとかimportであるとか(CSSのimportじゃない方の)が使えればそれで良いってのがあって、そうなるとPostCSSの必要な機能だけ読み込んで使うっていうスタンスは良いなっていうのが2点目。 あと結局Sass使ってそのあとにautoprefixerとminifyは確実にやるのでそこでSass以外のツールでCSSのことをあれこれしちゃってるのでそ
Webpackで Browsersync + Sassコンパイルを試す - aircolor memolog
GruntやGulpなどのタスクランナーツールでは一般的ですが、WebpackだけでBrowsersyncをベースにSassのコンパイルを試してみました。 そもそもWebpackに触れるについては、当初はやや億劫でした（汗 ローダーという仕組みについての理解不足、日本語ドキュメントの少なさ、そしてなんといっても大艦巨砲主義と揶揄されるようなオプションの多さが理由です。とにかく調べるのが大変そうなイメージでした。また本業がWebサイト制作メインなので、Gulpで十分なのでは？という気もしてます。 しかし前々からES6の導入とvue.jsを使う上でベストな環境を構築したかったのと、Rebuild.fmと例の記事に触発されて腰を上げて調べてみようと思いました。 準備 Webpackへの理解が圧倒的に足らないので自分なりに調査をするところから。大雑把なまとめとして、 Webpackはビルドツールで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
