Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。Read less
今日から使える！ Sass/compass ゆるめ勉強会
Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。Read less
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas
PhpStormでCompassを使う | mawatari.jp
思いの外、前回の記事（PhpStormでSass/SCSSを使う）が好評だったので、PhpStormでCompassを使う方法もメモしておきます。Sassを使うのであれば、Compassも使いたいですものね！ WebStormや、その他JetBrains製のIDEでも同様の手順で行けると思いますが、確認はしていません。 Sass/SCSS, Compassに関する解説や、環境構築については、LIGさんの記事にまとめられているので、参考にしてみてください。 CSSの常識が変わる！「Compass」、基礎から応用まで！ – 株式会社LIG 環境 環境は以下の通りです。前回までと変わりありません。Rubyに関しては、今回も、Macに初めから入っているものを使いました。（最新版にアップデートした上で利用するのが望ましいと思います。） ソフトウェア バージョン
[CSS] CompassでCSSスプライト対応、Retina対応を行う。Web上にあるMixinは自分の要件に合わずだったので、作りました。 - YoheiM .NET
[CSS] CompassでCSSスプライト対応、Retina対応を行う。Web上にあるMixinは自分の要件に合わずだったので、作りました。 こんにちは、@yoheiMuneです。 今日はCompassを使った簡単CSSスプライト画像＋CSSクラスの生成と、Retina対応する方法をブログに書きたいと思います。 Compassは、自動でCSSスプライトを作成できて便利 最近のお仕事で、フロントエンドのパフォーマンス改善を行うことがありますが、その改善点の中で画像をスプライト化して、リクエスト数を減らすという対策を行います。 スプライト画像そのものを作るのも面倒だし、そのスプライト画像を使ったCSSを書くのもかなり面倒。 その面倒な作業を全て自動かしてくれる機能がCompassにあります。その機能を紹介したい＆カスタマイズしてより使いやすくしたいというのが今回のブログの意図です。 Web上
![[CSS] CompassでCSSスプライト対応、Retina対応を行う。Web上にあるMixinは自分の要件に合わずだったので、作りました。 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/5cb5a581103481c8de3499cf65fa66070868173e/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F265.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/debiru/items/28d54b5c1e295d880cd3