Sass(SCSS) mixin Snippets - NxWorld
普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。 特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。 特にこれまでSassやmixinをあまり使ってこなかったという人は、全体的に紹介しているものは内容もシンプルですし、そのまま試しに使ってみるだけでなく自分好みにカスタマイズしたりもしてみてください。 以下で紹介しているものは、それぞれ「mixin」はmixinコード、「usage」はmixin使用時のサンプルコード、「output」はコンパイル後のコードとなります。 プレフィックスに関する記述に関してはAutoprefixerなどを
SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する
SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する SASS/SCSSには様々なカラーコントロール機能がありまして、この機能を利用すればカラーバリエーションの作成やカラー修正など効率的に行うことができますよ。 投稿日2013年06月27日 更新日2013年06月28日 共通のSCSSファイルを作成する カラー設定は他のSCSSファイルから共通して使用すると効率が良いです。 なのでカラー設定用のSCSSファイルを最初に作成します。 共通の変数は「_variables.scss」というファイル名にします。 「_」で始まるファイルはコンパイルされません。 _variables.scss $base-color: #536A97; とりあえず「$baseColor」という変数を一つ作成しました。 変数を使用する さきほどカラー設定した変数を使用してみましょう。 base
社内Sass勉強会を開催しました
こんにちは、クレイの亀井です。もうすっかり秋ですね！コンビニやケーキ屋さんに芋栗南瓜のスイーツがもりだくさんでテンション上がりっぱなしです さて本題に入ります。先日9月30日にクレイ社内で Sass 勉強会を開催し、CSS 設計について発表しました。そのことについて今回はブログに書こうと思います。 開催することになった経緯 数ヶ月前から社員のキャリアアップのため、『クレイ社員補完計画』が開始しました。週に4時間まで自分の好きなことを勉強する時間をとれ、2ヶ月に一度ブログや勉強会などの場で成果を発表します。 私ははじめ別のテーマにしていたのですが、いまいちモチベーションが上がらず、相談した結果 Sass をテーマに勉強会を開催することになりました。 社会人になってから2年半、スライドを制作して発表をするという経験がなかったのですが、いつか外部の勉強会で LT などしてみたいと思っていたためい
PostCSSとcssnextで最新CSS仕様を先取り！
どうも、Kaizen Platform, Inc.の@t32kです。今日はPostCSSについて解説しようと思います。PostCSSについてはそれを解説した同僚のスライドも素晴らしいので、そちらも参考にしてもらえば幸いです。 PostCSS とは何か // Speaker Deck PostCSSとはなにか？ PostCSSは、Autoprefixerの作者でも有名なロシアのAndrey Sitnik氏が開発しているツールです。 postcss/postcss 公式のレポジトリのREADMEには以下のように書かれています。 PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax,
もっとSassろう！慣れてきたら使いたいワンランク上のコーディング方法4選
同じレイアウトのスタイルで、一部の色やアイコンだけを変えたい、というときに便利です( ˇωˇ ) 使用方法 html <section id="nav"> <ul> <li class="nav_home"><a href="#">HOME</a></li> <li class="nav_about"><a href="#">ABOUT</a></li> <li class="nav_company"><a href="#">COMPANY</a></li> <li class="nav_contact"><a href="#">CONTACT</a></li> </ul> </section> <!-- / #nav --> 以前、$colorsに直接色コードを配置しておりましたが、あらかじめ変数を定義しておくと、のちの管理がしやすくなります�( ˇωˇ ) /* ===========
フォントサイズの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を使って
Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作） | DevelopersIO
皆さんお久しぶりです。 最近サイトの高速化で忙しく、 ブログの執筆をサボっていました、ごめんなさい。 ブログのテンプレートリニューアルも無事に終わり、そろそろ得た知識をアウトプットしていこうと思います。 最近HTML（5）を利用したWebサイトもレスポンシブやCSS3、Retinaディスプレイ対応でどんどん複雑になってきています。ですが、未だ標準化されていないCSS3でさえ市場の要求に応えるには未熟に思えます。 そこで登場するのがSassやLESSなどのCSS拡張メタ言語です、キリッ（巷で知っている方にとっては今さら感たっぷり）。 今回は第一弾としてSass（SCSS）とCompassについて紹介しつつ、Media Queries（前に書いたMedia Queriesに関する記事）の実装を少し楽にしてくれる自作Mixinを紹介します。なぜSassにしたかは「Sass LESS 比較」と検索
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]親セレクタの参照ができる&(アンパサンド)の使い方 | Cappee Design
わんこそば、@cappeeです。ついにSassの本ができましたね。 「Web制作者のためのSassの教科書」かなり参考になりました。 Web制作者のためのSassの教科書 posted with カエレバ 平澤 隆,森田 壮 インプレスジャパン 2013-09-13 Amazon 楽天市場 ちゃんと基本から勉強しないとダメですね(>_<) 今日は以外と使いこなせていなかった&(アンパサンド)についてです。 &(アンパサンド)とは 親セレクタの参照ができます。 擬似セレクタやセレクタの前に記述する これは私もよく使っていてコードの階層がとてもわかりやすくなるので便利ですよね。 Sass(SCSS) .link{ text-decoration:none; &:hover{ text-decoration:underline; } &.off{ color:gray; } }
[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)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bulma: Free, open source, and modern CSS framework based on Flexbox
Rin 5 - A lean HTML & SASS boilerplate by sanographix
Bourbon - A Lightweight Sass Tool Set
kanapple.net - KANAPPLE.NET
Sassの @import | Web制作者のためのSassの教科書 - 公式サポートサイト
GitHub - funteractive/foundation-start-kit
