Sass

[Sass] SassError: There is no module with the namespace “math”.

by

しばらくLessやらCSS-in-JSに浮気してたワイ、久しぶりにSassを使ったらWARNINGまみれになってびっくりした。

昔から、Sassで / （スラッシュ）使うと、割り算なのか区切りなのかぱっと見判別できなくてややこしいなあと思ってたんだけど、中の人もそう思ってたようだ。とうとう割り算としての利用が廃止になるらしい。
Dart Sass v1.33以上で未対応のSASS/SCSSをビルドすると表題の警告が嵐のように流れる様を見ることができる。

Breaking Change: Slash as Division

公式ブログでも【破壊的変化】と銘打ってるけど、流れるWARNINGの量でお察し案件だった。
ちょっと使おうと思って入れたUIライブラリが未対応だったりしてたので、直近メンテされてないものを使う時は注意した方がいいと思った。

続きを読む

[WP] Underscoresでカスタムテーマを作る：Bootstrap(Sass)導入編

by

Underscores で魔改造したメモその３。
Sass版のBootstrapをBowerでインストールして部分的にimportして使ってみる。

  • Compass導入編
  • ナビゲーションメニュー改造編
  • Bootstrap(Sass)導入編 ←今ここ

Bootstrapはデザインが出来なくても眉目麗しいスタイルになる上に、
あるあるなUIのJavascriptまでついてくるのがいい所だと思う。
しかも以前はLessのしかなかったけど今はSassのもあるんだ。

続きを読む

[Sass] @extend の挙動

by

classとplaceholder selecterについてそれぞれ@extendを試みた以下のSCSSをコンパイルする。 %ext { color:red; &::before { content: ‘ext’; } … 続きを読む

9日目:CSS Preprocessor Advent Calendar 2012

by

CSS Preprocessor Advent Calendar 2012の9日目です。

今年の8月にSassの神バージョンアップがあった勢いでレポートを書いたんです。
社内にSass使い増えるといいなーと思って書いてはみたものの、とにかく使い勝手が悪い。
長文過ぎて見づらかったのでカッとなってWebサイト化しました。

Sassオレオレリファレンス

加筆し過ぎて序盤しか出来てないんですが、後は追々書いていくつもりです。

明日はTakatsudoさんです！

続きを読む

[Compass] 超訳 Configuration Reference

by

CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。

Compassの設定ファイルはRubyファイルです。
これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。
それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました！

※この記事は完全な和訳ではありません。

公式 Configuration Reference

続きを読む

[Sass] Compass CSS3-animations snipets & mixin

by

CompassのCSS3モジュールでは
transitionsのmixinがあるのにanimationsはないので
-mozとかのプレフィックスが欲しい時にはexperimentalを使うしか無い感じ。


@include experimental(animation-name, sample); //アニメーション名
@include experimental(animation-duration, 1s); //実行時間
@include experimental(animation-iteration-count, 1); //実行回数(number | infinite)
@include experimental(animation-direction, normal); //反復の有無(normal | alternate)
@include experimental(animation-delay, 0s); //実行までの待ち時間
@include experimental(animation-fill-mode, both);//実行前や実行後のスタイル指定(none | forwards | backwards | both)
@include experimental(animation-timing-function, linear);//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
@include experimental(animation-play-state, running); //実行状態(running | paused) *削除検討中のプロパティ

transformを参考にまとめたmixin


//再生時間
$default-animation-duration       : 0.5s !default;     

//実行までの待ち時間
$default-animation-delay          : 0    !default;

//実行回数(number | infinite)
$default-animation-iteration-count: 1    !default;

//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
$default-animation-timing-function: ease !default;

//反復の有無(normal | alternate)
$default-animation-direction: normal     !default;

//実行前や実行後のスタイル指定(none | forwards | backwards | both) 
$default-animation-fill-mode: both       !default;

@mixin animation (
  $name     :false, 
  $duration :$default-animation-duration,
  $delay    :$default-animation-delay,
  $count    :$default-animation-count,
  $function :$default-animation-timing-function,
  $direction:$default-animation-direction,
  $fillMode :$default-animation-fill-mode
){
    @if $name {
       @include experimental(animation-name,            $name);
    }
    @include experimental(animation-duration,        $duration);
    @include experimental(animation-delay,           $delay);
    @include experimental(animation-iteration-count, $count); //実行回数(number | infinite)
    @include experimental(animation-timing-function, $function);
    @include experimental(animation-direction,       $direction); //反復の有無(normal | alternate)
    @include experimental(animation-fill-mode,       $fillMode);//実行前や実行後のスタイル指定(none | forwards | backwards | both) 
}

続きを読む