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

Gruntを使ってSass(SCSS) / Compassをコンパイルしてみる | MONSTER DIVE

今回は、Gruntを使ってSassをコンパイルしてみます。Gruntのインストールについては、こちらの記事で紹介してくれてるのこちらをご覧ください。Sassの記法には、SCSS記法とSASS記法の2種類がありますが、今回はSCSS記法のみ対応になります。 ※Sass・Compassはインストールされているものとします。 Gruntで処理したいこと Gruntには、SassとCompassをコンパイルする以外にも様々な便利機能があります。今回、下記の機能も使ってみたいと思います。 Sassファイルをコンパイルする livereloadでSassファイルが更新されたらブラウザをリロードさせるバラバラに記述されたメディアクエリをまとめる CSSのプロパティの順番を揃えるフォルダ構成フォルダ構成については下記の通りです。 project ├css (CSSの出力先) ├sass │└sty

oremega 2014/03/17

リンク

GruntでSass/Compassのコンパイル+ブラウザ自動リロード

なんか最近みんなGrunt使い出してて便利便利言ってるので僕も使ってみた。なにやりたいかCompassのコンパイルファイル更新時にブラウザの自動リロード他にもやりたいけど、今日使い始めたのでまずは上記だけ出来るようにする。インストールとかkojikaさんのこの記事見ると一発で分かる。ありがとうございます!!! ブラウザに拡張機能インストールする LiveReload用の拡張機能をインストールする。とりあえずChrome用はこれ。ファイル階層ファイル階層、以下のような感じを想定する。ブラケットで囲ってるのはフォルダ。 [project] ├[files] │ ├[_scss] │ │ ├_*.scss │ │ └style.scss │ ├[js] │ ├index.html │ └style.css ├[node_modules] ├config.rb ├Gruntfile.js └

oremega 2014/02/26

ライブリロード

リンク

howtohp.com - howtohp リソースおよび情報

Get a new domain registered at NameSilo.com. Find out who owns any domain name with the WHOIS tool. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

oremega 2013/09/15

リンク

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

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