sassの抑えておきたいfunctionの使い方 « NAVER Engineers' Blog
こんにちは。 年末の予定はぶっ通しでスカイリムにつぎ込むことが決定したUIT富田です。 今回は、Less & Sass Advent calendar 2011の6日目として、 sassのfunctionについて解説します。 すっぽりハマった四則演算の落とし穴 sassは値の四則演算をサポートしており、10進数だけでなく、16進数の値であってもよしなに計算してくれます。 color: #a3a4a5 + #111111; ↓ color: #b4b5b6; 16進数と10進数でもエラーにならず計算してくれます。（普通あまりやらないとは思いますが） color1: #000000 + 1; color2: #000000 + 15; ↓ color1: #010101; color2: #0f0f0f; この16進数の計算は、結果が#fffffを上回った場合、上回った分は切り捨てて、す
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
基本 - Sassオレオレリファレンス
SassはCSSとよく似ていますが、CSSでは出来ないことが出来ます。 このページでは、使うときに避けては通れない基本中の基本について解説しています。 @import 有効な条件 ファイル名先頭にアンダースコアを付けるルール（partial） 複数指定 変数と文字列補完 @importのネスト コメント 文字コードの指定 Windows環境におけるRuby の外部エンコーディング問題 ネスト プロパティのネスト 親のセレクタを参照する @import CSSも300行を超えてくると分割したくなると思います。 もともとCSSには @import で他のCSSファイルを読み込むことが出来ますが、 Sassの@importはオリジナルよりもちょっと便利になっています。 有効な条件 1. ファイル名に拡張子.cssがついている @import "foo.css"; 2. ファイル名が http:/
Sass + Compass を使って、効率良く css をコーディングしよう！ | SONICMOOV LAB
皆さまお久しぶりでございます。 ラーメン女子のうさこです。 会社に入ってもうすぐ１年が経とうとしています。 早いですね・・・色々ありましたが本当にあっという間でした（遠い目 今年も残りわずか 26 日ですよ・・・っ 皆さま、やり残したことはありませんか？・・・わたしはいっぱいあります。 最近はラーメンを食べる機会が徐々に減ってきています。 ちょっとは体に気をつけなきゃいけないお年頃に・・・。 前回の記事「Sublime Text 2 を使ってみよう（コーダー編）」が大変好評だったので、今回はそれに関連付けた記事とさせていただきますっ こちらの記事は、CSS はある程度書けるんだぜッ！という方を対象としています！ CSS をこれから勉強するつもりである方は、ある程度習得してからトライしてみてください！ 昔の恩師からよく言われていました・・・Step by Step です！ 目次 Sass の
今日から使える！ Sass/compass ゆるめ勉強会
Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。Read less
Sassコンパイラ「Prepross」とCSSフレームワーク「Gumby」で高速プロトタイピング | Agnist.code
昨今注目度も高まっているSassを、最も簡単に使えるコンパイラ「Prepros」と、個人的に最近お気に入りのCSSフレームワーク「Gumby」を広めたくて書きます。 SassやCSSフレームワークとか、ちょっと二の足踏んじゃうな…みたいなノンプログラマーなフロントデザイナーの方ほどオススメです。 PreprosのインストールPreprosをダウンロードしてインストールしたら、準備はそれで完了です。 ここはさすがに説明不要で終わると思います。 GumbyのダウンロードGumbyトップページから落としてください。 カスタマイズダウンロードもできるので、多少変更しておきたい場合はここからダウンロードするのも良いです。ちなみにこれらのカスタマイズ項目は、Sassを使えば後から簡単に一括変更できます。 ダウンロードしたファイルを適当な場所に解凍してください。 解凍してできたフォルダを以後プロジェクト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
