Sass_html/css_WEB-ITnose のデータ型

データ型はほぼすべてのプログラミング言語にあり、Sass も例外ではありません。データ型はさまざまな用途に応じて分類されます。たとえば、2 は数値 (number)、SitePoint は文字列 (string) です。この記事では、Sass のすべてのデータ型 (合計 7 つのデータ型) を取り上げ、いくつかの簡単な例を通してこれらのデータ型が Sass でどのように使用されるかを説明します。

Null

null は、Sass の最も基本的なデータ型であり、true も false もありませんが、empty を表します。それには価値がありません。 null のバリアントは、文字が含まれていないものであっても、空とは見なされないことを知っておく必要があります。これは、 NULL または Null が実際には null であり、両方とも文字列であることも意味します。

null は何も意味しませんが、length(..) を使用すると長さ 1 が返されます。これは、null は依然として実際のエンティティを表しますが、何も表していないためです。同様に、他の文字列を連結するために null を使用することはできません。このため、 text + null を使用すると、Sass のコンパイル時にエラーが発生します。

Booleans

このデータ型には、 true と false の 2 つの値のみがあります。 Sass では、false と null のみが false を返し、それ以外はすべて true を返します。たとえば、次のようになります。

$i-am-true: true;$a-number: 2;body {  @if not $i-am-true {    background: rgba(255, 0, 0, 0.6);  } @else {    background: rgba(0, 0, 255, 0.6); // expected  }}.warn {  @if not $a-number {    color: white;    font-weight: bold;    font-size: 1.5em;  } @else {    display: none; // expected  }}

ここでは、2 つの変数 $i-am-true と $a が -number として使用されます。コードを説明する前に、Sass の not 演算子は他の言語と同様に機能します。したがって、 @if not $i-am-true は if (!$i-am-true) と同等です。 $i-am-true の値が true であるため、最終的な値は false になります。これにより、青色の背景色が生成されます。

前に述べたように、 null と false を除くすべてが true です。これは、 $a-number が true に等しいことを意味するため、 .warn クラス名を持つ段落 ( p ) は表示されません。以下の効果がわかります:

数値

数値は CSS で広く使用されており、そのほとんどは CSS ユニットと組み合わせて使用​​されますが、技術的には依然として数値とみなされます。同様に、Sass にも数値型 (Number) があります。このようにして、基本的な計算を行うことができます。

覚えておくべきことの 1 つは、これは次のような数値と互換性のある単位を操作している限り有効であるということです。

$size: 18;                  // A number$px-unit: $size * 1px;      // A pixel measurement$px-string: $size + px;     // A string$px-number: $px-unit / 1px; // A number

上記のコードは 4 つの変数を宣言しています。 $size は数値です。 $px-unit は、$size に 1px を掛けて、サイズの測定値に変換します。 $px-string を単位 px に追加すると、18px に変換され、数値ではなく文字列になります。これは主に、Sass では px 自体が文字列とみなされ、数値と文字列を加算すると文字列になるためです。 $px-number は、$px-unite を使用して 1px で除算され、数値 18 に戻ります。

たとえば、次の例では、これらの変数が .button スタイルで使用されています。

.button {   background: rgba(255, 0, 0, $px-number * 3 / 100);   padding: $px-unit / 2;   border-radius: $px-string * 3; // throws error   margin-top: $px-number * 2px;}

上記のコードでは、背景は rgba(255, 0, 0, .54）、パディングは9pxに等しい。ただし、border-radius は文字列と数値を操作できないため、エラーが報告されます。たとえば、次のデモに示すように:

文字列

CSS では、文字列はフォント スタイルやその他の属性スタイルによく使用されます。 Sass の文字列は CSS と同じです。一重引用符 ('') または二重引用符 ("") で囲まれたものも文字列です。ただし、'' または "" が使用されていない場合、Sass では文字列とみなされず、実際の使用時に特定のエラーが発生することに注意することが重要です。たとえば、次の例:

$website: 'SitePoint'; // Stores SitePoint$name: 'Gajendar' + ' Singh'; // 'Gajendar Singh'$date:  'Month/Year : ' + 3/2016;// 'Month/Year : 3/2016'$date:  'Month/Year : ' + (3/2016);// 'Month/Year : 0.00149' // This is because 3/2016 is evaluated first.$variable: 3/2016;      // Evaluated to 0.00149$just-string: '3/2016'; // '3/2016'

$name は文字列を格納します。興味深いことに、2 番目の宣言では 3/2016 は計算されず、文字列として扱われます。これは、文字列を他のデータ型と連結することもできることを意味します。ただし、文字列を null と連結することはできません。

3 番目の宣言では、$variable は文字列の代わりに 3/2016 を直接計算します。これは主に、他の文字列が連結されていないためです。変数 $variable に 3/2016 のような内容を文字列として格納したい場合は、後で宣言する変数 $just-string のように引用符 (一重引用符または二重引用符) で囲む必要があります。

文字列内で変数を使用する場合、その変数を直接文字列にしたくない場合は、変数を補間するには、呼び出された変数を使用する必要があります。簡単に言えば、#{} を使用して変数をラップします。簡単な例を見てみましょう:

$name: 'Gajendar';$author: 'Author : $name'; // 'Author : $name'$author: 'Author : #{$name}';// 'Author : Gajendar'

補間方法は、一部の条件文で変数を使用する場合に特に便利です。たとえば、次の例は次のとおりです。

Colors

CSS カラー表現は、色の 16 進記号、rgb、rgba、hsl、hsla やキーワード (ピンク、ブルーなど）など。 Sass は主に、色をより効果的に使用できるようにするための追加機能を提供します。たとえば、Sass で色の値を追加できます。

例:

$color: yellowgreen;            // #9ACD32color: lighten($color, 15%);    // #b8dc70color: darken($color, 15%);     // #6c9023color: saturate($color, 15%);   // #a1e01fcolor: desaturate($color, 15%); // #93ba45color: (green + red);           // #ff8000

如果你想让我解释Sass是如何计算颜色的。我在这里只能简单的告诉你，Sass具有分离颜色的所有通道，然后对应的颜色通道进行运算。比如在这个示例中， red 颜色对应的十六进制值是 #ff0000 , green 颜色对应的十六进制值是 #008000 ,把他们添加到一起就是 #ff8000 。另外不能使用这样的方法来计算颜色的透明( α )通道的值。

有关于Sass颜色更详细的介绍可以阅读这篇文章。

下面这个案例演示了Sass颜色功能，比如 lighten() 和 darken() 等：

Lists

如果你熟悉其他语言中的数组的话，那么理解Sass中的列表就不会有困难。列表其实就是Sass中的数组，它可以包含零个、一个或多个值，甚至是还可以包含多个子列表。在列表中创建不同的值时，你只需要使用空格或逗号分隔开就行，如下所示：

$font-list: 'Raleway','Dosis','Lato';// Three comma separated elements$pad-list: 10px 8px 12px;// Three space separated elements$multi-list: 'Roboto',15px 1.3em;// This multi-list has two lists.

上面的代码阐述的已很清楚，你可以在列表中存储多种类型的值。前两个列表各有三个元素，而后面的 $multi-list 列表中两个元素用逗号分隔开，这意味着，第一个元素是字符串 Roboto ，而第二个元素是另一个列表( $multi-list 的子列表),并且这个子列表包含两个元素，这两个元素是使用空格符分隔开的。也就是说，使用不同的分隔符在同一个列表中可以创建一个嵌套列表。

当列表和循环一起使用的时候，可以证明列表是非常有用的，比如下面的示例：

上面的示例，我使用了 nth($list,$n) 函数演示了如何得到列表中的第几个列表项。其实列表具有的功能特性远不止这些，如果你想了解有关于更多的特性，可以 阅读这篇文章 。

Maps

Sass中的Map其实就是类似于关联数组，常常以 key/value 对键值出现。Map必须用括号( () )括起来，每对键值之间使用逗号分隔。在Map中，一个给定的 key 只能有一个相关的 value ，但一个给定的 value 可以被映射到许多不同的 key 上。另外，在Map中映射给 key 的值 value 可以是任何数据类型，包括Map。如下面的示例所示：

$styling: (  'font-family': 'Lato',  'font-size': 1.5em,  'color': tomato,  'background': black);h1 {  color: map-get($styling, 'color');  background: map-get($styling, 'background');}

上面的示例创建了一个名为 $styling 的 map ，这个Map中对应的键值是用来定义不同的CSS属性。

Sass中的Map有 很多不同的函数功能 ，可以使用它们可以操作Map或提取值。比如这里使用的 map-get 函数，它接受两个参数，第一个是Map的名称 $styling ，第二个是你想需要取的值的 key 值。

在Sass中也可以对Map中的 key/value 做遍历，比如：

总结

Sass数据本身在Sass中似乎并不怎么有用，但是将其和Sass提供的其他功能在特定的时间，特定的场合一起使用，还是可以创造奇迹的。

另外，Sass中的List和Map相对于其他数据类型来说要复杂的说，在这篇文章只是简单的给大家提了一下这方面的概念，后面我们将会为大家提供有关于这方面更详细的教程。如果您有任何关于Sass数据类型的问题，欢迎在下面的评论中给我们留言。

本文根据 @Gajendar Singh 的《 Data Types in Sass 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://www.sitepoint.com/data-types-in-sass/ 。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。