TAG : Sass

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

2014年4月3日

CSS3 アニメーションに関する個人的なメモ。 CSS3でアニメーションを実装する方法は以下の2種類がある。 transition プロパティでの定義 animation プロパティでの定義 Transition 始点終点の2点間のアニメーション機能を提供 (始点から終点までの2点間のアニメーションしか行えない:設定がシンプル) 設定時間の中でアニメーション…

続きを読む

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

2014年3月30日

@IT に掲載されていた Compass/SASS を使ったミックスインの作成方法の記事をもとに、個人的に使いそうなことをカスタマイズしたりした際のメモ。 Sass と Compass がインストールされていることが前提。Compass を使用しないものもあるが、「@import “compass”;」が記述してあることが必要。インス…

続きを読む

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

2014年3月27日

アニメーションのミックスインを探していたら見つけた Compass/SASS を使ったアニメーションのミックスインに関するメモ。 Compass/SASS は最近始めたばかりなのでこの方法が正しいかは不明だが一応やりたいことはできているみたい。 追記 Sass 記法で書かれているものとは別に Scss でかかれているもの(animate.scss)も見つかっ…

続きを読む

htmlcss Compass のミックスイン

2014年3月27日

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

続きを読む

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

2014年3月4日

Windows 環境での Sass と Compass のインストールと基本的な環境設定に関するメモ。 Ruby のインストール Sass には Ruby が必要なので Ruby がインストールされているかどうかをコマンドプロンプトで確認する。 上記コマンドで Ruby のバージョンが表示されれば、Ruby はインストール済み。 インストールされていない場合…

続きを読む

htmlcss Prepros で Compass を使ってみる

2013年8月16日

Prepros をインストールして Compass を使った際のメモ。 config.rb の設定が反映されない? 追加情報 2013年8月31日 Version 3.0.0 で config.rb の設定が反映されるようになりました。 昨日 Prepros を起動したところ画面上部に「贈り物」のようなオレンジ色のアイコンが表示されていたのでクリックすると、…

続きを読む

htmlcss Sass の基本的な使い方のメモ

2013年8月15日

目次 更新:2016年5月20日 Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSS を便利に使えるように拡張した言語です。 Sass には Sass 記法(拡張子 .sass)と SCSS 記法(拡張子 .scss)の二つの記法がありますが、ここでは SCSS 記法(拡張…

続きを読む