Sassの基本的な文法ルールを学ぶ【Sassとコンパスの学習ノート】_html/css_WEB-ITnose

プログラム可能な CSS 構文 Sass と Sass ベースの CSS ライブラリ compass を発見して以来

1 つは私にとって C# のように感じられ、もう 1 つは .NET Framework のように感じられます。すべては開発効率を向上させ、大規模な Web の開発コストを削減するためです。 。 しきい値。

Web 開発トレンドが WebApi+Js 時代に入ると、compass と Sass が Web 開発の標準になるでしょうか? Web サイトがますます複雑になる場合、これは実際の開発でテストする必要があります。

まず、HTMLは複雑です---》動的プログラミング言語の解決策

jsは複雑です---》jqやdojoなどの解決策

CSSも今では複雑になってきましたが、CSS自体にはプログラミング機能がないので、ミドルウェアcss の前処理が登場しました。compass や Sass と同じように css を記述し、それをブラウザーが解析できる css に前処理することで、より強力な Web サイトを構築する複雑さを軽減できます。

変数

変数は、js や c# の変数に似ています。これらはすべて、CSS を書く初心者にとって、変数を使用して多くの高さ、色などを一度に変更することです。最も愚かな方法でも CSS を書くのが以前よりずっと速くなります

sass の変数の識別子は $ で、これは jq と同じ識別子です

例えば

$font-stack:    Helvetica, sans-serif;$primary-color: #333;body {  font: 100% $font-stack;  color: $primary-color;}

このように書かれた CSS の Sass バージョンはコンパスの前処理後です普通に解析できるCSSで、各行に比較用の行番号が付いているので、最初はバグ解消のために処理前と処理後をどう接続するか非常に悩みましたが、後で行番号があることが分かり便利です。

ネスティングとスコープ

以前、CSS を書くときに最も面倒だったのは、デフォルトの CSS ルールが 1 行ずつあるのに、CSS が 1 画面を超えてしまい、これらの CSS 間の関係が理解できなかったことです。 。 。

{} ネストとスコープを使用して、CSS をプログラムのように記述できるようになりました

ナニ、スコープ?上記の変数とスコープがあります。スコープがわからない場合は、Baidu の

sass のネストおよび前処理された CSS は、CSS の HTML の継承と処理ルールに基づいています。以前よりも快適に見えます。前処理後は、次のようになります

スコープについては、公式デモには説明がありませんが、これは本で見たものです

たとえば

body {  font: 100% Helvetica, sans-serif;  color: #333;}

異なる {} スコープ内の変数は相互に影響しません

モジュール

Partials という言葉を見て、本当に嬉しくて泣きました。以前は 1,000 行以上ある CSS ファイルを開いたとき、迷路に迷い込んだような気分になりました。モジュール化が必要です CSS は、_partial.scss などのアンダースコアで始まる別のファイルに配置されます。このモジュールを使用する場合は、 @import

を使用してインポートするだけです。

インポートモジュールをインポートする

cssでインポートを使用すると、サーバーへのリクエストが開始されます。sassでインポートとコンパスを使用すると、モジュールをインポートし、インポートされたファイルをマージできます。

たとえば、ブラウザのデフォルトのスタイルをリセットします。モジュール

nav {  ul {    margin: 0;    padding: 0;    list-style: none;  }  li { display: inline-block; }  a {    display: block;    padding: 6px 12px;    text-decoration: none;  }}

は次のとおりです。このようにインポートされました

nav ul {  margin: 0;  padding: 0;  list-style: none;}nav li {  display: inline-block;}nav a {  display: block;  padding: 6px 12px;  text-decoration: none;}

生成された CSS はブラウザで解析でき、簡単に比較できるように行番号が付いています

div{$font-stack:    Helvetica, sans-serif;$primary-color: #333;}li{$font-stack:    Helvetica, sans-serif;$primary-color: #333;}

sass--Mixins の関数メソッド

関数には関数名パラメーターとオプションのパラメーターがあり、戻り値が返されます 待つ価値があります

これらはすべて Sass で利用できます! 具体的には、これはまだ読んでいる公式デモですが、これだけでミックスインが非常に便利であることがわかります メソッドを定義します

// _reset.scsshtml,body,ul,ol {   margin: 0;  padding: 0;}

メソッドを使用します

/* base.scss */@import 'reset';body {  font-size: 100% Helvetica, sans-serif;  background-color: #efefef;}

それがわかるでしょう@mixin で始まり、その後にメソッド名が続き、括弧内にパラメーターがあり、{} の真ん中が返されるコンテンツです

このメソッドを呼び出すには、@include の後にメソッド名と括弧を付けて使用します

コンパスの前処理後に生成される CSS。は次のとおりです

html, body, ul, ol {  margin: 0;  padding: 0;}body {  background-color: #efefef;  font-size: 100% Helvetica, sans-serif;}

継承

この継承は、sass のコードを編成します。非 HTML で CSS を解析およびレンダリングするときに、継承ルールについて混乱しないでください。 。 。ただし、生成されたコードは CSS 継承ルールに準拠しています。 。 。 。 。 。

継承に使用されるキーワードは @extend です。使い方は非常に簡単です。公式のデモを見てみましょう

@mixin border-radius($radius) {  -webkit-border-radius: $radius;     -moz-border-radius: $radius;      -ms-border-radius: $radius;          border-radius: $radius;}

演算子を前処理した後に生成される

.box { @include border-radius(10px); }

コードです。

sass は +、-、*、/、% の加算、減算をサポートします。掛け算、割り算、余りが強すぎるので幅や高いところに書いた方が便利です