サスとは何ですか? サスの使い方は何ですか?-CSSチュートリアル-php.cn

Web デザインの初心者の方は、「サスとは何ですか? サスの使い方は何ですか?」という言葉を聞いたことがあるかもしれません。しかし、サスとは何ですか? サスの使い方は何ですか? の役割や使用できるかどうかはわかりません。この記事では、サスとは何ですか? サスの使い方は何ですか? とは何ですか? サスとは何ですか? サスの使い方は何ですか? の使い方について説明します。誰もがサスとは何ですか? サスの使い方は何ですか? について簡単に理解できるようにします。

サスとは何ですか? サスの使い方は何ですか?

つまり、サスとは何ですか? サスの使い方は何ですか? は、通常の CSS に追加された変数、ネストされたルール、ミックスイン (構文シュガーと呼ばれることもあります) などの特別な機能を組み合わせた CSS プリプロセッサです。目的は、コーディングプロセスをよりシンプルかつ効率的にすることです。これについてさらに詳しく見てみましょう。

CSS プリプロセッサとは何ですか?

CSS プリプロセッサは、開発者が言語でコードを記述し、それを CSS にコンパイルできるようにすることで CSS を拡張するスクリプト言語です。サスとは何ですか? サスの使い方は何ですか? はおそらく最も人気のあるプリプロセッサですが、他の一般的な例には Less や Stylus などがあります。

SASS とは何ですか?

サスとは何ですか? サスの使い方は何ですか? (Syntactical Awesome Style Sheets) は、変数、ネストされたルール、インラインインポートなどを使用できるようにする CSS の拡張機能です。また、整理整頓に役立ち、スタイルシートをより速く作成できるようになります。

サスとは何ですか? サスの使い方は何ですか? は、CSS のすべてのバージョンと互換性があります。これを使用するための唯一の要件は、Ruby がインストールされている必要があることです。

サスとは何ですか? サスの使い方は何ですか? の使い方

# 構文:

サスとは何ですか? サスの使い方は何ですか? には 2 つの構文オプションが含まれています: # 1. SCSS (サスとは何ですか? サスの使い方は何ですか?y CSS): CSS 構文

2 に完全に準拠した .scss ファイル拡張子を使用します。インデント (単に「サスとは何ですか? サスの使い方は何ですか?」と呼ばれます): 括弧の代わりに .sass ファイル拡張子とインデントを使用します。は CSS 構文に正確に準拠しているわけではありませんが、記述した方が速いです。

ファイルは、sass-convert コマンドを使用してある構文から別の構文に変換できることに注意してください。

変数他のプログラミング言語と同様、サスとは何ですか? サスの使い方は何ですか? では、スタイルシート全体で使用できる情報を保存できる変数を使用できます。たとえば、ファイルの先頭にある変数に色の値を保存し、要素の色を設定するときにこの変数を使用できます。これにより、各行を個別に変更することなく、色をすばやく変更できます。

例:

$font-stack:    Helvetica, sans-serif;
$primary-color: red;

body {
  font: 100% $font-stack;
  color: $primary-color;}

ログイン後にコピー

は次の CSS を生成します:

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

ログイン後にコピー

## ネスティング

ネストは諸刃の剣です。これは、記述する必要があるコードの量を削減する優れた方法ですが、慎重に実行しないと過剰修飾の CSS が発生する可能性もあります。アイデアは、HTML 階層を模倣する方法で CSS セレクターをネストすることです。

次に、ネストを使用した基本的なナビゲーションスタイルを示します:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }}

ログイン後にコピー

CSS 出力は次のとおりです:

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

ログイン後にコピー

##Partials

Partial は、他のサスとは何ですか? サスの使い方は何ですか? ファイルにインポートできる小さなサスとは何ですか? サスの使い方は何ですか? ファイルです。部分部分はコードの断片と考えてください。これらのコードスニペットを使用すると、CSS はモジュール化され、保守が容易になります。パーシャルは、先頭にアンダースコアを付けて _partial.scss という名前を付けて指定します。

Import (インポート)

@import ディレクティブで部分テンプレートを使用すると、ファイルの一部を現在のファイルにインポートできます。単一の CSS ファイルを作成します。生成された HTTP リクエストごとに使用されるインポートの数に注目してください。

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;}

ログイン後にコピー

// basefile.scss
@import &#39;reset&#39;;
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

ログイン後にコピー

対応する CSS 出力:

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

ログイン後にコピー

注: 部分ファイルをインポートする場合、ファイル拡張子やアンダースコアを含める必要はありません。

mixins

プリプロセッサを使用する利点の 1 つは、複雑で長いコードを簡素化できることです。ここでミックスインが役に立ちます。 たとえば、ベンダープレフィックスを含める必要がある場合は、ミックスインを使用できます。 border-radius の例を見てください:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
.box { 
    @include border-radius(10px); 
}

ログイン後にコピー

先頭の @mixin ディレクティブに注目してください。これは border-radius という名前で、変数 $radius をパラメーターとして使用します。この変数は、各要素の半径値を設定するために使用されます。

後で、ミックスイン名 (border-radius) とパラメーター (10px) を指定して @include ディレクティブを呼び出します。したがって、 .box {@include border-radius(10px) };

次の CSS を生成します:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

ログイン後にコピー

Extend/Inherit

@extend ディレクティブは最も強力であることが知られています。サスとは何ですか? サスの使い方は何ですか? の大きな特徴の 1 つです。実際に動作しているのを見れば、その理由は明らかです。

このディレクティブを使用すると、HTML 要素に複数のクラス名を含める必要がなくなり、コードをドライな状態に保つことができるという考えです。セレクターは他のセレクターのスタイルを継承し、必要に応じて簡単に拡張できます。もうこれは強力です。

サスとは何ですか? サスの使い方は何ですか? の利点:

CSS で計算を実行できる機能により、ピクセル値の変換など、より多くの操作を実行できるようになります。パーセント。加算、減算、乗算、除算などの標準的な数学関数にもアクセスできます。もちろん、これらの関数を組み合わせて複雑な計算を作成することもできます。

さらに、サスとは何ですか? サスの使い方は何ですか? には数値の操作に役立ついくつかの組み込み関数も含まれています。例としては、percentage()、floor()、round() などの関数があります。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がサスとは何ですか? サスの使い方は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。