淘先锋技术网

首页 1 2 3 4 5 6 7

数据类型

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

序号数据类型和描述例子
1Numbers

它表示整数类型。
2,10.5
2Strings

它是在单引号或双引号内定义的字符序列。
'Tutorialspoint', "Tutorialspoint"
3Colors

它用于定义颜色值。
red, #008000, rgb(25,255,204)
4Booleans

它返回true或false布尔类型。
10 > 9 specifies true
5Nulls

它指定空值,这是未知数据。
if(val==null) {//statements}
6Space and Comma

表示由空格或逗号分隔的值。
1px solid #eeeeee,0 0 0 1px
7Mapping

它从一个值映射到另一个值。
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="/attachments/tuploads/sass/jquery.min.js"></script>
   <script src="/attachments/tuploads/sass/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 Datatypes

列表

列表指定使用空格或逗号分隔的多个值,甚至单个值都被视为列表。

Sass使用一些列表函数,如:

  • 第n个函数:它提供了列表的特定项。

  • 连接函数:它将多个列表连接成一个。

  • 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,那么它将在压缩模式下显示为橙色颜色。Sass提供与在其他输出模式中键入的输出格式相同的输出格式,当颜色插入到选择器中时,这些输出格式变为无效语法。要克服这个问题,请使用引号内的颜色名称。