Sass と compass で開発効率が大幅に向上_html/css_WEB-ITnose

私は最近それを学び、使い始めました、そしてそれを使って CSS を書くのは本当に素晴らしいことに気づきました

sass、compass をインストールします

1. sass は Ruby に依存します。最初に Ruby をインストールする必要があります。 download
2. Ruby をダウンロードしたら、コマンドラインで sass をインストールします gem install sass
3. sass-v compass-v を使って、インストールが成功したかどうかを確認します

上の画像が表示されたら、インストールは成功しました。

Sass の使用と利点

sass 公式 Web サイト: http://www.w3cplus.com/sassguide/

sass 関数:

変数、数値を定義します。計算 (左側に scss ファイル、右側にコンパイル済みの css ファイル)

何度も繰り返しタグを書かなくても、誰が誰の子要素であるかを知ることができて便利です

関数のように使用すると、パラメーターを渡したり、デフォルトのパラメーターを設定したりできます

これだけでは十分ではありませんが、sass は compass と併用しないと、その機能の威力を反映することが困難になります

compass

1.公式ドキュメント http://compass-style.org/help/tutorials/production-css/

2.compassの特徴

ブラウザ互換性を簡単に実現

css3の包括的なサポート

大量の利用機能を提供、色処理、クライアントデータの取得など

拡張が簡単

3. よく使用される機能:

1. @import (CSSファイルを結合してモジュール性を実現)

各部分のスタイルを分割できますプロジェクトを _head.scss、_body.scss、_foot.scss に追加します

(注意! _ で始まる必要があるため、これらのファイルは CSS ファイルにコンパイルされません)

効果を実現するには

メインでの使用方法.scss に次のコードを追加します

1 @import "base/head";2 @import "base/body"; 3 @import "base/foot";

を実現するためにコンパイルを実行します

2.css3 互換性

毎回複数のブラウザプレフィックスを記述する必要はなく、前に @include を記述するだけです (通常の形式で記述します) css3 の方法はこちら)

3. スプライト画像を結合する

手順: CSS スプライト画像は、HTTP リクエストを削減し、Web サイトの読み込み速度を向上させるために、複数の画像を 1 つの画像に結合する方法です

ディレクトリ構造は次のとおりです: 結合されていない画像マージされた画像の場合:

share.scss に次の 3 行のコードを入力します

1 @import "compass/utilities/sprites";   2 @import "share/*.png";   　　　　//注意这里的路径，*表示匹配所有png格式的图片3 @include all-share-sprites;   //中间的share为存放未合并文件的目录名字，

次に、レンダリングを実行します。は次のとおりです。テストのためだけに、少し見苦しいですけどね

さらに、share.css ファイルでは、次のように画像の位置も計算され、非常に便利に使用できます

バグ

1 error sass/screen.sccc (c:/Ruby22-x64/lib/ruby/gems/2.2.0/compass-1.0.3/lib/compass/sass_extensions/functions/sprite.rb:137:in 'sprite_does_not_have_parent':undefined 'parent' for nil:NilClass)

解決策: 画像の名前に中国語などを含めないでください

4. ブラウザ Normalize.css (さまざまなブラウザでスタイルが一致しない問題を解決します)

(1) 説明: Normalize.css は CSS リセットの代替手段です。

(2) 利点:

便利なブラウザのデフォルト スタイルを完全に削除するのではなく保護します

一般的なスタイル: ほとんどの HTML 要素に提供されます

ブラウザ自体のバグを修正し、ブラウザ間で一貫性を確保します

CSS の使いやすさを最適化します: いくつかのヒントを使用します

コードの説明: コメントと詳細なドキュメントを使用します

(3) 公式ドキュメント https://github.com/ksmandersen/compass-normalize

(4) インストール gem install compass-normalize

(5) 使用方法

新しいプロジェクトを作成します

compass create 61c7758614d70d0f7434bcaa2c5e7674 -r compass-normalize --using compass-normalize

既存のプロジェクトに追加します

.rb に require'compass-normalize' を追加します

正規化されたプラグインを使用するには、 @import "normalize" を導入するだけです。 // これは、すべての

通常の状況では、必要なモジュールを選択して、それらを個別にインポートする必要があります。冗長性は次のとおりです

1 @import 'normalize/html5';2 @import 'normalize/base';3 @import 'normalize/links';4 @import 'normalize/typography';5 @import 'normalize/embeds';6 @import 'normalize/groups';7 @import 'normalize/forms';8 @import 'normalize/tables';

scss コンパイル、コンパス コンパイル

ここまで言っても、やはりコンパイルが必要です

1. コンパイルにはビジュアル ツールを使用します 例: koala (リアルタイム コンパイル、圧縮可能、複数の言語をサポート)シンプルを使用)

ダウンロードアドレスをクリックしてダウンロードします

2. コマンドラインを使用します

プロジェクトを作成します Compass create myproject クリックして作成したディレクトリに入ります、次の 3 つのファイルが表示されます

Compile Compass コンパイル (プロジェクトのルートディレクトリ下で使用、sassディレクトリ内のファイルをcssにコンパイル、cssのパスはconfig.rbで設定したcss-dir)

よく使われるコマンドラインは以下の通りです

3. フロントエンド自動化ツール gulp を使う

(次回は gulp について記事を書きます、続きます)