【Compass】Sassでレスポンシブ対応！簡単で便利な記述法！ | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.04.08 こんにちわ！ 山尾です！ 今日は前回に引き続きSassのご紹介をしたいと思います！ 前回は環境構築とざくっとした概要を説明させていただいたので今回はSassで出来る便利な記述法を紹介します！ 目次 Compass メディアクエリ ファイルの統合 Compassを使う Compassを使う一番の利点としてはベンダープレフィックスを簡単に書ける事ですね。 他にもCSSスプライトを自動で生成してくれるみたいです。 Compassインストールしインポートさせれば .test{ @include box-shadow( 0 0 10px #ccc); @include border-radius(4px, 4px); @include inline-block; } コンパイル後↓ .test { -webkit-box-shadow: 0 0 10px #cccccc; -m
ChromeのDeveloper ToolsでSassのデバッグ - Qiita
ChromeのDeveloper Toolsでスタイルシートのデバッグをするときに、コンパイル後のCSSファイルでなくSassのファイルの場所を表示するようにする。 CSSソースマップを使うわけだが、古い情報が多かったので今さらながらメモ。Compassを使用している想定。 環境 OSX 10.9.5 Google Chrome 42 Sass 3.4.13 Compass 1.0.3 sourcemapの生成 Sassのコンパイル時にsourcemapを生成させる。 config.rbにsourcemap = trueを追加するだけ。 sass_options = {:sourcemap => true}とかsass_options = {:debug_info => true}は不要。 環境設定によって振り分けて、以下のように編集する。
Compass のミックスイン | Web Design Leaves
CSS3 モジュール CSS3 モジュールは、ベンダープレフィックスや、ブラウザの下位バージョンに対応するプロパティを書き出してくれる。 関連項目 ベンダープレフィックスのオン・オフ レガシーブラウザの対応のオン・オフ border-radius() 角丸 Compass/border-radius 書式： border-radius($radius) $radius（角丸の半径）：値を指定しない場合は、デフォルトの 5px になる（ $default-border-radius: 5px ） 値が１つ：一括指定 値が２つ： 左上と右下 右上と左下 値が３つ： 左上 右上と左下 右下 値が４つ： 左上 右上 右下 左下 //一括指定 .simple { @include border-radius(10px); } // 左上と右下 右上と左下 .compound { @include b
Background Gradients | Compass Documentation
<div class='ex'> <div class='gradient-example'></div> <p> This box has no gradients </p> </div> <div class='ex'> <div class='gradient-example' id='radial-gradient'></div> <p> This will yield a radial gradient with an apparent specular highlight </p> </div> <div class='ex'> <div class='gradient-example' id='linear-gradient'></div> <p> This yields a linear gradient spanning from $start to $end coord
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
