「Sass/Compass」カテゴリー一覧

Compassのimport-onceでエラー。コンパイル時に「No such file or directory」が出る場合の解決方法

Compassのコンパイル速度を向上させる効果のあるimport-onceですが、とある状況下(自分のOSはWindows 7やWindows 10)でコンパイルをすると以下の様なエラーを吐き出します。 [crayon-588633dc05f7c0739785…

続きを読む

これはスマート!z-indexをSassで管理する方法に感動しました

positionプロパティで配置した要素の重なり順を指定するz-index。値が大きいほど前面に表示されるアレです。 使うだけなら簡単なのですが、いざz-indexの指定箇所が増えてくると「どの要素より上なのか下なのか」「z-indexプロパティが散り散りにな…

続きを読む

フォントサイズのrem指定をCompassのMixinと関数で行う

クリスマスイブまで4日なのに今からアドベントカレンダーをやるとかちょっと意味が分からない宣言ですが、せっかくなので「アドベントカレンダーやってるよ!」という雰囲気を出すためブログを連日更新してみます。(なんか技術者っぽいし!) というわけで今回はSassに関わ…

続きを読む

ボタン実装のSassライブラリ「Buttons」で色の追加やサイズの変更をする

ボタンを簡単に実装できるライブラリ「Buttons」で色の追加やボタンサイズを変更する方法について。(Sassのみです) 色の追加やボタンサイズの変更は変数設定でできます。(Buttonsの設定ファイルは「scss/partials」フォルダの中にある_opt…

続きを読む

CompassのVertical Rhythmがrem単位に対応していたので、軽い使い方について

Vertical Rhythmを実装する機能は元々Compassにあったのですが、rem単位への対応がイマイチでした。 rem単位はIE8以下には対応できず、同時にpx指定も必要なのですが、CompassのVertical Rhythm機能にそれらしいものは無…

続きを読む

Susyを使おうとしたらNo such framework: “susy”のエラー

レスポンシブグリッドレイアウトが組めるSass/Compassベースのフレームワーク「Susy」を使おうとしたところ「No such framework: “susy”」というエラーが発生。Susyプロジェクトを作成するコマンドを打つと…

続きを読む

Compassのsingle-text-shadowに引数を渡すときの使い方。公式リファレンスの方法では使えない?

SASSと、そのフレームワークであるCompassを使ってテキストに影を付けようとしたときの話です。 テキストに影を付けたい場合、Compassが提供しているmixin「single-text-shadow」を使えばチョチョイのチョイだと思っていたのですが、公…

続きを読む

PhpStormでSCSS(SASS)ファイルをCompassでコンパイルする方法とMacの場合の注意点

MacでPhpStormを使っていて、CompassでSCSSファイルをコンパイルしようとしたらエラーが起きたので、その回避策の次いで使い方も一緒に書いておくことにしました。(WebStormも同様です) 以下の2つが既に行われていること前提で話を進めます。 …

続きを読む

【Sass】4つの値を指定するだけでストライプ柄(縞模様)を実装するmixin

CSSでストライプ柄(縞模様)を実現させる方法を見つけたので、それをmixinにしてみました。 ストライプ柄のタイプ(斜め、横、円など) 色1 色2 線の太さ の4つの値を指定するだけで背景をストライプ柄にデザイン出来ます。  ストライプ柄のサンプル Chro…

続きを読む

SASSファイルをWindowsコマンドプロンプトから文字化けさせずにコンパイルする方法

SASSファイルをWindowsコマンドプロンプトからコンパイルすると、僕の環境では主に日本語が文字化けします。 SASSファイルから生成したCSSファイルを直接弄るワケでもないので特に問題は無いと思っていたのですが、CSSのプロパティ「content」で特殊…

続きを読む