プログラミングの世界における CSS のステータスを再定義します -- sass_html/css_WEB-ITnose

CSS の記述はフロントエンドにおいて非常に基本的かつ重要であり、3 つのフロントエンド テクノロジの 1 つとして、CSS はフロントエンドで極めて重要な位置を占めています。そしてウェブさえも。 div+css レイアウトの登場以来、CSS が果たす役割はますます重要になりました。CSS3.0 が歴史の段階に入ったとき、CSS は非常に人気があり、前例のない注目を集めたようです。

ただし、CSS はプログラミング言語ではなく、単なる記述言語です。簡単に記述できるため、論理的思考力は必要なく、プログラミングの知識がなくても CSS コードを作成できます。 CSS はプロの開発者ではほとんど注目されず、研究開発チーム内ではほぼ最下位に位置します。理由は簡単です。技術的な内容がまったくないからです。

今日、Web アプリケーションは一般的であり、CSS はどこでも見ることができます。ますます一般的かつ複雑になる Web アプリケーションに直面して、CSS は表現力豊かな言語に限定されており、開発ニーズを満たすことができないようです。Web ページを変更するために CSS を必要とするだけでなく、CSS を使用できることを期待するシナリオも増えています。計算能力と論理能力。したがって、賢い同僚たちは継続的な努力を通じて新しいパフォーマンス言語 Sass を作成しました。これは、関数を定義し、js と同様に変数を宣言できる CSS 言語です。CSS を作成したことがある人なら誰でも、この素晴らしい言語をほぼ簡単に学ぶことができます。 Sass は、多くの便利な記述方法を提供する CSS 開発ツールで、デザイナーの時間を大幅に節約し、CSS 開発をシンプルかつ保守しやすくします。

Sass は、ファイルの接尾辞が .sass または .scss になることを除いて、css とまったく同じように書くことができます。ブラウザはデフォルトでは Sass コードを認識しないため、ブラウザで認識される前に CSS ファイルにコンパイルする必要があります。認識できないので当然cssファイルにコンパイルする必要があります。以下では、sass のいくつかの主要な機能と、sass を CSS ファイルにコンパイルする方法を紹介します。

1. 統合された変更とメンテナンスを容易にするために、sass で変数を定義できます。

$color:#333;

body {

color:$color

}

この方法で記述する利点の 1 つは、統一された設定をバッチで変更できることです。

3. Sass はセレクターをネストして階層関係を表現でき、非常にエレガントできれいに見えます。

例:

html{

font-size:12px;

body{

height:auto;

div{

color:#ccc;

}

}

}

4. 他の Sass をインポートする方法sass ファイルに変換され、最終的に css ファイルにコンパイルされます。これは純粋な css @import

よりも優れています。 5. Mixin を使用して Sass でいくつかのコード スニペットを定義でき、パラメーターを渡すことで将来の呼び出しベースを容易にすることができます。ニーズに合わせて。今後は、css3 プレフィックスの互換性を処理するのが簡単かつ便利になります。

6.sass は @extend を使用してコードの組み合わせ宣言を実装し、コードをより優れた、簡潔にすることができます。

7.sass は、単純な加算、減算、乗算、除算などの演算を実行できます。

8.sass は、色の変更を簡単にするために多数のカラー関数を統合しています。

では、それを CSS ファイルにコンパイルするにはどうすればよいでしょうか?

現在、基本的に 2 つのオプションがあります:

最初のオプション:

1. Sass をローカルにインストールします。ただし、2 つの構文は次のとおりです。同じ関係ではありません。 Ruby を理解していなくても、使用できます。最初に Ruby をインストールしてから SASS をインストールするだけです。

2. Ruby がすでにインストールされている場合は、ターミナルで gem install sass を実行するだけです。Mac を使用している場合は、Mac 自体に Ruby が付属しているため、この手順は省略できます。そして生意気です。

3. sass test.sass test.css を実行します

このコマンドは、test.sass ファイルを test.css ファイルにコンパイルすることを意味します。

2 番目のタイプ:

grunt や gulp などの自動化ツールを使用します。この gulp の方法については、WeChat パブリック アカウントに関する前回のコースですでに説明したので、ここでは説明しません。

sass に興味がある方は、WeChat に私を追加してプライベートメッセージを送ってください。20 人以上の場合は、ビデオの形で興味のある人に具体的に説明します。デモンストレーション。

私を WeChat に追加したい場合は、公式アカウントでキーワード「プライベート チャット」に返信して、私の WeChat ID を取得してください。