Sass-datatypes
Sass-データ型
データ型
データ型は情報の一種であり、すべてのデータオブジェクトのデータ型を宣言する必要があります。 次の表は、SassScriptでサポートされているさまざまなデータ型を示しています-
| S.No. | Data Type & Description | Example |
|---|---|---|
| 1 |
Numbers 整数型を表します。 |
2, 10.5 |
| 2 |
Strings これは、一重引用符または二重引用符で囲まれた一連の文字です。 |
'finddevguides', "finddevguides" |
| 3 |
Colors 色の値を定義するために使用されます。 |
red, #008000, rgb(25,255,204) |
| 4 |
Booleans trueまたはfalseのブール型を返します。 |
10 > 9 specifies true |
| 5 |
Nulls 不明なデータであるヌル値を指定します。 |
if(val==null) \{//statements} |
| 6 |
Space and Comma スペースまたはコンマで区切られた値を表します。 |
1px solid #eeeeee, 0 0 0 1px |
| 7 |
Mapping ある値から別の値にマップします。 |
FirsyKey: frstvalue, SecondKey: secvalue |
文字列
文字列は、一重引用符または二重引用符で囲まれた一連の文字です。 一重引用符または二重引用符で定義された文字列は、*＃\ {} *補間を使用して引用符なしの文字列値として表示されます（セレクターで変数を使用する方法です）。
例
次の例は、SCSSファイル内の文字列の使用を示しています-
<html>
<head>
<title>Strings</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container">
<h2>Example using Strings</h2>
<p class = "finddevguides">Sass is an extension of CSS that adds power and elegance to the basic language.</p>
</div>
</body>
</html>次に、ファイル_style.scss_を作成します。
style.scss
$name: "finddevguides";
p.#{$name} {
color: blue;
}次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-
sass --watch C:\ruby\lib\sass\style.scss:style.css次に、上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-
style.css
p.finddevguides {
color: blue;
}出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを stringsl ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次のように出力が表示されます。
リスト
リストは、スペースまたはコンマを使用して区切られた複数の値を指定します。 単一の値でもリストと見なされます。
SASSは次のようなリスト関数のいくつかを使用します-
- * nth関数*-リストの特定の項目を提供します。
- join function -複数のリストを1つに結合します。
- append function -リストのもう一方の端にアイテムを追加します。
- * @ eachディレクティブ*-リスト内の各アイテムのスタイルを提供します。
たとえば、2種類のリストがあるとします。最初のリストには、コンマで区切られた以下の値が含まれています。
10px 11px, 15px 16px内側のリストと外側のリストのセパレータが同じ場合、括弧を使用して、両方のリストが開始および停止する場所を指定できます。 以下に示すように、これらのリストを指定できます-
{10px 11px} {15px 16px}Maps
マップはキーと値の組み合わせで、キーを使用して値を表します。 マップは値をグループに定義し、動的にアクセスできます。 あなたはマップ式を書くことができます-
$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);次のような関数のいくつかを使用します-
- map-get -マップの値を提供します。
- map-merge -マップに値を追加します。
- * @ eachディレクティブ*-マップ内のキー/値ペアのスタイルを指定します。
マップは、空のキー/値のペアを要素のない*（）として表し、 inspect（$ value）*関数を使用してマップの出力を表示します。
色
SassScriptカラー値の定義に使用されます。 たとえば、＃ffa500_としてカラーコードを使用している場合、圧縮モードでは_orange colorとして表示されます。 SASSは、他の出力モードで入力されたものと同じ出力形式を提供します。これは、色がセレクターに補間されると無効な構文になります。 この問題を解決するには、引用符で色名を使用します。
