Read Article
Sass：数値を操作したいときに便利な演算や関数
Sassには生CSSでは使えない様々な機能が用意されていますが、今回はその中から数値を操作したいときに便利な演算機能や関数を紹介します。上手く利用することで自身で計算する手間を省くことができたり、例えば複数のカラムの幅指定などを簡単な記述で出力したりすることもできます。
Tag : Sass
- 12 Articles -
Read Article
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法
ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。また、大体この手のアニメーションを利用する際はサイト全体で動きを統一させることが多いのですが、たまに場所によって少し違いをつけたいということもあるので、そういったときにすぐ対応できるようにSassのmixinを用いて実装…
Read Article
Sassに関するリソースがまとめられた「Sassisfaction」
「Sassisfaction」はSassに関連するリソースがまとめられたリンク集で、Sassを用いたライブラリ・スニペット・ガイドライン・リファレンスなどがまとめられています。
Read Article
Sass：eachやforを使って繰り返し記述する手間を省く
Sassには`@each`や`@for`といった制御構文があり、それらを利用することでCSSで繰り返し記述していたような手間を省くことができます。そこで今回は基本的なものでありますが、その制御構文を使って繰り返し記述するようなものを楽に出力するサンプルをいくつか紹介します。
Read Article
Sass：cubic-bezierを使った各種イージングの変数化にマップを用いる方法
少し前にSassで`cubic-bezier`を使った各種イージングを変数化しておいて楽に指定できるようにする方法を備忘録として書いたのですが、マップを用いた使用方法を見かけたのでそちらの方法も備忘録兼ねて紹介します。
Read Article
Sass：連番付きid・classをゼロパディング（ゼロ埋め）で出力する方法
Sassを利用してて連番付きのidまたはclassを一気に出力したいときに、`item1`, `item2`, `item3` ... のように単純に1から始まる連番をつけて出力するのではなく、`item01`, `item02`, `item03` ... のようなゼロパディング（ゼロ埋め）な連番で出力させる方法です。
Read Article
Sass：cubic-bezierを使った各種イージングを変数化しておき、簡単に指定できるようにする備忘録
CSSでイージングを使用する際、`ease`や`linear`の場合はそのままその名前を値に記述すればいいですが、例えば`easeOutCubic`や`easeOutExpo`といったイージングを使用したいときは`cubic-bezier`を用いて記述する必要があります。ただ、それぞれどのような数値になるかいちいち覚えておくのは面倒なのと単純にイージング名で使用できたらいいなと思ったので変数化して…
Read Article
Sass(SCSS)のmixinを使って、Media Queries（メディアクエリ）を使いやすくするスニペット
ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries（メディアクエリ）を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3つ紹介します。
Read Article
Sass(SCSS) mixin Snippets
普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。特にこれまでSassやmixinをあまり…
Read Article
Sass(SCSS)のマップを利用したカラーコード管理
Sass(SCSS)でのカラーコード管理方法のひとつとして、マップを用いたら良さそうと思いやってみたものです。もっと便利な感じにできそうですし、そこまで使いやすいと感じたわけでもないですが、そのまま消すのもあれだったので備忘録として残しておこうと思います。
Read Article
Brackets Snippets (by edc)を使って、Sassの＆（アンパサンド）をより楽に記述する方法
Sassといえばネスト・extend・mixinなど、効率的にCSSを記述することができる機能が多数あります。その中のひとつに親セレクタの参照や疑似クラスを指定するために使用する機会も多いと思う&（アンパサンド）というものがありますが、これをBracketsのエクステンションと組み合わせて疑似クラス指定をより楽に記述していく方法を紹介します。
Read Article
Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」
便利だと思ったので備忘録兼ねてご紹介。CSSでn番目の要素に適用したい時などに利用する`:nth-child`疑似クラスや`:nth-last-child`疑似クラスですが、先頭（または最後）からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考える（悩む）ことがあると思います。「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはS…