SassとJSの設定ファイルを一元管理する！ | MONSTER DIVE
『CSSアニメーションが終わったら、JSでなにかしらの処理を走らせる』といった場合、CSSアニメーションのduration値とJSのsetTimeoutの値を合わせたりするわけですが、それって結局同じ値。 これに限らず、CSS/JS間で共通した値（アニメーション時間やプロパティ）を使うんだったら一元管理したいですよね。 そんなときは...そうだあれだ！ Gruntでやってしまいましょう！ grunt-shared-configを使う Gruntのモジュール 「grunt-shared-config」 を使います。 CSSプリプロセッサー（SassとかSCSSとかLESSとかStylus）とJSで共通で使えるconfigファイルを生成してくれるモジュールです。 grunt-shared-config Gruntを使うので、Grunt.jsとNode.jsが必須です。 詳しくはこちら↓ Gru
SassとBourbonでCSS3アニメーションを作る | MONSTER DIVE
CSS3 アニメーションを使ったWebサイトが増えてきました。サイトにちょっとしたアニメーションを付けるだけで、目を引くWebサイトになります。 今回は、SassとBourbonを使ってCSS3 アニメーションを作りたいと思います。 SassとBourbonを使うと、簡単にCSS3のアニメーションを作ることができるんです！ CSSのみでアニメーションを実装 例えば、opacityを0から1にするアニメーションを1秒で実行するアニメーションを作りたいと思います。 Sassを使わず、CSSのアニメーションを記述する場合は下記の通りです。 .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
