Sass - 数据类型

数据类型

数据类型是一种信息类型，需要为每个数据对象声明数据类型。下表显示了 SassScript 支持的各种数据类型：

序号	数据类型和描述	示例
1	数字表示整数类型。	2, 10.5
2	字符串是用单引号或双引号定义的字符序列。	'Tutorialspoint', "Tutorialspoint"
3	颜色用于定义颜色值。	red, #008000, rgb(25,255,204)
4	布尔值返回 true 或 false 布尔类型。	10 > 9 表示 true
5	空值指定未知数据的空值。	if(val==null) {//语句}
6	空格和逗号表示用空格或逗号分隔的值。	1px solid #eeeeee, 0 0 0 1px
7	映射它将一个值映射到另一个值。	FirsyKey: frstvalue, SecondKey: secvalue

字符串

字符串是一系列字符，用单引号或双引号表示。使用#{ }插值（一种在选择器中使用变量的方法），用单引号或双引号定义的字符串将显示为无引号的字符串值。

示例

下面的示例演示了在 SCSS 文件中使用字符串：

<html>
   <head>
      <title>Strings</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">
         <h2>Example using Strings</h2>
         <p class = "tutorialspoint">Sass is an extension of CSS that adds power and elegance to the basic language.</p>
      </div>
   </body>
</html>

接下来，创建文件style.scss。

style.scss

$name: "tutorialspoint";

p.#{$name} {
   color: blue;
}

您可以告诉 Sass 监视文件并在 Sass 文件更改时更新 CSS，方法是使用以下命令：

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来，执行上述命令；它将自动创建包含以下代码的style.css文件：

style.css

p.tutorialspoint {
   color: blue;
}

输出

让我们执行以下步骤来查看上述代码的工作方式：

将上述 HTML 代码保存在strings.html文件中。
在浏览器中打开此 HTML 文件，将显示如下所示的输出。

列表

列表指定多个用空格或逗号分隔的值。即使是单个值也被视为列表。

Sass 使用一些列表函数，例如：

nth 函数 - 提供列表的特定项。
join 函数 - 将多个列表连接成一个。
append 函数 - 将项目附加到列表的另一端。
@each 指令 - 为列表中的每个项目提供样式。

例如，假设有两种类型的列表；第一个列表包含以下用逗号分隔的值。

10px 11px, 15px 16px

如果内部列表和外部列表具有相同的分隔符，则可以使用括号来指定两个列表的起始和结束位置。您可以按如下所示指定这些列表：

{10px 11px} {15px 16px}

映射

映射是键和值的组合，其中键用于表示值。映射将值定义为组，并且可以动态访问。您可以编写映射表达式为：

$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);

它使用一些函数，例如：

map-get - 提供映射的值。
map-merge - 向映射添加值。
@each 指令 - 为映射中的键/值对指定样式。

映射表示空键/值对为( )，没有任何元素，并使用inspect ($value)函数显示映射的输出。

颜色

它用于定义 SassScript 颜色值。例如，如果您使用颜色代码#ffa500，则它将在压缩模式下显示为orange颜色。Sass 在其他输出模式下提供与键入相同的输出格式，当颜色被插入到选择器中时，这将成为无效的语法。为了克服这个问题，请在引号内使用颜色名称。

sass_script.htm

打印页面