Tag: Sass

タグ Sass がつけられた記事のリストです。

selector-replace() の利用

Sass の次期リリース、3.4.0 で使えるようになる selector-replace() 関数の利用例を考える。

MathSass v0.9.3

Sass の数学関数ライブラリ、MathSass をアップデート。Ruby gem 化され、SassMeister でもサポートされるようになった。

MathSass v0.9.1

Sass の数学関数ライブラリ、MathSass を少しアップデート。log() の追加、atan2() の修正など。

Ruby で Sass のカスタム関数を書く

Ruby による Sass のカスタム関数の書き方と使い方。例として escape() という文字列をエスケープする関数を書いてみました。

MathSass

CSS で角度を扱う機会が増えてきたので、三角関数を中心にいくつかの数学関数を Sass 関数として実装してみてる。GitHub に公開したので、math 好きな皆さんのご参加をお待ちしております。

NIR for Retina Images

擬似要素と content プロパティを利用した画像置換テクニックの NIR (Nash Image replacement) と、いわゆる Retina ディスプレイ向けの高解像度画像を組み合わせる方法について。CSS Transforms の scale() 関数を使う。

Sass のカスタム関数の書き方

Sass のカスタム関数をより共有や再利用のしやすいものにするためのパターンの模索。接頭辞、エラー処理、コメントなど。

小数の桁数と丸め方を制御する Sass 関数

Sass の数値で出力されるのは小数点以下 5 桁までで、6 桁めが四捨五入される。この小数点以下の桁数と丸めを制御する関数を作ってみた。

Sass のミックスインをローカルな名前で呼ぶ

Sass でライブラリをプロジェクトに組み込む場合など、ミックスインを「ローカル」な名前で呼ぶようにしておくと便利なことがある。

NIR ミックスイン

NIR (Nash Image Replacement) をわりとよく使うようになったので、最近は Sass のミックスインにしています。擬似要素なので Firefox 以外でアニメーションできないとかそもそもコンパイル結果のコードがうざいとかいろいろありますが、ちょっとしたアイコンやなんかにはやっぱり便利なのでけっこう重宝します。

@media と @extend

Sass で @extend を CSS の @media と絡めて使おうとすると、組み合わせによってはエラーや警告が出てしまうので注意が必要。@media と絡むところでは無理に @extend しようとせず、素の CSS に近い感じで書くのがいいのかもしれない。

最近試している Sass の書き方

Sass 3.2 の % セレクタと @extend を使って、スタイルの実装とそれらを利用するためのインターフェイスを分離する、みたいな書き方ができないかという模索。ご意見求む。

Sass の @extend はどこがすごいのか

この記事では Less & Sass Advent calendar 2011 の 16 日目として、Sass の @extend 機能について書いてみます。が、諸事情により締め切りを過ぎてからあわてて書いており、かなりとっ散らかったものになるであろうことをあらかじめお断りしておきます。

Sass の @import ルール

Sass の @import ルール は CSS ファイルだけではなく Sass ファイルもインポートできる。この機能は地味に見えるが、実際に使ってみるとものすごく便利。とくに、ミックスインをモジュールとしてファイルに分 […]

OOCSS の Spacing クラスのようなものを Sass で

「OOCSS (Object Oriented CSS) の Spacing クラス のようなもの」というのは、よくあるこういったやつです: /* p,m = padding,margin a,t,r,b,l,h,v = […]

Sass でもう一度 CSS を楽しく!

僕もようやく Sass をはじめました。評判どおり、ヤバいです。CSS を書くすべての人に習得してほしいとすら思います。とくに、最近 CSS を書いていてもつまらなかったり、設計に行き詰まりを感じたりしている人は、迷わず […]