SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集以前「効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単!」という記事で紹介したSass/SCSS。皆さん使ってますか?今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね! 目次Sass の基礎知識@mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定rem を使ったフォントサイズ指定レティナディスプレイ対応画像Compass について軽く。Sass
はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか? 2月のリア充イベントといえばバレンタインですね(企業戦略)。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ|便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてください。 SCSS/Compass CSS Sprite Media Queries 1,サンプルをキャプチャしてみ
はじめに 季節の変わりめで風邪をひいていませんか?僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ-・コーダー向け】すぐに使えるSCSS入門|基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins(関数)」「セレクタ継承」についてご紹介しました。 そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。 Compass - CSS オーサリングフレームワークとは compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。 compassを使うことで、Bender Prefix、CSS Spriteを自動
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く