Sass と Compass の実践体験まとめ_html/css_WEB-ITnose

フロントエンドサークルに入ってから、勉強と仕事が忙しくて、自分の成果をよく書いているのですが、なかなか書く時間がありません。現時点では、ちょうど「メーデー」と重なっているので、時間を割いてブログを書き、Sass と Compass を一緒に使用したときの私の最近の経験をいくつか共有したいと思います。この記事は主に Sass と Compass に慣れていない学生向けに書かれているので、役立つと思います。ダニエル、さらに提案や追加の説明を残してください。

Sass と Compass のインストール

Sass と Compass のインストールについては、それぞれの公式 Web サイトを参照してください。詳細なインストール手順が記載されています。公式サイトは以下の通りです:

• Sass 公式サイト

• Compass 公式サイト

ここで説明する必要があります。Sass と Compass をインストールする前に、どちらも Ruby 言語で開発されているため、Ruby 環境がローカルにインストールされていることを確認してください。 Ruby 環境のインストールに関して、この記事では 2 つの方法を説明します:

• 1 つはタオバオ ミラー、

• もう 1 つはインストールですRuby China に関するチュートリアル。

Sass の一般的なメソッド

Sass には Sass と Scss という 2 つの文法規則があります。以下はすべて Scss の文法です。以下の例はScssの記述方法のみを示しています。コンパイルされたスタイルを知りたい場合は、公式Webサイトを参照することをお勧めします。

コンパイル

Scss には 4 つのコンパイル スタイルがあります。つまり、

• ネスト (デフォルト): ネストされたインデント

• expanded: 展開された

• compact: コンパクト形式

• compressed: 圧縮された

についてコンパイル方法については、以下の Compass で説明します。ここでは主に compass と共有して使用します。 Sass を個別にコンパイルしたい場合は、公式 Web サイトで提供されているオンライン エディターを参照するか、プロジェクトで Gulp または Webpack が使用されている場合は、koala ソフトウェア、Less および Sass コンパイラーを使用できます。自分でコンパイルしてください。

注釈

次の 2 つの注釈方法を誰でも選択できます。

//这种注释方式，不会被编译到css文件中，只能保留在源文件/* 这种注释可以被编译到css文件中 */

変数

Scss 構文では、変数はすべて $ 記号で始まります。

    $font-color: #ff637c;    $sm-padding: 6px;    .main {        color: $font-color;        padding-top: $sm-padding;    }

ネスト

Scss はセレクターのネストされた使用をサポートしているため、次のような同じセレクター名を多数記述する必要がなくなります。一般に、ネスティングは 3 階以下にすることが推奨されます。

    .prev-item {        border: 1px solid $primary-color;        padding: $sm-padding;        p {            line-height: 28px;        }    }

再利用

Scss コードの再利用は次のとおりです:

1. @mixin と @include

2. @extend

    @mixin size($width, $height: $width) {        width: $width;        height: $height;    }    .containter {       @include size(60px);    }

请大家看看以下两种形式，注意两种形式的编译结果:

最初の書き方は、Scss プレースホルダーを使用する方法です。コンパイル結果は次のようになります。つまり、「%auto」スタイルは個別にコンパイルされません。これは、それを参照するセレクターでのみ有効です:

    %auto {        margin-left: auto;        margin-right: auto;    }        .box {        @extend %auto;        width: 80px;    }

    .auto {        margin-left: auto;        margin-right: auto;    }        .content {        @extend .auto;        width: 80px;    }

そして、2 番目のコンパイル結果は

    .box {        margin-left: auto;        margin-right: auto;        width: 80px;    }

したがって、「For the」auto のようなものを使用する必要がある場合は、 " クラスの場合は、2 番目のメソッドを選択します。HTML で "auto" クラスを使用する必要がなく、scss の "auto" が他のクラスを提供するためにのみ使用される場合は、CSS の冗長なスタイルを減らすために最初のメソッドを選択します。

    .auto {        margin-left: auto;        margin-right: auto;    }        .content {          margin-left: auto;          margin-right: auto;         width: 80px;    }

