MoOx, Freelance Developer, Front-End / Mobile & Web
Because I am an artist before being a developer, I will focus on offering the best experience to the user. That's what matter after all. Focusing on UX doesn't mean that compromises on what is under the hood are made. The right technologies have their responsibilities on the end result and they must not be neglected. Depending on your need, I will always be sure to offer you what is best to achiev
パフォーマンスからみる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のルール」というものがある。その中
Susy: Responsive grids for Compass
Susy was a responsive layout engine for Sass, before flexbox and CSS grid were available. Susy is now deprecated, and will not receive updates. If you need help moving off Susy, or learning the latest in web layout, we offer training and consulting to help bring you up-to-date. Contact us for details » Not everyone can play with the latest specs, and there will always be edge-cases that require ma
Sass/Compassの社内運用に関するありがたいスライドから学んだことのまとめ
これはありがたい！と思えるSass/Compassに関するスライドが2つほどSlideshareにアップされていたので、このブログでも紹介させていただきます。去年行われたHTML5 Conference 2012でNHN Japanのマークアップエンジニアの方から発表されたもので、すでにSassを使ってCSS運用を始めている方からの貴重な情報です。 前編、後編とあるので、それぞれに対して自分なりに重要だと思ったこと、また、それらに対する考察をまとめてみました。自分が管理・運営しているウェブサイトのCSS管理も、Sass/Compassを使ってやりたいなぁと思う今日このごろです。時間的な初期投資は必要だけど、長期的に考えたらメリットも多く時間の節約にもなりそうです。 今回の投稿では、まずは前編から。 前編で気になったところのまとめ 「実践Sass 前編 — HTML5 Conference
CompassとSassの基礎の覚書（インストールとツール編）
Compassを使えたら便利だろうなぁと思うことが結構増えてきたので、年末に時間をつくって基礎を勉強してみました。僕のような初心者にはとっつきにくいところもあったので、備忘録として基礎をまとめてみました。 目次 そもそもCompassやSassってなに？ SassやCompassを使うメリットは？ CompassやSassを使うには？ コマンドラインツール GUIツール Compassのコマンドラインツールの基本的な使い方 Compassの設定ファイル（config.rb）について まとめ 参考 そもそもCompassやSassってなに？ SassはSyntactically Awesome StyleSheetの略で、CSSをプログラム言語のように拡張するものです。CSSでは使えない変数や関数のようなものを使えるようにするものです。SASSで書いたものは一度プロセス（コンパイル）してCS
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
SassとCompassでSprite画像を作る
やっべぇ、これ便利！って思ったので即共有！これまでSprite画像作る時って皆さんはどうしてましたか？僕はCSS Sprite Generatorというサイトを使って画像を生成していました！ しかし、さっき見てた記事でなんと、Compassを使ってSprite画像を生成する方法が紹介されていて、今さっき試したら結構ツボにハマったので、まずはこの興奮のまま皆さんともシェアさせて貰えれば嬉しいです！ 参考にさせて頂いた記事は以下なんですが、結構詳しくCompassで作るCSS Sprite画像の作り方が紹介されています。まずは僕も試してみた簡単な概要部分をちょっとご紹介させて頂きましょう！SassとCompassの基本的な使い方はググって頂ければ嬉しいです＞＜ How to automatically generate CSS sprites with Sass and Compass | C
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
CompassでCSSスプライト
CompassでCSSスプライト Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。 まずはCompassで監視している画象ディレクトリ内(config.rbのimages_dirで設定しているディレクトリ)に任意のディレクトリを作成して、 CSSスプライトで利用する元画像を入れておきます。 今回は画象ディレクトリは「img」CSSスプライト用のディレクトリは「sprite」とし、元画像は以下の画象です。 a.png b.png c.png 次にscss内で@importでCSSスプライト用のディレクトリとファイルを指定します。 @import "sprite/*.png"; これをコンパイルするとimgディレクトリに「spr
Sass + Compass の基本導入と設定ファイル config.rb について
明けましておめでとうございます！今年もどうぞよろしくお願いいたします。 2013 年は、26 年ぶりに 4 つ全ての数字が異なっているみたいですね。みなさんどのようなお正月をお過ごしでしょうか。私は寝正月を大満喫しました。 さて、Windows でも Mac でも Sass + Compass 環境ならば config.rb で設定が書けるので、今日はそれについて。「Sass とは何か？」「Compass とは何か？」は省きます。インストールから設定、楽して監視開始、あたりを。 Sass + Compass を使うには？ まず基本のとこから一応さらっと！ 最近は簡単な方法もたくさん出ていますが、地道にやるならば Ruby（と RubyGems）を入れて、Sass と Compass を入れて、となります。 Ruby + RubyGem インストール Windows だったら RubyFor
Sass、Compass な僕の Dreamweaver スニペット
CSS Preprocessor Advent Calendar 2012の11日目。 エディターは何をお使いでしょうか？ CSS Preprocessor を利用しているイケてる皆さんは Sublime Text 2 や、Coda 2、Vim などを利用しているかと思います。 僕は CSS Preprocessor は利用しているのですがそれほどイケてませんので、エディターは未だに Dreamweaver 一本です。 というわけで、ドリで Sass や Compass を使う方向けに。 ドリに .scss ファイルなんかを認識させる 以下のまーしーさんの記事を読むとよいでしょう。僕もこれを読んで設定しました。 ※ちなみ Sass のインストールなんかは Codekit にまかせています。その辺は明日西畑さんが書くと思います。 SassとDreamweaverのコードヒントでCSSをさらに
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.
SassとCompassを使って楽しくCSSコーディング！ - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。
MacでRuby on Railsを始めるには RailsInstaller !! Ruby,Rails,Git... が1クリックでインストール完了 - yuumi3のお仕事日記
Mac OS X には最初から RubyやRuby on Railsが入っていますがバージョンが古く現実的ではありません。最新の Ruby on Railsを使うには、 Xcode入れて、 rvm 入れて、 Ruby 入れて、Railsを入れて、MySQLとかをインストールするために Homebrew いれて 。。。 とかなりたへんです でした。 しかし RailsInstaller が出来たのでワンクリックでインストールが完了します。 VMWareFusion 4 私のMacには既に Xcode,rvm,Ruby,Rails,Homebrew, ... が入っているし、この環境を消してまでRailsInstallerのテストは行えません。そんな時には VMWareFusion 4 です。VMWareFusion 4ではWindowsやLinux以外に Mac OS X Lion を動かす
Compass.app: compile Compass/Sass easily without resorting to command line interface
Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of CSS. Compass.app helps designers compile stylesheets easily without resorting to command line interface. It is written in Java and works in Windows/Linux/Mac OS X. Screencast Screenshot OSX Windows Linux Project list Compass In
【Sass】あえて、Compassに頼らずスプライト。 | バシャログ。
未だに9月くらいの気がしているhakoishiです。 おかしい...街がクリスマスとか、正月とか、なんか浮き足立った事言ってる。 さて、今回はSassでスプライト対応する時にCompassを使わないサンプルをご紹介。 Compassのスプライト、すっごく便利なんですよね。 けれど、実案件では使えない場合もあるのではないでしょうか。 画像名を決まったものにしたい、とか。 画像の並びをソースと同じ順にしたい、とか。 納品後、お客さまが更新していく案件では少なくなさそうです。 そんなときの為に、@forを使う方法をば。 サンプル サンプル 恐ろしくざっくりしたサンプルですが...。hoverでの画像切り替え有りです。 使っている画像がこちら。 上に8pxの余白を設けています。理由は後ほど。 HTML 画像置換の為、li>a>spanの入れ子にしています。 <ul class="sprite-li
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://zengrids.com/
SASS/SCSS+COMPASS+zurui-sass-railsで角丸・グラデ・半透明・テキストシャドウ・ボックスシャドウ | | Scimpr Blog
Zurui Sass Sample
compass-style.org is almost here!