Sass(SCSS) mixin Snippets - NxWorld
普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。 特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。 特にこれまでSassやmixinをあまり使ってこなかったという人は、全体的に紹介しているものは内容もシンプルですし、そのまま試しに使ってみるだけでなく自分好みにカスタマイズしたりもしてみてください。 以下で紹介しているものは、それぞれ「mixin」はmixinコード、「usage」はmixin使用時のサンプルコード、「output」はコンパイル後のコードとなります。 プレフィックスに関する記述に関してはAutoprefixerなどを
フォントサイズのrem指定をCompassのMixinと関数で行う
フォントサイズのrem指定をCompassのMixinと関数で行う 更新日: 2019/10/18 公開日: 2014/12/21カテゴリー: CSS フォントサイズのrem指定をCompassの関数で行う（remとフォントサイズに関してはこちらの記事『SCSSで古いIEなどにもrem感覚でフォントを指定する方法 | NeGiMeMo.net』が参考になると思います） 少し前（？）から情報が出てきたフォントサイズをrem単位で指定する方法ですが、CSSの書き方はこんな感じですよね。 html { font-size: 62.5%; //ベースとなるフォントサイズを10pxに指定 } p { font-size: 14px; font-size: 1.4rem; }古いブラウザはrem単位に対応していないので、px値も書く必要があります（フォールバック）。それで、このCSSをSassを使って
Useful Sass Snippets | Hmphry
Table of Contents Article Info Article No. 5 May 8, 2015 One thing I absolutely love about Sass is the mixins and functions. Being able to automate many of the repetitive coding for CSS is both amazing in building and maintaining a base. But I often find many developers creating complex systems for simple tasks, such as managing a font stack or color scheme. These can be tedious to set up and empl
Extending In Sass Without Creating A Mess — Smashing Magazine
The target simple selector is identified as .descendant.Two constraints are formed:.bar (and whatever extends it) must have the class .foo to be green,.descendant must be a descendant of .ancestor.Using this information, the @extend directive produces this ruleset: .foo.bar, .ancestor .foo.descendant { color: green; } The target selector .descendant now fulfills the constraint requirements: It has
[Sass(SCSS)+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開！ | Cappee Design
残暑お見舞い申し上げます、@cappeeです。 おひさしブリーフ。 さて、以前「Sublime Text 2 + Sass + Compass + Emmet 最強説！導入方法と自動アップロードの設定まとめ」という記事を書かせていただきました。 実際にサイト制作に導入して四苦八苦しながらどうやったら効率的にスマートなコーディングができるか、2ヶ月いじってやっとこさ納品しました。 そこで今回は、私なりに効率化するために記述したmixin、変数、CSSスプライトなど便利な指定方法を惜しげもなく公開したいと思います。（大げさ） サイトやデザインによって記述すべき指定は異なるかと思いますので、参考にでもしていただけたらなと思います。 最初の記述 文字コード まずはSass(SCSS)ファイルの最初に文字コードを指定します。 @charset "utf-8"; Compass Compassを使う場
[決定版]Retina対応したスプライト画像のmixin | Cappee Design
こんにちは、@cappeeです。関東も大雪でしたね(・∀・) 現在がりがりっとスマートフォンサイトのコーディングに勤しんでいます。 以前Sass+Compassを使った泣くほど早いmixin集を公開しましたが、スマホだとRetina対応があるためSprite画像を使ったmixinは変更する必要があります。 色々とRetina対応したmixinの記事を拝見させていただきましたが、background-sizeを毎回手動で入力する必要があったりと以外と「これだっ！」と思うmixinがなく。。 Compassの公式サイトや色んな角度から検索して参考にした結果、個人的には「これが決定版だ！」と思えるmixinができました！！！ CSS Spriteの設定 ※こちらはCompassのスプライト初心者向けですのでわかる方はスルーしてください！ スプライト画像を使ったCSSの指定には主に以下の3つがある
![[決定版]Retina対応したスプライト画像のmixin | Cappee Design](https://cdn-ak-scissors.b.st-hatena.com/image/square/915b2cc951b69e1769ed9ae12fc1c49517798539/height=288;version=1;width=512/http%3A%2F%2Fs.wordpress.com%2Fmshots%2Fv1%2Fhttp%253A%252F%252Fcompass-style.org%252F%3Fw%3D500)
[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
![[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/41a2e814247663ad1040b747f3c634ccd698a028/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111701.png)
[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)
Some Mini Sass Mixins I Like by Chris Coyier on CodePen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View. There is one block of CSS that I find myself writing all the time. It's this: position: absolute; top: 0; left: 0; width: 100%; height: 100%; The o
DRY-ing Out Your Sass Mixins
One of the most powerful features of the CSS preprocessor Sass is the mixin, an abstraction of a common pattern into a semantic and reusable chunk. Think of taking the styles for a button and, instead of needing to remember what all of the properties are, having a selector include the styles for the button instead. The button styles are maintained in a single place, making them easy to update and
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
Bourbon - A Lightweight Sass Tool Set