自分なりのSASSの使い方(mixin、extendなど)をメモってみた - NEZU.log
NAVERさんとかだと、mixinファイルをさらに細かく分割してるみたいですが、 そこまでライブラリを多彩にしていないのでとりあえず一つで事足りてます。 利用したいscssファイルに「@import」で記述することで、読み込みできます。 自分の場合は「_import.scss」にimportの記述をまとめておき、各scssファイルには以下のように記述しています。 @import '_import'; こうすることで、あとで@importするファイルが増減しても一括で対応できるようにしています。 まあこのあたりはcssの通常のimportと同じ管理方法です。 機能の使い分け スコープのネストと参照 .hoge { a { color: #00f; &:hover { text-decoration: underline; } } } //展開時 .hoge a { color: #00f;
[Sass]泣くほど早い…コピペで今すぐ使える便利なmixinまとめ | Cappee Design
あとで読みたい人は… こんにちは、@cappeeです。 本格的にSass(SCSS)を仕事で使うようになってから早半年。 色々と試行錯誤しながら効率的にコーディングできるように工夫してきましたが、やっとこさある程度カタチになってきました。 これからSassを導入するというデザイナーさんもいるかと思うので、コピペで今すぐ使える便利なmixinをまとめて公開したいと思います。 泣くほどコーディングが早くなりますよ。 目次1. フォントサイズ2. テキストシャドウ2.1. 文字に1pxの黒いシャドウ2.2. 文字に1pxの白いシャドウ3. ポジション4. グラデーション4.1. 上下に明→暗4.2. 上下に暗→明4.3. IE8～9に対応する4.4. IE9に対応する5. 背景画像5.1. CSS Spriteの設定5.1.1. 文字の背景に入れる画像と文字を置換する画像5.1.2. アイコンな
![[Sass]泣くほど早い…コピペで今すぐ使える便利なmixinまとめ | Cappee Design](https://cdn-ak-scissors.b.st-hatena.com/image/square/e12901867bd44e22fee4be18b97fee940f375d69/height=288;version=1;width=512/http%3A%2F%2Fs.wordpress.com%2Fmshots%2Fv1%2Fhttp%253A%252F%252Fsass-lang.com%252F%3Fw%3D690)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
