sass导入sass_Sass中的数据类型

sass导入sass

Data types exist in almost all programming languages and Sass is no exception. A data type is a way of classifying data into certain categories for different uses. For instance, 2 is a number and SitePoint is a string. In this tutorial, I will cover all seven data types that exist in Sass and include some examples illustrating the use of each one whenever possible.

数据类型几乎存在于所有编程语言中，Sass也不例外。 数据类型是一种将数据分类为不同用途的特定类别的方法。 例如， 2是一个number ， SitePoint是一个string 。 在本教程中，我将介绍Sass中存在的所有七种数据类型，并包括一些示例，说明尽可能使用每种数据类型。

空值 (Null)

null is the most basic of all data types in Sass. It is not true or false, it is just empty. It does not have any value at all. One thing that you should be aware of is that any variant of null with even one letter in a different case will not be null. This implies that neither NULL nor Null are actually null. They are both strings.

null是Sass中所有数据类型中最基本的。 它不是true或false ，只是空的。 它根本没有任何价值。 您应该意识到的一件事是，在不同情况下，即使有一个字母的null任何变体也不会为null 。 这意味着NULL和Null实际上都不为null 。 它们都是字符串。

Even though null represents nothing, it still returns a length of 1 when passed to the length(..) function. This is because null is still an entity, even if it has been used just to represent nothing. Also, you cannot concatenate null with other strings. For this reason, 'text' + null would be invalid and throw an error.

即使null代表什么，它在传递给length(..)函数时仍返回1的length(..) 。 这是因为null仍然是一个实体，即使它只是用来表示什么也没有。 同样，您不能将null与其他字符串连接在一起。 因此， 'text' + null将无效并引发错误。

布尔值 (Booleans)

This data type has only two possible values: true and false. Only two values evaluate to false in Sass — false itself and null. Everything else returns true. Consider the following code:

该数据类型只有两个可能的值： true和false 。 在Sass中，只有两个值求值为false ： false本身和null 。 其他一切都返回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
  }
}

Here, I have used two variables — $i-am-true and $a-number. Before explaining the code further I should mention that the not operator in Sass is equivalent to the ! operator present in other languages. Consequently, the condition @if not $i-am-true is equivalent to if (!$i-am-true) which ultimately evaluates to false because $i-am-true is true. This results in a blue background.

在这里，我使用了两个变量- $i-am-true和$a-number 。 在进一步解释代码之前，我应该提到Sass中的not运算符等效于! 运算符以其他语言显示。 因此，条件@if not $i-am-true等于if (!$i-am-true) ，由于$i-am-true为true ，最终结果为false。 这导致背景为蓝色。

As I mentioned earlier, anything besides false and null evaluates to true. This means that the variable $a-number will also evaluate to true. Therefore, the paragraph with class warn should not be displayed. As you can see in the demo below, this is indeed the case.

正如我之前提到的，除false和null之外的所有内容都将评估为true 。 这意味着变量$a-number也将计算为true 。 因此，不应显示带有类warn的段落。 正如您在下面的演示中看到的，情况确实如此。

See the Pen Sass Booleans by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen Sass布尔 值 。

数 (Number)

Numbers are used extensively in CSS. Most of the time they are accompanied by a unit of some sort but they are still technically numbers. Unsurprisingly, Sass also has a numbers data type. You can perform basic mathematical operations on these values.

数字在CSS中广泛使用。 在大多数情况下，它们都伴随着某种单位，但从技术上讲，它们仍然是数字。 毫不奇怪，Sass还具有numbers数据类型。 您可以对这些值执行基本的数学运算。

One thing to keep in mind is that these operations are valid only on numbers with compatible units. For example:

要记住的一件事是，这些运算仅对具有兼容单位的数字有效。 例如：

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

At this point, we have four variables. $size is a bare number. $px-unit multiplies $size by 1px to convert it to a pixel measurement. $px-string, although it evaluates to 18px, is not a number. It is a string. This is because px itself is treated as a string and adding a string to a number results in a string. $px-number is again a bare number obtained by dividing $px-unit with 1px.

至此，我们有四个变量。 $size是一个空数字。 $px-unit将$size乘以1px即可将其转换为像素尺寸。 $px-string虽为18px ，但不是数字。 它是一个字符串。 这是因为px本身被视为字符串，并且将字符串添加到数字中会生成字符串。 $px-number还是通过将$px-unit除以1px获得的裸机数。

