[B! mixin][sass] tomomi1122のブックマーク

tomomi1122 id:tomomi1122

mixinとsassに関するtomomi1122のブックマーク (3)

Sassにおける@extendと@mixinの違いとその使い分け - ぽんぽこ開発日記
Sassは非常に便利なのは重々承知です。その恩恵はありがたくいただいております。ただ個人的にはSassが優秀すぎてどこまで効率的にできるのかいまいちわかっていない部分があります。そんなわけで今回は@extendと@mixinの違いについて整理をば。 @extendの特徴＠extendが行なってくれることを一言で表すと「継承」です。つまり受け継ぐわけなんです。なにを言っているのかわからない！って僕も最初思ったので実際にコードにしてみました。 [HTML] <div class="box1">コメント表示エリア(高さ250px)</div> <div class="box2">コメント表示エリア(高さ300px)</div> [Sass] .box-base{ float: left; width: 200px; height: 200px; border:1px solid #aaa; b
tomomi1122 2015/04/09
mixin

extend

sass
リンク
[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ
15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） column-width（カラム幅） circle（円形） font-size（フォントサイズ） box-shadow（ボックスシャドウ） xPos（要素の座標） vertical-align（天地の中央に配置） flexbox（フレックスボックス） flex（モダンブラウザの旧仕様にも対応したflexの指定） flex-order（表示の順番） flex-direction（表示の方向） gra
tomomi1122 2014/11/18
sass

mixin

まとめ
リンク
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！目次 Sassの基礎知識 @mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定 rem を使ったフォントサイズ指定レティナディスプレイ対応画像 Compassについて軽く。 Sas
tomomi1122 2014/05/20
sass

mixin

snippet
リンク
1