Clay, CSS Preprocessor
About Clay is a CSS preprocessor like LESS and Sass, but implemented as an embedded domain specific language (EDSL) in Haskell. This means that all CSS selectors and style rules are first class Haskell functions, which makes reuse and composability easy. Clay doesn't really use any clever Haskell tricks which makes it easy to work with, even without a lot of Haskell experience. {-# LANGUAGE Overlo
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT
SassやCompassを使って、ズルいデザインテクニック：ズルいデザイン（2）（1/2 ページ） SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 1: ズルいグラデーション CSS3ではグラデーションを扱えるようになったことから、画像を使わずに自在にグラデーションを描画して、CSSだけでよりリッチなビジュアル表現が可能になりましたが、一口にグラデーションといっても、う
第45回 CSSのコンポーネント化がもたらすメリット | gihyo.jp
同じ記述の繰り返しを防ぎメンテナンス性や柔軟性を向上 W3Cによって策定された仕様の1つで、HTML／XMLの要素の表示をコントロールするために生まれたのが「CSS」（Cascading Style Sheets）です。HTMLとこのCSSを組み合わせることによって、文書構造（HTML）と見た目の表現（CSS）を切り離すことが可能になるほか、HTMLだけでは実現できないデザインやレイアウトが可能になるといった大きなメリットがあることから、Webサイトの構築やWebアプリケーションの開発において欠かせない技術となっています。 このCSSで現在注目を集めつつあるのが「オブジェクト指向CSS」や「Scalable and Modular Architecture for CSS」（拡張性のあるモジュールアプローチ）といった考え方です。これらは、CSSで記述する内容を「コンポーネント化」するこ
Nodefront
Nodefront Nodefrontはフロントエンド開発高速化のためのNode製コマンドラインユーティリティ。 documentation http://karthikv.github.com/nodefront/ github https://github.com/karthikv/nodefront install npm install でインストール。 $ npm -g install nodefront upgrade アップグレードするにはアンインストールしてから再インストール。 $ npm -g uninstall nodefront $ npg -g install nodefront 依存モジュールを正しくインストール出来ないバグが報告されているので npm updateは非推奨。 screencast http://vimeo.com/46197434 command
ネストを覚えた人のためのSassの便利な使い方
11. $baseColor: #AD253A; 変数を代入 body { background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }
Nodefront by karthikv
Overview Nodefront is a node.js-powered command-line utility that speeds up front-end development. Installation Installation is simple with npm: It is not recommended to use npm update nodefront due to a known bug that prevents it from adding new dependencies correctly. Introductory Screencast Before diving into the documentation, you may view a screencast that introduces some of nodefront's key f
Nodefront
Nodefront Nodefrontはフロントエンド開発高速化のためのNode製コマンドラインユーティリティ。 documentation http://karthikv.github.com/nodefront/ github https://github.com/karthikv/nodefront install npm install でインストール。 $ npm -g install nodefront upgrade アップグレードするにはアンインストールしてから再インストール。 $ npm -g uninstall nodefront $ npg -g install nodefront 依存モジュールを正しくインストール出来ないバグが報告されているので npm updateは非推奨。 screencast http://vimeo.com/46197434 command
磯野ー、Stylus を導入しようぜー！ | astronaughts.net
どうも、中島です（嘘 この記事は CSS Preprocessor Advent Calendar 2012 の 6 日目として書かせていただきました。 CSS Preprocessor については詳しくありませんが、最近 Node を触ってる関係で Stylus に興味を持ち始めました。LESS や Sass が賑わっているそんな中でも「俺は人と違うことがしたい」的な天邪鬼な人もいるかと思います。 そんなアマノジャカーにお届けしますのが今回の記事。 Stylus を導入してみよう 導入方法はいくつかあります。 1. Codekit, LiveReload などのツールを使う Sass なら他に Scout, Compass.app など、LESS なら crunch, SimpLESS なんかがあるようですね。もしかすると Codekit、LiveReload 以外にもイカしたツールがあ
nib - CSS3 extensions for Stylus
Nib CSS3 extensions for Stylus Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier. body { background: linear-gradient(top, white, black); } body { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000)); background: -webkit-linear-gradient(top, #fff 0%, #000
Stylus + Nib を使ってみた
Stylus + Nib を使ってみた Sass の Compass インスパイアードな Stylus のライブラリ Nib を使ってみました。よく使うベンダープリフィックスやグラデーション、clearfix 等の便利な mixin の詰め合わせです。インストールについてはこちら（Stylus, Nib, node-canvas をインストール）。 Stylus って何？という方は公式（LearnBoost/stylus - GitHub, Stylus - Expressive, dynamic, robust CSS）や Kyosuke hamalog (Sass と LESS 以外の選択肢 Stylus) 等をどうぞ。 この記事は Less & Sass Advent calendar 2011 に触発されて書きました。Less, Sass(, Stylus) についての面白くって為
Sass,LESS,StylusのColor functionsのコンパイル結果を比べてみた - inkdesign
28 Nov 2012 Sass、LESS、StylusといったCSSプリプロセッサには、色を扱うビルトインファンクションがある。 それらの機能はプリプロセッサごとにさまざまだが、共通して存在するファンクションの一つとして、lighten(color,percentage)、darken(color,percentage)といった引数に指定した色を明るく/暗くするというのがある。 明るく/暗く、といっても単純に明度を操作するのか、色々とごにょごにょしているのかは分からないが、とりあえず同じ書き方をするなら同じ値を返すだろう、という期待をしたくなるが、実際のところどうだろうか。 ところでこれらの使い所はある？ 結論からいうと、実務では色系のファンクションなかなかお世話になることはない。というのも現状Photoshopのデザインカンプを元に、そのカンプ上の色を抽出して、文字色や背景色とする。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://chrome.google.com/webstore/detail/sass-inspector/lkofmbmllpgfbnonmnenkiakimpgoamn
GitHub - enja-oss/stylus: stylusドキュメント日本語訳
loosely.net is available for purchase - Sedo.com
https://loosely.net/archives/323
GitHub - LearnBoost/stylus: Placeholder repo for keeping Stylus docs in place
GitHub - stylus/nib: Stylus mixins, utilities, components, and gradient image generation
TJ Holowaychuk
Stylus, Nib, node-canvas をインストール