TAG : Compass

htmlcss Compass のベンダープレフィックス

2016年5月22日

目次 久しぶりに Compass を 1.0.3 (Polaris) にアップデートしたら、コンパイル時に以下のような警告がコマンドプロンプトに表示されるようになりました。 C:\xampp\htdocs\compass>compass w >>> Compass is watching for changes. Press Ctrl-C to Stop. modified sass/_setting.scss WARNING: Compass has changed how browser support is configur…

続きを読む

htmlcss CSS3 アニメーションについてのメモ

2014年4月3日

CSS3 アニメーションに関する個人的なメモ。 CSS3でアニメーションを実装する方法は以下の2種類がある。 transition プロパティでの定義 animation プロパティでの定義 Transition 始点終点の2点間のアニメーション機能を提供 (始点から終点までの2点間のアニメーションしか行えない:設定がシンプル) 設定時間の中でアニメーション中の変化を自動的に設定し、終了後に自動で逆のアニメーションで元に戻る(hover で動かすロールオーバーなどが簡単に設定できる) ループの設定不可 Animation 設定時間の中で開始・終了するタイ…

続きを読む

htmlcss Compass/SASS を使ったミックスインの作成

2014年3月30日

@IT に掲載されていた Compass/SASS を使ったミックスインの作成方法の記事をもとに、個人的に使いそうなことをカスタマイズしたりした際のメモ。 Sass と Compass がインストールされていることが前提。Compass を使用しないものもあるが、「@import “compass”;」が記述してあることが必要。インストールや設定に関しては「Sass/Compass のインストールと基本的な環境設定」を参照。 サンプル ボックスシャドウを利用したミックスイン 背景に彫り込まれたように見える線 border とそれに…

続きを読む

htmlcss Compass/SASS を使ったアニメーションのミックスイン

2014年3月27日

アニメーションのミックスインを探していたら見つけた Compass/SASS を使ったアニメーションのミックスインに関するメモ。 Compass/SASS は最近始めたばかりなのでこの方法が正しいかは不明だが一応やりたいことはできているみたい。 追記 Sass 記法で書かれているものとは別に Scss でかかれているもの(animate.scss)も見つかったので追加。(2014年3月31日) Animate Mixin for Compass/SASS 以下のサイト上部の「Download」のところの「_animate.sass」をクリックするとコード…

続きを読む

htmlcss Compass のミックスイン

2014年3月27日

Compass のミックスインに関するメモ。インストールや設定に関しては「 Sass/Compass のインストールと基本的な環境設定」に記載。 目次 CSS3 モジュール CSS3 モジュールは、ベンダープレフィックスや、ブラウザの下位バージョンに対応するプロパティを書き出してくれる。 関連項目 ベンダープレフィックスのオン・オフ レガシーブラウザの対応のオン・オフ border-radius() 角丸 Compass/border-radius 書式: border-radius($radius) $radius(角丸の半径):値を指定しない場合は、…

続きを読む

htmlcss Sass/Compass のインストールと基本的な環境設定

2014年3月4日

Windows 環境での Sass と Compass のインストールと基本的な環境設定に関するメモ。 Ruby のインストール Sass には Ruby が必要なので Ruby がインストールされているかどうかをコマンドプロンプトで確認する。 上記コマンドで Ruby のバージョンが表示されれば、Ruby はインストール済み。 インストールされていない場合は、Ruby の公式サイトのダウンロードページ(https://www.ruby-lang.org/ja/downloads/)の下のほうにある「Windows版Rubyバイナリ」からリンクを選択して…

続きを読む

htmlcss Prepros で Compass を使ってみる

2013年8月16日

Prepros をインストールして Compass を使った際のメモ。 config.rb の設定が反映されない? 追加情報 2013年8月31日 Version 3.0.0 で config.rb の設定が反映されるようになりました。 昨日 Prepros を起動したところ画面上部に「贈り物」のようなオレンジ色のアイコンが表示されていたのでクリックすると、最新バージョンへのアップデート(アップグレード)のお知らせでした。Version 3.0.0 をダウンロードして解凍し、Version 2.3.2 と同じ場所にインストールすると、自動的に Versi…

続きを読む