Now, consider the code below where I use these variables to style a 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;
}

The background property above evaluates to rgba(255, 0, 0, 0.54). The padding property also works perfectly. However, the border-radius property throws an error because it can’t multiply a string with a number. In the accompanying demo I have used various numbers and styled some elements based on the resulting values.

上面的background属性评估为rgba(255, 0, 0, 0.54) 。 padding属性也可以完美工作。 但是， border-radius属性会引发错误，因为它无法将字符串与数字相乘。 在随附的演示中，我使用了各种数字，并根据结果值设置了一些元素的样式。

See the Pen Sass Numbers by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen Sass编号 。

弦乐 (Strings)

Strings are commonly used in CSS to set various font styles along with other properties. Sass, just like CSS, accepts both quoted and unquoted strings, even if they contain spaces. One thing you should be aware of is that not escaping strings that have special characters can throw errors. For example:

字符串通常在CSS中用于设置各种字体样式以及其他属性。 Sass和CSS一样，接受带引号和不带引号的字符串，即使它们包含空格。 您应该注意的一件事是，不转义具有特殊字符的字符串可能会引发错误。 例如：

$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'

The $name in first line is stored like a string as expected. Interestingly, in the second statement, the value 3/2016 is not evaluated but treated as a string. This implies that string can concatenate with other data types as well. However, you still cannot concatenate null with a string.

第一行中的$name像预期的那样存储为字符串。 有趣的是，在第二条语句中，未评估值3/2016而是将其视为字符串。 这意味着字符串也可以与其他数据类型连接。 但是，您仍然无法将null与字符串连接在一起。

In the third statement, the variable is evaluated directly because there is no other string to trigger the concatenation instead of evaluation. If you want to store something like 3/2016 as a string you will have to use the quotes like I did in the final statement.

在第三条语句中，直接对变量求值，因为没有其他字符串可以触发级联而不是求值。 如果您想将3/2016类的3/2016存储为字符串，则必须像在最终声明中那样使用引号。

Since we are on this topic, I would also like to mention that if you want to use variables inside a string, you will have to use a process called variable interpolation. To be more precise, you will have to wrap your variables in #{}. Here is an example:

既然我们是关于这个主题的，我还想提到，如果要在字符串中使用变量，则必须使用称为变量插值的过程。 更精确地说，您必须将变量包装在#{} 。 这是一个例子：

$name: 'Gajendar';
$author: 'Author : $name'; // 'Author : $name'

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

The interpolation method could be useful in situations where the value of a variable is determined by some conditional statements. This codepen should make it clearer:

插值方法在某些条件语句确定变量值的情况下可能很有用。 该代码笔应使其更清晰：

See the Pen Sass Strings by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen Sass字符串 。

色彩 (Colors)

CSS color expressions come under the color data type. You can refer to the colors in hexadecimal notation, as rgb, rgba, hsl and hsla values or use native keywords like pink, blue, etc. What Sass does is provide you with additional capabilities so that you can use the colors more effectively. For instance, you can add color values into Sass!

CSS颜色表达式位于color数据类型下。 您可以使用十六进制表示法来表示颜色，如rgb ， rgba ， hsl和hsla值，或使用诸如粉红色，蓝色等的本地关键字hsla功能是为您提供其他功能，以便您可以更有效地使用颜色。 例如，您可以将颜色值添加到Sass中！

Consider the following color manipulations made possible by Sass:

考虑一下Sass进行的以下颜色操作：

$color: yellowgreen;           // #9ACD32
color: lighten($color, 15%);    // #b8dc70
color: darken($color, 15%);     // #6c9023
color: saturate($color, 15%);   // #a1e01f
color: desaturate($color, 15%); // #93ba45
color: (green + red);           // #ff8000

If you are wondering how Sass can add colors together then let me explain. Before adding the colors, Sass separates all the color channels and adds corresponding channels separately. In this case, red with value #ff0000 when added to green with value #008000 produces #ff8000. You should also keep in mind that you can’t add colors with different alpha values together with this method.

如果您想知道Sass如何添加颜色，请让我解释一下。 在添加颜色之前，Sass会分离所有颜色通道并分别添加相应的通道。 在这种情况下，将值#ff0000红色与值#008000绿色相加会产生#ff8000 。 您还应该记住，不能使用此方法添加具有不同alpha值的颜色。

