sass
コンパスCSS3ミックス

前書き

環境を設定する

コマンドラインを開く

Rubyを使ったインストール

gem update --system

gem install compass

プロジェクトを作成する

compass create <myproject>

コンパスプロジェクトが初期化されます。これは、というフォルダを追加します。フォルダの構造は次のようになります。

コンパスを使用する

compass watch

これにより、変更するたびにsassファイルがコンパイルされます。 sassフォルダのパスは、config.rb内で変更することができます

コンパスでCSS3を使用する

このページでは、CSS3コンポーネントがサポートされている完全なリファレンスを見つけることができます

プロジェクトでCSS3を使用するために、CompassはすべてのブラウザでCSS3機能をサポートするためのミックスインを提供しています。あなたのSass / Scssファイルの上にコンパスを使いたいと指定する必要があります

@import "compass/css3";

ボーダー半径

あなたのsassファイルには、コンパス付きのボーダー半径を含める：

div {
    @include border-radius(4px);
}

CSS出力

div {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

ご覧のように、通常のCSS名を使用することができます。その前に@includeを置き、（）を使って値を設定してください。

Flexboxの例

.row {
  @include display-flex;
  @include flex-direction(row);
}

CSS出力

.row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}

結論

これは2つの例にすぎません。 Compassはもっと多くのCSS3ミックスを提供します。 Compassを使用するのは非常に便利で、特定のブラウザ用にCSS3コンポーネントを定義するのを忘れている心配はありません。ブラウザがCSS3の機能をサポートしている場合、コンパスがそれを定義します。