タグ

LESSとsassに関するweb_designerのブックマーク (4)

  • ウェブデザインをはじめるあなたへ - ウェブ雑記

    ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。+いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ

    ウェブデザインをはじめるあなたへ - ウェブ雑記
  • フリーのSass,LessコンパイラKoala【Win,Mac】

    KoalaはWin,Mac,Linuxなどマルチプラットフォーム動くGUIのコンパイラです。 対応言語はSass(Compass),Less, CoffeeScriptです。 インストールはこちらからご使用のOSを。 現時点のバージョンはv1.0.0v1.3.0です。リリースしたてですね。 動作には予めRubyのインストールが必要です。 ※v1.3.0になったので少し修正しました(2013.6.2) koala使いかた ややフラットUIてきなインターフェイス。 プロジェクト登録 「+」ボタンでフォルダを選択するか、 作業フォルダをドラッグすればプロジェクトが登録されます。 基これだけでSass,Less,Coffeeのコンパイルをしてくれます。 書き出し設定 scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れます。 「dynamic compilation」を

    フリーのSass,LessコンパイラKoala【Win,Mac】
    web_designer
    web_designer 2013/04/18
    こ、これは!!!
  • 昔のCSSをLessとかSassにしたいの

    ども、白です。ホワイトデーは来月です(はい)。 さて、いろんなデバイスを対象にしたり、ちょっと規模の大きいサイトを作っていくとなるとCSSを書くのも大変です。そんな時は「素のCSSなんて書いてられっか、バカヤロー!(ガラガラガッシャーン)」ってなるので、最近話題の「Less」や「Sass(+Compass)」「Stylus」といったCSSプリプロセッサを使ってテーマのスタイルを作る人もいるでしょう。 新規で作る場合は自分の好きなプリプロセッサを使えばいいし、「Forge」なんていうSass / CoffeeScriptなテーマ開発フレームワークみたいなの(要Ruby / RubyGems)もあるんですが、昔構築したサイトのメンテナンスとかリニューアルの時など、既存のテーマを元にいじらないといけない場合はきっとイライラすることでしょう(笑)。 しかし、世の中には便利なツールを作ってくださる開

    昔のCSSをLessとかSassにしたいの
  • デザイン修行:ローカルでCSSやらBootstrapと格闘

    2012.11.28の作業 DevLOVE2012ではいろんなscssが出てきて混乱。これどうなってるのだ。多分sass-twitter-bootstrapを使用しているためと推測。 普通にbootstrap使うだけなら、普通にbootstrap.cssを使うだけでいいのかも。WordPress+Twitter Bootstrapのみという組み合わせ。その次の段階で+Sassに取り組んでみる。 あと、ブログのタグの王道がわからない。はてなブログのHTML構造は見つけた。 SCSSとLESSの違い。SCSSを選んだ場合。 https://github.com/twitter/bootstrap のサイトを眺めていたら、lessというのが出てきたので。 CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 http://dxd8.com/archives/217/ なぜ、こんなことに

    デザイン修行:ローカルでCSSやらBootstrapと格闘
  • 1