BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
PostCSSとcssnextで最新CSS仕様を先取り！
どうも、Kaizen Platform, Inc.の@t32kです。今日はPostCSSについて解説しようと思います。PostCSSについてはそれを解説した同僚のスライドも素晴らしいので、そちらも参考にしてもらえば幸いです。 PostCSS とは何か // Speaker Deck PostCSSとはなにか？ PostCSSは、Autoprefixerの作者でも有名なロシアのAndrey Sitnik氏が開発しているツールです。 postcss/postcss 公式のレポジトリのREADMEには以下のように書かれています。 PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax,
Sassy Z-Index Management For Complex Layouts — Smashing Magazine
Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is notoriously difficult. With different stacking orders and contexts, keeping track of them as their numbers increase can be hard — and once they start to spread across CSS files, forget about it! Because z-index can make or break a UI element’s visibility and usability, keeping your website’s UI in working o
サンプルソース | Web制作者のためのSassの教科書 - 公式サポートサイト
書籍内に出てきた、7、8章以外のソースコードが掲載されていますので、コピーして使って頂くことができます。 第1章 Sass のキホン まずは Sass って何なのかを知ろう Sass を導入する前の疑問や不安 何はともあれ Sass を触ってみよう 第2章 Sass の利用環境を整えよう Windows 環境に Sass をインストールする Mac 環境に Sass をインストールする Sass を最新版にアップデートしよう Sass コマンドの使い方を覚えよう バッチファイル／シェルスクリプトで簡単にコマンドを実行する GUI（Koala）で Sass を使用する インストールや実行中にエラーが表示された場合の対処法 第3章 これだけはマスターしたいSass の基本機能 ルールのネスト（Nested Roles） 親セレクタの参照 &（アンパサンド） プロパティのネスト（Nested P
Sass3.3の@at-rootで親のルールを指定する | inkdesign
Sass3.3の@at-rootで親のルールを指定する Published on Feb 16, 2014 先日登壇したCSS Nite LP, Disk 32のセッションで紹介されていたSassのMixinをSass3.3の@at-rootで少し手を加えてみる、という話。 紹介されていたのは、天地左右中央に絶対配置するテクニックのMixin。 @mixin trbl($width: null, $height: null) { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: $width; height: $height; margin: auto; } .tbrl { @include trbl(100px,50px); } .tbrl { position: absolute; top: 0; bott
Sass(Scss) Memo: @extend | Culture27
今回は@extendについてです。 別のセレクタの全てのスタイルを継承することができます。 Scss .borderRed { border: 1px solid red; } .selectorA { @extend .borderRed; // ここで.borderRedを継承指定 padding: 2px; } 出力結果のCSS .borderRed, .selectorA { /* ここに .selectorA が追加されます */ border: 1px solid red; } .selectorA { padding: 2px; } @extendに使用できるセレクタ 1つの要素のみに関連するセレクタであればほとんど使用できます。 要素セレクタやid/classセレクタや擬似クラス、属性セレクタなども使用できますし、各セレクタを連結させたもの(div#selectorA.se
CSSプリプロセッサやポストプロセッサで出力されたCSSの整形
SassなどのCSSプリプロセッサやAutoprefixerのようなポストプロセッサを利用すると、プロセッサ規定のインデントや改行方法でCSSが整形されます。これについては@myakuraさんがAutoprefixer ― CSSのベンダー接頭辞をいろいろする - fragmentaryの最後で懸念事項として上げられていましたし、僕も2011年の年末にSassで出力するCSSファイルを自社のCSS記述ルールに合わせるヒントで、Sassをカスタマイズして解決する方法を紹介したりもしました。 Autoprefixerのdependenceであるpostcss(Framework for CSS postproccessors)を見ると、Whitespacesという項があり、インデントやスペースを調整できることが解説されています。これを利用すれば、CSS Beautifyのようなことがオフライン
2時間でSassを習得！Sass初心者向け講習スライド大公開！ | WebNAUT by Beeworks
※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。 CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基本を短時間でマスターできます！ この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。 実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。 https://webnaut.jp/download/markup_140204/sass.zip（3.5MB） Sassの良さを活かすためには、チーム全員がSassを理解することが大切 Sass
SassMeister | The Sass Playground!
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css2scss - from css to scss
https://github.com/geckotang/cssnite-lp32/blob/master/README.md