3. @import

@import コマンドは、CSS モジュール化の適用において重要な役割を果たします。これは、外部ファイルを導入するために使用されます。たとえば、次のように _reset.scss、header.scss、および modal.scss をすでに記述しています:

ここでは、index.scss を記述するときにヘッダーとモーダル スタイルを使用する必要があります。次に、図に示すように、@import コマンドを使用してそれを Index.scss に直接インポートできます。

注意すべき点が 2 つあります:

scss ファイルのファイル名にアンダースコア「-」が含まれている場合、そのファイルは別個の css ファイルにコンパイルされず、それを参照するファイル内でのみコンパイルされます。ただし、引用する場合は、上記の @import 'reset' のようにアンダースコアを追加する必要はありません。

• の先頭に @charset 'utf-8' があることを確認してください。中国語のコメントをコンパイルするときに文字化けが発生するのを防ぐために、各 scss ファイルを修正します。

• Sass には、カスタム関数、条件文など、多くの高度な用途もあります。興味のある学生は、公式ドキュメントを確認してください。

Compass を Sass と組み合わせて使用​​する

Compass を Sass と組み合わせて使用​​すると、CSS の作成を大幅にスピードアップできます。これは、Compass には既製の Sass テンプレートがすでに多数あるためです。直接ご利用いただけますので、ぜひご利用ください。まず見てみましょう。 Compass をプロジェクトにインストールすると、compass 内に config.rb ファイル、Sass ファイルを格納するフォルダー、コンパイルされた CSS を格納するフォルダーが作成されます (フォルダー名は自分で変更できます)。以下に示すように、画像フォルダーなどの他のファイルを入力することもできます。

以下の config.rb ファイルを見てみましょう:

コードの 6 ～ 9 行目では、ファイルへのパスを設定し、14 行目でコンパイル済みの CSS 形式を設定し、20 行目で line_comments = false を設定して、デフォルト状態の多数のコメントを削除できます。キャッシュ ファイルを削除する必要がある場合は、前の文に Just cache = false を追加します。

Compile

プロジェクトで gulp または webpack を使用せず、単に compass を使用してコンパイルする場合は、コマンド ラインのプロジェクトのルート ディレクトリで compass コンパイルを実行できます。 compass は Scss ファイルをコンパイルします。フォルダー内の scss ファイルは css にコンパイルされ、css というフォルダー (またはデフォルト名は stylesheets) に保存されます。 Compass は、gulp や webpack のようにリアルタイムでコンパイルすることもできます。この方法では、sass ファイルが変更されると、compass はリアルタイムで scss ファイルを監視します。すぐに CSS ファイルにコンパイルされます。

モジュールリファレンス

コンパスを使用すると、reset.scss ファイルを自分で書いたり、多くの css3 @mixin などを定義したりする必要がなくなります。既製のコンパスを直接参照できます。 scss ファイルモジュール内。興味のある学生は、詳細な使用手順が記載されている公式 Web サイトを参照してください。

このようにして、scss ファイルがコンパイルされます。 CSS リセット コードを自動的に生成するには、@include を通じて compass/css3 の 19 個のコマンド (clearfix、box-sizing、またはその他の新しい CSS3 プロパティ border-radius など) を直接参照することもできます。以下の図を参照してください。

関数

Compass には、直接使用すると便利なカプセル化された関数が多数あります。たとえば、背景画像のパスを指定するには、image-url 関数を引用し、config.rb ファイルで画像のパスを直接設定し、図に示すように、画像名をパラメータとして scss ファイルの image-url に直接渡すことができます。 :

また、scss と組み合わせて使用​​して、1x 画面および 2x 画面イメージと互換性のある @mixin をカプセル化するなど、より実用的なコードをカプセル化することもできます。 > その他の例については、こちらを参照してください。

スペースが限られているので、今回はこのくらいにします。さらに発見があれば、共有してください。