1. In Sass, a total of seven data types:
(1) digital values ; in Sass, the number (Number) is the most basic data types, can be positive, zero or negative. Sass numbers used very widely, mostly in conjunction with CSS units to achieve, such as 10px, 10em or 10%. Although they are with the unit, but technically still considered a digital
(2) strings ; Sass in total of two kinds of strings:
1 "is a quoted string; like the address, link
Example: There are quoted string
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$logoUrl: "images/logo.png";
$cursorUrl: "images/default.cur";
$text:"绿叶学习网";
div
{
background-image:url($logoUrl);
cursor:url($cursorUrl),default;
}
div:before
{
content:$text;
}
|
2 "unquoted string; unquoted strings, we CSS is frequently encountered, such as" font-weight: bold "in the Bold , " font-Family: Sans-serif; Sans-serif "in Wait. Sass introduced unquoted strings purpose is also to be consistent with CSS syntax.
(3) Boolean; Boolean Sass in only two kinds of values: true and false.
In Sass, a Boolean value is generally used to "@ if ... @ esle ... statement" conditional, only the result of a conditional expression is false or null will return false, everything else will return true.
Example: No quoted string
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$a:10px;
$b:5px;
div
{
@if($a>$b)
{
display:block;
}
@else
{
display:none;
}
}
|
Translation of the CSS code is as follows:
|
1
2
3
4
|
div
{
display
:
block
;
}
|
(4) color values;
In Sass, there is a special data type, that is, "color value." Sass color values in a total of four kinds:
- (1) color value keyword, such as red;
- ( 2) Hexadecimal color value, such as # FFFF00;
- (3) RGB color values, such as rgb (255,255,0);
- (4) HSL color values, such as; hsl (360,50%, 50%);
This value is several colors can be converted to each other, the color operation Sass, we are unified into hexadecimal color values and then computing
(5) the list of values;
In the Sass, it provides us with a "list of values" data type, with this data type in JavaScript arrays are similar, we can compare it to, "Sass in the array."
There are two lists of values Sass syntax, one is separated by a comma-separated values , another one is separated by a space-separated values . E.g:
$列表名: 值1, 值2 ,...,值n;
$列表名: 值
1
值
2
... 值n;
Description:
In Sass, the list of values can contain 0, one or more values, may even further comprise a plurality of "sub-list of values." Sass in the list of values, are often used to handle CSS properties similar to the following values:
margin:10px 20px 30px 40px;
padding:10px 20px 30px 40px;
font-family
:Microsoft YaHei,Arial,Helvetica,sans-serif;
For example:
$font: Arial,Helvetica,sans-serif;
$margin:20px 40px;
$border:1px solid gray;
div
{
font:$font;
margin:$margin;
border:$border;
}
(6) Map value;
(7) null null;