本文共 12521 字,大约阅读时间需要 41 分钟。
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
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
将无效并引发错误。
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 by SitePoint () on .
请参阅上的 ( )的Pen 。
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 by SitePoint () on .
请参阅上的 ( )提供的Pen 。
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 by SitePoint () on .
请参阅上的 ( )的Pen 。
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; // #9ACD32color: lighten($color, 15%); // #b8dc70color: darken($color, 15%); // #6c9023color: saturate($color, 15%); // #a1e01fcolor: desaturate($color, 15%); // #93ba45color: (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 by SitePoint () on .
请参阅上的 ( )提供的Pen 。
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 by SitePoint () on .
请参阅上的 ( )提供的Pen 。
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 that you should know about too.
我在上面的演示中使用了nth($list, $n)
函数来获取列表中的nth
项目。 您还应该了解许多 。
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 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 by SitePoint () on .
请参阅上的 ( )提供的Pen 。
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.
由于地图和列表比其他数据类型更复杂,因此我将在未来几周内针对它们进行更详细的教程。 如果您对数据类型有任何疑问,请在下面的评论中告诉我。
翻译自:
sass导入sass
转载地址:http://aurgb.baihongyu.com/