タグ

cssとscssに関するama-chのブックマーク (8)

  • https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP

    https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP
    ama-ch
    ama-ch 2012/06/19
    一貫性のあるCSSらしいCSSを書くための原則
  • Sass&CompassでPath風のメニューを作ってみた - teppeis blog

    2012/12/31 フォロー記事書きました: 1年前のSass/Compassを振り返ってみた みんな気になってしょうがないPathのアレを、Sass, Compass, CSS3 Animationsのお勉強をかねて作ってみました。Chrome, Safari, Firefox, IE10で動きます。 Demo: http://teppeis.github.com/menu-like-path/ Source: https://github.com/teppeis/menu-like-path 「CSSでPath風メニュー」っていうのは国内外ですでにたくさんあるので、気になったところなどSass&Compass寄りでいくつか書きます。 SCSSの記述量はCSSの約5分の1 今回作ったもので、SCSSで約300行(後述の自作ライブラリ含む)、コンパイル後はCSSで約1550行になりました

    Sass&CompassでPath風のメニューを作ってみた - teppeis blog
    ama-ch
    ama-ch 2011/12/28
    おーこれはすごい
  • Sass で Singleton を実現し、安心してクラスを再利用する | nodot

    この article は Less & Sass Advent Calendar の23日目のエントリーとして書かれています(あれれ?!)。 概要 CSSメタ言語を導入する目的の一つにリソース再利用性の実現というものがある。Sass の場合、mixin や extend によって実現している。特に extend によるスタイルの継承は強力である。 しかし再利用できるようなクラスをまとめたライブラリを import して利用すると、実際には使われていないクラスも出力されてしまい、ファイル容量が無駄に肥大する。使うクラスだけコピーするとか、使わないクラスは削除するなどの手動管理は手間がかかる。 そこでクラス自体を出力するような mixin を作れば、必要なクラス定義だけを include でき、不要な CSS コードを出力しなくて済む。しかし、extend したいクラスを必要になる度に inc

  • TIGER189: Link Daftar ID Game Online tiger 189 Terkuat di Bumi!

    TIGER189: Link Daftar ID Game Online tiger 189 Terkuat di Bumi! Selamat datang di TIGER189! Selamat datang! Di tiger189 sebuah situs resmi terpercaya games online dan sangat popular! Daftarkan diri anda dengan kesempatan saat ini! dan jangan lewatkan kejutan kejutan lain yang dapat diberikan pada situs ini ikuti terus informasi nya!

    TIGER189: Link Daftar ID Game Online tiger 189 Terkuat di Bumi!
    ama-ch
    ama-ch 2011/12/12
    ブラウザ上でCSS編集&ホスティング。Sass/Compassも使える
  • A List ApartのGetting Started with Sassという記事を訳しました

    Typekitのデザイナーの人が書いたSassの入門記事、Getting Started with Sassを日語に訳してみました。なおこれがLess & Sass Advent calendar 2011の初日のエントリになります。 内容的には今すぐ使える10のSCSSテクニック! という類のものではなく、Sassのことを知らない人向けの記事です。そのためAdvent calendarの初日にも丁度良いような気もします。Sassの機能を網羅していたりはしませんが、簡単なグリッド・レイアウトのシステムを作るといったような実践性のあるコードを例に上げながら説明しているのでそこそことっつきやすいと思います。 この記事ではSassからCSSに変換するAIRアプリのScoutが取り上げられています。僕は存在は知っていたものの今まで使ったことなかったんですが、これはちょっとすごい感じですね。Rub

    A List ApartのGetting Started with Sassという記事を訳しました
  • Sass、そしてSassy CSS (SCSS)

    CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4

  • (S)CSSの書き方メモ

    HTML5時代に向いていそうな(S)CSSの書き方を模索しています。SCSSで書くのでモジュール式に色々分割した方が良さそうだな……とか色々試してますが、なかなかこれ! というものに辿りつけません……。ということで、ここ最近の書き方をメモがてら晒してみる試みです。 実際にこのサイトで使っているSCSSファイルを抜粋しつつ列記していきます。 style.scss style.cssになるSCSSファイルではCSSは書かないようにします。ただし例外としてCSS文法での@importルールはその必要性からここに書きます。Webフォントなんかで使いますね。それ以外はSCSSの@importでモジュール化した各種SCSSファイルを読み込んでいきます。 @import url("http://fonts.googleapis.com/css?family=Pacifico"); @import "va

    (S)CSSの書き方メモ
  • CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞

    CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために

  • 1