タグ

CSSとSassに関するAltNightのブックマーク (5)

  • 実践Sass 後編

    Sass/Compassを「触って覚える」を目的とした講習会スライド。 実習で使用するファイルは以下からダウンロード頂けます。 http://webnaut.jp/download/markup_140204/sass.zip 目次: 1. Sassとは/機能紹介 2. Sassを触ってみよう 3. Sass開発環境の設定 4. [Work1]ネストとインポート※ 5. Compassとは/機能紹介 6. Compassの設定 7. [Work2]Compassを使ったCSS Sprite実践※ 8. [Work3]納品時の作業※ 9. 書籍、参考サイト紹介 10. [Work4]追加課題※ =========================== 紹介記事 http://webnaut.jp/markup/663.html ===========================

    実践Sass 後編
    AltNight
    AltNight 2012/09/08
    「地味に便利」すごくいいね。IE6ハックのサンプルがいろいろあってわかりやすい
  • SassのmixinライブラリBourbon

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 最近CSSを書くのにCompassを使ってたんだけど、 compassとやら試した - Takazudo hamalog大してCompassの機能を使ってないので、オーバースペックな気がしてきた。なので、Compassのライブラリから、必要なやつだけ引っこ抜いてきて、オレオレライブラリとして使えばいいやと思ったんだけど、なんだかCompassは独自に関数を定義したりしててそのままだと使えないっぽかった。compactとかいう関数が中で使われてて、これがCompass独自に定義しているやつらしく、こいつは、複数の引数を渡し、ある分だけにまとめてくれるやつらしいんだけども。 めんどくさいから他にな

    SassのmixinライブラリBourbon
  • Sassの存在意義への補足

    Sassの存在意義の話があんまりうまく伝わってない感じなので、3の別々に書けてSassで関連付けられるということについて少しだけ書く。抽象的な概念の話なので具体的な説明というのもなかなか難しいけど、CSSフレームワークを使う時にどうなるかみたいなことを取り上げる。 Twitter Bootstrapを始めCSSフレームワークはいくつもあるが、それらはだいたいユニークなクラス名を持っている。例えばTwitter Bootstrapで2カラムレイアウトを作る場合は以下のようなHTMLにしなくてはならない。 <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> div要素はsectionやaside要素などを使っても良いが、クラス名はこうでなくてはならない。Sass (やLESS)があ

    Sassの存在意義への補足
  • はてなにおけるCSSメタ言語(CSSプリプロセッサ)の導入について - Hatena Developer Blog

    こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語(CSSプリプロセッサ)。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs

    AltNight
    AltNight 2012/03/19
    デザイナーにとってなにがいいか、という視点はたしかに重要だよなぁ
  • Sass - チュートリアル

    この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基の日語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば RubyWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非

  • 1