Sass3.3とComassを使う - ./ringo
BEMという命名規則とSass 3.3の新しい記法 であるように @at-rootという ディレクティブを使いたかったので、 Sassのバージョンを上げてみたけれど バージョン指定で引っかかったのでメモ。 まずはSassのRC版とCompassの最新版を指定した。 GemはBundlerで管理しているのでGemfileに以下を記述。 source "https://rubygems.org" gem 'sass', '3.3.0.rc.1' gem 'compass', '0.12.2' これだとどうもCompassが動かず『Incompatibility with Sass 3.3 Alpha』を参考に Sassのバージョンを変更。 source "https://rubygems.org" gem 'sass', '3.3.0.alpha.149' gem 'compass', '0.
Compassのsprite-mapでハマった - Qiita
Compassでsprite-mapを使った時、 記述順を間違えると動いてくれないことがあるので、メモ。 これだとダメ。 $sprite-map: sprite-map("sprite/*.png"); %sprite-base{ $sprite-path: sprite-path($sprite-map); $sprite-width: image-width("sprite/"#{$sprite-path}) / 2; $sprite-height: image-height("sprite/"#{$sprite-path}) / 2; background-image: sprite-url($sprite-map); background-size: $sprite-width $sprite-height; background-repeat: no-repeat; }
Sass+compassの更新 | code up
久々にSass+compassを触る機会が出来たので、環境を更新。 Sass+compassをEclipse環境にインストールした記事はこちら。 Sassとcompassをアップデート コマンドは次のように実行。 >gem update --system (略) >gem update --system Latest version currently installed. Aborting. >gem -v 1.8.15 >gem update sass (略) >gem update compass (略) >sass -v Sass 3.1.12 (Brainy Betty) >compass -v Compass 0.11.7 (Antares) (略) 新規sassプロジェクトの開始 前回はコマンドラインから実行したが、今後のためにantのターゲットを作成。 <target na
初めてSassとCompassを使った際に参考にした記事まとめ
しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。 順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。 Sassとは まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽になったりします。 Sassの公式サイトは以下から。 Sass – Syntactically Awesome Stylesheets Compassとは Sassを拡張して、便利な機能を追加してくれるものです。ベンダープレフィックスを自動でつけてくれたり、リセットCSSを呼び出してくれたり、CSSスプライトを使えたりします。 Compassのドキュメントは以下から確認できます。 Compass H
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編 | DevelopersIO
はじめに 今回から「すぐに使えるSCSS入門シリーズ」からタイトルを変えてSCSS・Compassを使ったコーダー向け開発効率アップテクニックを紹介していきます（シリーズは続きます）。 今回作成したサンプル このサンプルはgithubで配布しています。ダウンロードしてソースなどご確認ください。 動作するHTMLサンプルはこちらです。 CSS Spriteって？ CSS Spriteについてお復習いです。 簡単に言うと画像をくっつけてCSSのbackgroud-positionで表示を制御するテクニックです。 CSS Spriteのメリット 画像をくっつけることによってHTTPリクエスト数の削減 マウスオーバーなどで表示を切り替えるがスムーズ（個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します） CSSのみでボタンなどのアフォーダンスを切り替えることができる CSS Sp
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite - MOL
Sass、Less、StylusなどCSS Preprocessorに関するAdvent Calendarです。― CSS Preprocessor Advent Calendar 2012 - Adventar パフォーマンスの勉強ができてなおかつSass/Compassのお勉強にもなるお得なシリーズまさかの2回目。Adventにぶつけてきた！ややもするとシリーズものの2作目というのは駄作になりがちだが、そんなプレッシャーはねのけて乱反射！やっていくYO! これまでの： パフォーマンスからみるSass/Compass 第1回：Nestingと@import - MOL パフォーマンスからみるSass/Compass 番外編：MSは青かった - MOL CSS Spriteの利点・欠点 『ハイパフォーマンスWebサイト』の書籍には「高速サイトを実現する14のルール」というものがある。その中
Sass/Compassの社内運用に関するありがたいスライドから学んだことのまとめ
これはありがたい！と思えるSass/Compassに関するスライドが2つほどSlideshareにアップされていたので、このブログでも紹介させていただきます。去年行われたHTML5 Conference 2012でNHN Japanのマークアップエンジニアの方から発表されたもので、すでにSassを使ってCSS運用を始めている方からの貴重な情報です。 前編、後編とあるので、それぞれに対して自分なりに重要だと思ったこと、また、それらに対する考察をまとめてみました。自分が管理・運営しているウェブサイトのCSS管理も、Sass/Compassを使ってやりたいなぁと思う今日このごろです。時間的な初期投資は必要だけど、長期的に考えたらメリットも多く時間の節約にもなりそうです。 今回の投稿では、まずは前編から。 前編で気になったところのまとめ 「実践Sass 前編 — HTML5 Conference
SassとCompassを使って楽しくCSSコーディング！ - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。
Sublime Text 2 で Sass/compass のコンパイルができるパッケージ 『Compass』 « shilog
この記事は Sublime Text 2 Advent Calendar 2012 とは関係なく書いております。 いや、Sublime Text 2 Advent Calendar 2012 で投稿されていた 一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTPで作業効率化する方法。 という記事を読んで、自分で試したことのメモなので少し関係あるかな。 記事書いてくれた @tomo_thumb さん、ありがとうございます m(_ _ )m ということで、Sublime Text 2 だけで Sass/Compass のコンパイルができるということで、黒い画面でコマンドゴニョゴニョしたり、いちいち Scout 立ち上げたりしなくてもよさそうなので、Sass/Compass の導入の敷居が少し下がりそうな感じですね。以下、Windows 環境での解説。 pack
CompassでCSSスプライト（Retina対応）
今はコレです。 $sprite2x: sprite-map("sprite2x/*.png"); $sprite-img:sprite-url($sprite2x); @mixin sprite-background2x($name) { background-image: sprite-url($sprite2x); background-repeat: no-repeat; overflow: hidden; width: image-width(sprite-file($sprite2x, $name)) / 2; height: image-height(sprite-file($sprite2x, $name)) / 2; $ypos: round(nth(sprite-position($sprite2x, $name), 2) / 2); background-positio
SassフレームワークのCompassでCSS Spriteが簡単にできる
Sassのことばっかりかいてるんですけど、html5+α@福岡 勉強会で珍しく発表したり、仕事で久々にsassばっかり触ってるのもあるんだと思います。 そんなSassをお勧めする理由の一つがCompassというCSS Frameworkなんです。 便利なMixinやらFunctionやらあるんですけど、一番うれしいのが面倒なCSS Spriteを自動化できることでしょうか。 例えばhogeというディレクトリにSpriteしたい画像を格納しておけば、 [code] $sprite: sprite-map("hoge/*.png"); [/code] で画像を結合してくれます。 ファイルの結合にはオプションをつけることで色々とできて、 例えば、各画像ファイルの間隔をあけて結合させたいときは、 [code] $sprite: sprite-map("hoge/*.png", $spacing:
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ファイルを変換する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Trello