sassに関するi_am_jellyのブックマーク (6)

  • 「Compass」、基礎から応用まで! | 株式会社LIG

    こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません! はじめに結論を言うと、CompassでCSSを書くと 早い! 見やすい! メンテしやすい! コード量がぐっと減る! 一度使い出したら最後、もう元には戻れない! 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず! 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください! Compassとは? Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

    「Compass」、基礎から応用まで! | 株式会社LIG
  • CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞

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

  • Introduction to Sass and How to Setup with Mac + Coda

    2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか?すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない!」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac+Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト! Sassとは 日語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換(コンパイル)してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する

    Introduction to Sass and How to Setup with Mac + Coda
  • Sass+Compassのちょっとリッチ系CSSフレームワークを比べてみた(画像多くて重くてごめん)

    Sass+Compassのちょっとリッチ系CSSフレームワークを比べてみた(画像多くて重くてごめん) 2013.04.10 | この方法お勧めです! | 覚えておきたい 春です。そろそろ春キャベツがおいしい季節。そんな春キャベツをたっぷり使って、サーモンのちゃんちゃん焼きはいかがですか? なんだかちゃんちゃん焼きっていうときはサーモンじゃなくて鮭って言った方がおいしそうですね。なんでかな? さてさて、世の中CSSフレームワークってたくさんあって、Bootstrapなんかだともう誰でも使ってる、みたいな感じがありますね。 私はなんとなくしっくりこない感じがして、今までCSSフレームワークって使って来ませんでした。 でも、ちょっと思うことあってSass+Compass限定で、ちょっとリッチなuiも揃ったものの中で、さくっとモックアップを作れる様な、使い勝手がいいものがないか、いろいろと探してみ

    Sass+Compassのちょっとリッチ系CSSフレームワークを比べてみた(画像多くて重くてごめん)
  • 4/20(土)にSass+Compass勉強会を開催しました&黒い画面のいらないツールまとめ | mah365

    先日4/20(土)にSass+Compass勉強会を下北沢オープンソースカフェで開催させていただきました! カフェに入りきらなくなるほどの方々にお集まりいただきまして、感謝です。早速勉強会のフィードバックをしたいと思います。 スライド (slideshareの変換処理が終わったらアップします…9時間経っても終わらない) Sassの需要は高かった 懇親会で話を聞くに、スタイルシートの生産性を上げるSassにはかなり注目が集まっているとのこと。とはいえ、実際に導入しようとすると、かなり敷居が高く感じる。そういった理由で参加されたマークアップ・エンジニアの方が多かったようです。 知りたい内容も、Sassの機能そのものというよりは、むしろ運用面の方が強そうです。Railsエンジニアは半強制的に使うSassですが、静的ページを作成する際のフローなんかも、もっと共有していけると良いですね! 並べると、

    4/20(土)にSass+Compass勉強会を開催しました&黒い画面のいらないツールまとめ | mah365
  • 下北沢OSSカフェにて、Sass+Compass勉強会を開催しました。

    先日のエントリーでアナウンスさせていただきました、mah_labによるセミナー形式での、Sass+Compass勉強会を下北沢OSSカフェにて開催しました! 開催決定から当日の間に、このブログのテーマもSassで作ってみたり予習はして行ったわけですが、やはり現場での色々な話はとても勉強になりますね! 実際の導入についての具体的な方法は色々なブログで触れられていますので、今回は勉強会の内容を備考録として残しておこうと思います。 mah_labはスライドを再編集して公開すればいいと思う。 どうやらmah_labがスライドを公開してくれるようなので、こちらの記事もチェックしてみてください。 4/20(土)にSass+Compass勉強会を開催しました&黒い画面のいらないツールまとめ Sass&Compassの導入について 黒い画面使わないでも使えるツールがありますよ! ということでご紹介したアプ

    下北沢OSSカフェにて、Sass+Compass勉強会を開催しました。
  • 1