Sass-number-operations
提供：Dev Guides
Sass-数字操作
説明
SASSでは、加算、減算、乗算、除算などの数学演算が可能です。 px * px_などの互換性のないユニットを使用したり、_px_および_em_リードで数値を追加して無効なCSSを生成したりすることはできません。 したがって、CSSで無効なユニットを使用すると、SASSはエラーを表示します。 SASSは、 <、>、⇐、> = _および等号演算子= =、！=などの関係演算子をサポートしています。
部門および/
SASSでは、通常のCSSと同様に、数値の除算（/）が可能です。 3つの状況で除算（/）操作を使用できます。
- 値が変数に格納されるか、関数によって返される場合。
- 括弧がリストの外側にあり、値が内側にある場合、値は括弧で囲まれます。
- 値が算術式の一部である場合。
減算、負の数、および-
SASSを使用すると、数値の減算（10px-5px）、数値の否定（-5）、単項否定演算子（-$ myval）、識別子の使用（font-size）などの操作を実行できます。 いくつかのケースでは、これらは次のように便利です-
- 両側のスペースを使用できます-数値の減算を実行するとき
- -の前にスペースを使用できますが、負の数または単項否定の後には使用できません
- スペースで区切られた括弧で単項否定を囲むことができます（5px（-$ myval））
例は-
- _font-size_などの識別子で使用でき、SASSは有効な識別子のみを許可します。
- スペースなしで2つの数値で使用できます。つまり、10-5は10-5に似ています。
- 負の数の始まりとして使用できます（-5）。
- 5-$ myvalは5-$ myvalに似ているなど、スペースを考慮せずに使用できます。 *単項否定演算子（-$ myval）として使用できます。
例
次の例は、SCSSファイルでの数値演算の使用を示しています-
<html>
<head>
<title>Number Operations</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">
<p class = "para1">SASS stands for Syntactically Awesome Stylesheet..</p>
<h2>Hello...Welcome to Sass</h2>
<h3>Hello...Welcome to Sass</h3>
<p class = "para2">Hello...Welcome to Sass</p>
</div>
</body>
</html>次に、ファイル_style.scss_を作成します。
style.scss
$size: 25px;
h2{
font-size: $size + 5;
}
h3{
font-size: $size/5;
}
.para1 {
font-size: $size* 1.5;
}
.para2 {
font-size: $size - 10;
}次のコマンドを使用して、SASSにファイルを監視し、SASSファイルが変更されるたびにCSSを更新するように指示することができます-
sass --watch C:\ruby\lib\sass\style.scss:style.css次に、上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-
style.css
h2 {
font-size: 30px;
}
h3 {
font-size: 5px;
}
.para1 {
font-size: 37.5px;
}
.para2 {
font-size: 15px;
}出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを number_operationsl ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次のように出力が表示されます。