The rest of the color functions are self-explanatory. Lighten just lightens a given color by a given value and so on. Here, is a codepen demo with all these functions in action:

其余颜色功能是不言自明的。 变亮只是将给定颜色变亮给定值，依此类推。 这是一个具有所有这些功能的代码罐演示：

See the Pen Sass Colors by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen Sass颜色 。

清单 (Lists)

If you are familiar with arrays, you will not have much trouble understanding lists. Lists are just the Sass version of arrays. They can store zero, one or multiple values and even other lists. To create a list with different values, you need to separate the values with valid delimiters — a space or a comma. Have a look at the following code:

如果您熟悉数组，则在理解列表方面不会有太多麻烦。 列表只是数组的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.

As evident from these statements, you can store multiple types of values in a list. The first two lists have three elements each. However, the next list named $multi-list has just two elements separated by a comma. The first element is the string 'Roboto' and the second element is another list with two elements separated by a space. This implies that using different delimiters in the same list creates nested lists.

从这些语句可以明显看出，您可以在列表中存储多种类型的值。 前两个列表每个都有三个元素。 但是，下一个名为$multi-list只有两个元素，以逗号分隔。 第一个元素是字符串'Roboto' ，第二个元素是另一个列表，其中两个元素用空格分隔。 这意味着在同一列表中使用不同的定界符会创建嵌套列表。

When used together with loops, lists can prove to be really useful. The following codepen demo highlights this:

与循环一起使用时，列表可以证明是非常有用的。 以下代码笔演示重点介绍了这一点：

See the Pen Sass List by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen Sass列表 。

I have used the nth($list, $n) function in the demo above to get the nth item in the list. There are a lot of other useful list functions that you should know about too.

我在上面的演示中使用了nth($list, $n)函数来获取列表中的nth项目。 您还应该了解许多其他有用的列表函数 。

地图 (Maps)

Sass maps are like associative arrays. A map stores both keys and values associated with those keys. Maps must always be surrounded by parentheses and individual elements need to be comma separated. A given key in a map can only have one associated value. However, a given value can be associated with many keys. Please note that map keys can be of any type including maps. Here is some code to create and use maps:

Sass映射就像关联数组。 映射存储键和与这些键关联的值。 映射必须始终用括号括起来，并且各个元素必须用逗号分隔。 映射中的给定键只能具有一个关联值。 但是，给定值可以与许多键相关联。 请注意，地图键可以是任何类型，包括地图。 以下是一些用于创建和使用地图的代码：

$styling: (
  'font-family': 'Lato',
  'font-size': 1.5em,
  'color': tomato,
  'background': black
);

h1 {
  color: map-get($styling, 'color');
  background: map-get($styling, 'background');
}

In the code above we first created a map with the name $styling. The map has various key value pairs to define different CSS properties.

在上面的代码中，我们首先创建了一个名为$styling的map 。 该映射具有各种键值对，以定义不同CSS属性。

Maps have various functions that we can use to manipulate them or extract values from them. One such function I have used here is map-get. It takes two parameters, the map itself and the key whose value you want. I used this function above to set the CSS properties on our h1 tag.

地图具有各种功能 ，我们可以使用它们来操纵它们或从中提取值。 我在这里使用的一种这样的功能是map-get 。 它带有两个参数，映射本身和您想要其值的键。 我在上面使用此函数在h1标签上设置了CSS属性。

You can also iterate through a map to access all the key-value pairs one at a time. This codepen demo shows how to iterate through maps:

您还可以遍历一个映射来一次访问所有键值对。 该Codepen演示显示了如何遍历地图：

See the Pen Sass Maps by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )提供的Pen Sass地图 。

结论 (Conclusion)

Sass data types may not seem to be very useful by themselves but when used with other features that Sass offers, they can do wonders when used correctly.

Sass数据类型本身似乎并不是很有用，但是当与Sass提供的其他功能一起使用时，正确使用它们会产生奇迹。

Since maps and lists are more complex than other data types I will be writing more detailed tutorials on them in the coming weeks. If you have any questions regarding the data types, let me know in the comments below.

由于地图和列表比其他数据类型更复杂，因此我将在未来几周内针对它们进行更详细的教程。 如果您对数据类型有任何疑问，请在下面的评论中告诉我。

翻译自: https://www.sitepoint.com/data-types-in-sass/

sass导入sass