CSSで変数（カスタムプロパティ）を使ってみよう | Webクリエイターボックス

2018/02/07 137 users less Sass カスタムプロパティ CSS変数 おなじみ

2018年2月7日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数の使い方と注意点をまとめていきます！ CSS変数とは？ 公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properti... 続きを読む

現場で役立つ実践Sass（1）Sassの環境を整える | Adobe Creative Station

2015/11/24 104 users Sass 実践Sass ashleynolan.co.uk

CSSを強力にパワーアップするCSSプリプロセッサー「Sass」 ashleynolan.co.ukの記事「The State of Front-End Tooling – 2015」の統計（2015/10/12付）によれば、CSSだけを使っている “No Preprocessor” の割合がは約15%となっており、約85%は何らかのCSSプリプロセッサーを使っているようです。中でもSassは全体... 続きを読む

CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS - morishitter blog

2014/12/06 62 users rework PostCSS CSSプリプロセッサ CSS

2014-12-07 CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS この投稿はFrontrend Advent Calendar 2014の7日目の記事です。 CSSプリプロセッサーとポストプロセッサー、そしてそれらをビルドするツールであるReworkとPostCSSについて。 CSSプリプロセッサー、ポストプロセッサー まずは用語の定義を確認する。CSSプリプロセッサ... 続きを読む

YACP: よりオブジェクト指向なCSS設計のためのプリプロセッサー - morishitter blog

2014/12/01 51 users セレクタ 命名規則 ディレクトリ構成 記述 投稿

2014-12-02 YACP: よりオブジェクト指向なCSS設計のためのプリプロセッサー この投稿はCSS Architecture Advent Calendar 2014の2日目の記事です。 よりオブジェクト指向なCSSの記述を助ける、YACPというCSSプリプロセッサーを作っています。具体的な、セレクタの命名規則やディレクトリ構成の話ではないです。 Object Oriented CSS ... 続きを読む

Gruntプラグイン: selector4096 - Weblog - Hail2u.net

2013/12/18 10 users Weblog hail2u.net npm セレクター パク

IE9以下で4096個以上のセレクターがあるとスタイルが反映されなくなるバグのチェックを行うGruntプラグイン、selector4096を作った。CSSプリプロセッサーでネストしつつ@extendするとぽんぽんセレクター増えていくので、最近はまめにチェックするようにしている。自己最多記録は3400くらいで、バグに引っかかったことはまだない。 npmで普通にインストールした後、Gruntfile.... 続きを読む

Gruntで始めるWeb制作の自動化 - to-R

2013/08/27 268 users Sass JSHint Grunt インストーラー less

Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインスト... 続きを読む

Gruntをつかってみたー | SAITEI no CHINJUU!!!（最低の珍獣）

2013/02/27 31 users Grunt Rake Sass 珍獣 Ruby

すでに花粉症が始まった大熊猫です（@@） さて、今回はビルド管理ツール「Grunt.js」のご紹介と実際に使ってみるまでを簡単にまとめてみました。 Gruntとは？ GruntはJavaScriptで作られたビルド管理ツールです。 SASSなどのCSSプリプロセッサーの管理やCSSやJavaScriptの結合や圧縮などの処理をタスクとして実行できます。 ビルド管理ツールは他にRuby(Rake)や... 続きを読む