[B! compass] nayo74のブックマーク

BracketsでSassをライブプレビューする - Qiita

本記事はBrackets Advent Calendar 2014の20日の記事です。ライブプレビューがとても簡単に行えることが魅力のBracketsですが、実はSassのライブプレビューにも対応しています。方法はデフォルト機能によるものエクステンション（brackets-sass）によるものの2通りあり、それぞれメリット・デメリットがあります。以下、それぞれの方法でライブプレビューを実行するための解説をしていきます。ディレクトリツリー |──index.html | |──sass/ ──main.scss |　　　　|──_var.scss |　　　　|──_module.scss | |──css/（コンパイル前は空フォルダ）デフォルトの機能メリット必要なのはSassの実行環境のみ Compassにも対応デメリット反映されるのがファイル保存時のコンパイル後で、

nayo74 2017/06/27

リンク

Compassの設定ファイル「config.rb」の編集方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、デザイナーのサリーです。最近買った漫画は「ウメハラ – To live is to game -」です。さて、王くんのおかげで Sass + Compass を使えるようになりました。わーい！王くんのブラボーな記事はこちら↓ CSSの常識が変わる！「Compass」、基礎から応用まで！ Sassファイルの吐き出したCSSファイルの出力スタイルの設定は「config.rb」を書き換えることで簡単に変更出来ました。今回はconfig.rbの基本的な編集方法についてまとめてみました。 config.rb のデフォルトの記述 config.rbの中身は何もいじらないとこんな感じになっていると思います。（Codekitなどで吐き出すとCodekitのデフォルトの設定が入るので、またちょっと違います） # Require any additional compass plugin

nayo74 2016/01/09

リンク

Codekit 2.0 ファーストインプレッション

マカーお馴染みの高機能GUIコンパイラー Codekit がバージョン2になり、色々刷新されました。いきなり新バージョンがリリースされたんでびっくりです。とりあえず買ってみたんで全部機能試してはいないですが、ひと通り触ってみた感想をつらつらと。 Codekitとは CodeKit: THE Mac App For Web Developers CodekitとはMac専用のGUIコンパイラーのアプリのことで、SassやらLessやらCompassやらこーひーすくりぷとやらをコンパイルしてくれたり、ブラウザをオートリロードしてくれたり、画像最適化してくれたりと、黒い画面が苦手な方安心◎のコーディングお助けツールです。 2でさらにビルトインサーバーやアセットなど機能が追加してパワーアップ。 Codekitを知らない人は、このまぼろしの木村さん西畑さんのスライド見れば全てわかります。 CSS

nayo74 2014/03/06

リンク

今日から使える！ Sass/compass ゆるめ勉強会

Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。

nayo74 2013/11/20

sass
compass

リンク

GitHub - Compass/compass-growl: growl notifications for compass 0.11 and up

nayo74 2013/11/16

compass
sass

リンク

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

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

nayo74 2013/11/16

リンク

見せてもらおうか、SASSのCompassとやらの性能を

あ、どうも。おはようございます。本格的に大型連休ということですので巷でちょくちょく耳にする、「SASS」とか「SCSS」とか「COMPASS」というものに挑戦してみました。参考にした記事一体どこまで便利なのか、文字でずらずら書いてもしょうがないので、百聞は一見に如かずということで、簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意しておきましたので、まずはこれを見てみてみよ！連休中にテーマを作ろうそうしよう。あ、ついでにscssってのとcompassってのがなんかどうも便利っぽいのでちょっと調べてみよっかな。から始まって。結論から言うと「狂おしいほど便利で今までぼくは何をしてたんだ」というレベルでした。 CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass(主にSCSS)