NxWorld

Tag : Sass

- 12 Articles -

CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法

Read Article

CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法

ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。また、大体この手のアニメーションを利用する際はサイト全体で動きを統一させることが多いのですが、たまに場所によって少し違いをつけたいということもあるので、そういったときにすぐ対応できるようにSassのmixinを用いて実装…

  • Tips
Sass：cubic-bezierを使った各種イージングを変数化しておき、簡単に指定できるようにする備忘録

Read Article

Sass：cubic-bezierを使った各種イージングを変数化しておき、簡単に指定できるようにする備忘録

CSSでイージングを使用する際、`ease`や`linear`の場合はそのままその名前を値に記述すればいいですが、例えば`easeOutCubic`や`easeOutExpo`といったイージングを使用したいときは`cubic-bezier`を用いて記述する必要があります。ただ、それぞれどのような数値になるかいちいち覚えておくのは面倒なのと単純にイージング名で使用できたらいいなと思ったので変数化して…

  • Tips
Sass(SCSS)のmixinを使って、Media Queries（メディアクエリ）を使いやすくするスニペット

Read Article

Sass(SCSS)のmixinを使って、Media Queries（メディアクエリ）を使いやすくするスニペット

ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries（メディアクエリ）を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3つ紹介します。

  • Tips
Sass(SCSS) mixin Snippets

Read Article

Sass(SCSS) mixin Snippets

普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。特にこれまでSassやmixinをあまり…

  • Tips
Brackets Snippets (by edc)を使って、Sassの＆（アンパサンド）をより楽に記述する方法

Read Article

Brackets Snippets (by edc)を使って、Sassの＆（アンパサンド）をより楽に記述する方法

Sassといえばネスト・extend・mixinなど、効率的にCSSを記述することができる機能が多数あります。その中のひとつに親セレクタの参照や疑似クラスを指定するために使用する機会も多いと思う&（アンパサンド）というものがありますが、これをBracketsのエクステンションと組み合わせて疑似クラス指定をより楽に記述していく方法を紹介します。

  • Services & Resource
Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」

Read Article

Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」

便利だと思ったので備忘録兼ねてご紹介。CSSでn番目の要素に適用したい時などに利用する`:nth-child`疑似クラスや`:nth-last-child`疑似クラスですが、先頭（または最後）からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考える（悩む）ことがあると思います。「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはS…

  • Tips

Close the search window,
please press close button or esc key.