LESS & Sass Advent Calendar 2011
.day1 { content: "Sassで行こう！"; voice-family: hell2u; } .day2 { content: "CSSとフレームワークとメタ言語"; voice-family: debiru; } .day3 { content: "Sass を今すぐ実務で使おうよ！"; voice-family: tacamy; } .day4 { content: "LESS初心者向けのナニカ"; voice-family: sigwyg; } .day5 { content: "スマートフォン向けサイト作成時のSass活用法"; voice-family: mattari_panda; } .day6 { content: "sassの抑えておきたいfunctionの使い方"; voice-family: a_t; } .day7 { content: "Sass実戦
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Sass で Singleton を実現し、安心してクラスを再利用する | nodot
この article は Less & Sass Advent Calendar の23日目のエントリーとして書かれています(あれれ?!)。 概要 CSSメタ言語を導入する目的の一つにリソース再利用性の実現というものがある。Sass の場合、mixin や extend によって実現している。特に extend によるスタイルの継承は強力である。 しかし再利用できるようなクラスをまとめたライブラリを import して利用すると、実際には使われていないクラスも出力されてしまい、ファイル容量が無駄に肥大する。使うクラスだけコピーするとか、使わないクラスは削除するなどの手動管理は手間がかかる。 そこでクラス自体を出力するような mixin を作れば、必要なクラス定義だけを include でき、不要な CSS コードを出力しなくて済む。しかし、extend したいクラスを必要になる度に inc
簡単に使える Compass のオススメ機能 - log
こんにちわ。 Gaji-Labo の @neotag です。今日は Less & Sass Advent calendar 2011 の24日目です。 アドベントカレンダーは乗り遅れるとネタ切れ危険ですね。 さて、 Compass という Sass 用の Framework がありまして。それがそこそこ便利なので、使い方が簡単なものをかいつまんでご紹介です。 http://compass-style.org/ インストール方法は下記のとおり。 $ gem install compass 目次 sass --watch のオプションをプロジェクトごとに管理 画像の高さと横幅を取得 Sprite を自動生成 開発用CSSと納品用CSSで画像の読み込み先を変更する 開発用と本番用で色々変えてみる ■その1 sass --watch のオプションをプロジェクトごとに管理 この記事を公開する前に確認
Sassの!defaultフラグの使い方と使われ方
Sassを書く時には変数を多用することと思います。それら変数は自分で定義して自分で使うので、同じプロジェクト内で再定義する必要はあまりありません。しかし他人や自分の作ったSassファイルを流用する場合、その中で使われている変数の値を最適化する必要が出てきます。もしその変数がハード・コーディングされているだけだとしたらどうでしょうか？ その場合変数を直接書き換えることになるでしょう。こういったSassファイルの再利用における問題を解決するためにSassには!defaultというフラグが用意されています。 Less & Sass Advent Calendar 2011もついに18日目ですね。ゴールまであと少しです。 まずはSassリファレンスの!defaultを扱っている部分を読んでみましょう。参考にざっと以下に訳してみました。 変数の値を指定する時、!defaultというフラグを付けておく
レスポンシブ対応に使えそうなLESS/Sassの書き方 | Good thinking
Responsive Web Designを考えたCSSコーディングに役立つLESS/Sassのコードを紹介します。 本記事はLess & Sass Advent Calendar 2011の13日目の記事です。 ※投稿日付が15日になっていますが、私の勘違いで投稿が遅れてしまいました。。（関係者の方ごめんなさい） LESS/Sassの前にResponsive Web Designの定義の話 まず先にResponsive Web Designとはどういうものであるかを確認しましょう。 Ethan Marcotteが提唱したResponsive Web Designは、次の3つの要素で構成されたものとなります。 A flexible, grid-based layout,（柔軟で、グリッド型のレイアウト） Flexible images and media, Media queries
Twitter Bootstrapの少しだけ便利な使い方 - gnnk
Less & Sass Advent calendar 2011の11日目です。 Twitterが提供しているTwitter Bootstrapの使い方についてです。 （僕が利用しているのが、SassのためSass Twitter Bootstrapでの説明となります。） CSSのフレームワーク・ライブラリというと、今までにも Brueprint YUI YAML 960 Grid System など、いろいろ存在していましたが、基本的に、HTMLにクラスを追加して利用するのが、通常の使い方になります。 Twitter Bootstrapに関しては、Less(Sass)でつくられていることから、同梱のcssファイルをそのまま使うのではなく,scssファイルから、自分でcssファイルを作成することにより、もう少し便利な使い方ができると思います。 （当然、今までのフレームワーク的な使い方
watchオプションの使い方 - あと味
Less & Sass Advent calendar 2011の11日目です。 Sassは自分がコーディング担当の案件は、確実に使っているのですが、まだまだ表面的な使い方しかできてないのかなと、Advent Calendarの他の記事を見ると感じます。 さて、Sassを使ってCSSを書いていく時には、ほぼ例外なく、watchオプションのお世話になることと思います。 弊社のデザイナーのやり方などを見ると、イマイチ理解して使ってない感じもしたりしたので、少し細かく説明する記事があってもいいのかなと思って、この記事を書くことにしました。 知ってる人には当たり前すぎて、得るものがないかもしれませんが、その点はご了承下さい... watchオプションとは？ Sassはfilename.sassまたは、filename.scssを使って、Sassの記法、もしくはSCSSの記法で書いたファイルを、コマ
LESS初心者向けのナニカ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 こんにちは『Less & Sass Advent calendar 2011』4日目。Sig.@sigwygがお送りします。「ハードル下げるよ」と言っていたtacamyが文量ある良記事を上げており、高まるハードルに恐々としている今日この頃。皆さん如何お過ごしでしょうか。まあ僕はマイペースで行きます。久しぶりのBlog記事ですしね！（言い訳） さて、小狡く予防線を張ったところでLESS紹介です。LESSはCSSに変数やら関数やらネストやらを実装します。Sassと同じようなCSS拡張とかメタ言語とか言われるモノです。この辺りの解説はdebiruくんの記事が詳しいので割愛。
Sass を今すぐ実務で使おうよ！ « NAVER Engineers' Blog
はじめましての tacamy です。 さて今日は Less & Sass Advent calendar 2011 の 3 日目です。 「Sassかぁ。まーたしかに便利そうだけど、 実務で使えるか分からないし自分には関係ないかな。」 とか思ってませんか・・・！？ ぜんぜんそんなことないですよ！( ･`ω･´) その証拠に、NAVER では半年ほど前から、 新規サービスはすべて Sass を使って制作していますが、問題なく使えています。 むしろ効率化できて、CSS を書く工数が減った気もします（個人の感想です）。 小難しいテクニックは、このあとの 22 人が書いてくれると思うので（丸投げ）、 今日の記事では、Sass を実務で使うことに絞って書いてみます。 実務でSassを使うメリットって？ 制作の工数が減る CSS3 を使うときのベンダープリフィックスをいちいち自力でつけたり、
CSSとフレームワークとメタ言語 | debilog
Less & Sass Advent calendar 2011 の 2 日目を書きます。ウェブページを作るときのアプローチに触れた後で、アドベントカレンダーのテーマである LESS や Sass が、ウェブページ制作者にとってどのように役に立つものなのかを紹介したいと思います。 あなたが HTML や CSS を書くことになったら HTML も CSS も自分で書く HTML テンプレートスキンを使う CSS フレームワークを使う CSS フレームワークの紹介 メタ CSS 言語 CSS の構成要素 CSS の仕様ではできないこと CSS のメタ言語を使う Sass 3 系の登場 他のメタ CSS 言語 終わりに あなたが HTML や CSS を書くことになったら 個人や団体のウェブサイトを作りたいとき 個人で使っているブログなどの CMS をカスタマイズしたいとき 仕事でウェブアプリ
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Design Tips To Help You Succeed - Web Design