CSSフレームワーク「Compass」の基礎
Compassのメリット CSSスプライトが簡単に作成できる Compassでは、フォルダに配置するだけで、CSSスプライトで記載された一枚画像が簡単に作れます。CSSスプライトを利用すれば、1ページ辺りの画像の読み込みを何度も実行せずにすむため、ページの高速化につながります。 独自のmixinが利用できる グラデーションやベンダープレフィックスを自動で付与してくれる機能があります。 独自の関数が利用できる 画像のサイズを取得したり、三角関数の計算をしたりできる関数があります。 mixinや関数はCompassの公式リファレンスで紹介されています。ここでは記載できないほどのmixinや関数がありますので、一度見てみると面白いかと思います。 上記に加え、第1回目に記載したこちらのSassのメリットももちろん享受できます。 読みやすい 変数や繰り返し処理が使える 成果物の品質を統一できる 高速
ScaleOut | Supership
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
Sass + Compass を使って、効率良く css をコーディングしよう！ | SONICMOOV LAB
皆さまお久しぶりでございます。 ラーメン女子のうさこです。 会社に入ってもうすぐ１年が経とうとしています。 早いですね・・・色々ありましたが本当にあっという間でした（遠い目 今年も残りわずか 26 日ですよ・・・っ 皆さま、やり残したことはありませんか？・・・わたしはいっぱいあります。 最近はラーメンを食べる機会が徐々に減ってきています。 ちょっとは体に気をつけなきゃいけないお年頃に・・・。 前回の記事「Sublime Text 2 を使ってみよう（コーダー編）」が大変好評だったので、今回はそれに関連付けた記事とさせていただきますっ こちらの記事は、CSS はある程度書けるんだぜッ！という方を対象としています！ CSS をこれから勉強するつもりである方は、ある程度習得してからトライしてみてください！ 昔の恩師からよく言われていました・・・Step by Step です！ 目次 Sass の
LESSとSASSとRECESSとCompassとかを整理した | kanonjiのブログ
大元のCSSのメタ言語でよく名前が挙がってる2つが、LESSとSASSです。この2つの違いを知って、どのツールがどっち用なのかを見ればすっきり理解出来るはず。 CSSメタ言語の他にCSSプリプロセッサーと呼んだりもするらしいです。 http://lesscss.org/ JavaScript系でビルドするにはnodeを使います。SASSと比べるとCSSの書き方から外れない、シンプルな書き方、らしいです。 <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script> サーバー側でビルドしなくても、クライアントサイドでCSSに変換してそのまま適用する仕組みもあります。 http://sass-lang.com/ R
Sass、Compass、Rails 3.1 のアセット パイプライン (翻訳版) - Engine Yard Blog JP | Engine Yard Blog JP
本記事は英語版ブログで2011年11月3日に公開された記事の翻訳版です。 メモ:今回はダラス市所在の Pure Charity 社 CTO である Wynn Netherland 氏にゲスト投稿をお願いしました。氏は CSS に関する『Sass and Compass in Action (Sass と Compass の活用法)』の共著者であるほか、CSS ギークとしてだけでなく、ウェブ デザイナー兼フロントエンド開発者としても活躍されています。詳しくは GitHub や Twitter を参照してください。 TL;DR Compass と Rails 3.1 のアセット パイプラインをうまく連携させてスタイルシート アセットの作成、保守、提供を行う方法を改善できますが、スタイルシートの開発中にスピードアップを図るにはセットアップを調整する必要があります。 動的ウェブ ページが誕生して
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
rails4でcompass-railsを使う | iii ThreeTreesLight
rails4でcompass-railsを使う rails4でcompass-railsを使おうとすると、assets precompile時に以下のエラーが出て利用できない。 Unsupported rails environment for compass 対処法は以下の通り $ vim Gemfile gem 'compass-rails', github: "milgner/compass-rails", branch: "rails4" compassを利用して生成したsprite画像が反映されない場合 $ vim application.css.sass @import "layout/*.png"; @include all-layout-sprites; $ vim config/application.rb config.compass.images_dir = '/ap
W88 - Link Vào W88 Cá Cược Mới Nhất Tháng 1 9, 2026
🎁 Ưu đãi đặc biệt: Tặng ngay 200K miễn phí để trải nghiệm cá cược cho đăng ký mới trong tháng này. Vui lòng điền đúng số điện thoại khi đăng ký để được hỗ trợ nhận thưởng nhanh chóng. ⚠️ Cảnh báo: Hiện nay có nhiều trang web giả mạo nhà cái W88. Để đảm bảo an toàn, người chơi nên truy cập đúng link W88 chính thức được cung cấp tại W88. Quy trình đăng ký đúng tại W88 chính thức diễn ra như thế nào
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT
SassやCompassを使って、ズルいデザインテクニック：ズルいデザイン（2）（1/2 ページ） SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 1: ズルいグラデーション CSS3ではグラデーションを扱えるようになったことから、画像を使わずに自在にグラデーションを描画して、CSSだけでよりリッチなビジュアル表現が可能になりましたが、一口にグラデーションといっても、う
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
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.riaxdnp.jp/?p=4015
SSSSLIDE
Compassを使ってみる - Qiita
GitHub - Compass/compass-rails: compass rails integration
#334 Compass & CSS Sprites - RailsCasts
Hoki123 | Website Terpercaya Dengan Bonus Harian Dan Peluang Menang Gampang
Scout-App - Site has moved