npm-scriptで開発環境を作ってみよう | オレインデザイン
最近、Gulpが4.xにバージョンアップしましたね。そのタイミングで開発環境でもGulpをアップデートしてエラーに困っている声を聞いたりします。 僕自身もGulpを使っている環境で4.xにアップデートして、それまで使っていたライブラリからエラーが出て四苦八苦しました。その時、ふと思ったんです。「Gulpに依存してるなー」と。そして、「だったらnpm-scriptの方がいいかも」と思い、npm-scriptで開発環境を作る流れを書いてみようと思います。 タスクの流れ Sassの処理 node-sassでコンパイルプリフィックス付与と圧縮処理ディレクトリを削除して新しくディレクトリを作るSassの処理をまとめて一連のタスクを流して処理 JavaScriptの処理 バンドルする圧縮する一連のタスクを流して処理 画像の処理画像圧縮の処理画像圧縮の一連の流れのタスクを作るファイルを監視するブラウザシ
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
RailsでCompass, zurui-design, Sassy-Buttons, Bootsrapを使う！ - 酒と泪とRubyとRailsと
RailsでCompass, Zurui-design, Sassy-Buttons, Bootsrapを使う！ Feb 8th, 2013 Tweet Railsはライブラリのsprocketsのお陰で、LESS/SCSS/SASSが混在していてもよしなにCSSに変換してくれるそうです。ということで、Rails + Bootstrap環境に今まで気になっていたCompass, Zurui-design, Sassy-Buttonsを導入してみました！ Compassとは？ Sassをさらに強化してくれる便利なmixin群、スプライト自動作成、プロジェクトごとに設定ファイルを適用などがセットになったフレームワークです。 CompassについてはCSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIGにすごく丁寧な説明があります。 また、英語ですがCompassの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS
Rails4.0でBootstrap導入のあれこれ～bootstrap-sass simple_form kaminari dataTables | | Scimpr Blog
css2sass