数据类型
编辑教程数据类型
数据类型是一种需要为每个数据对象声明数据类型的信息类型。 下表显示了SassScript支持的各种数据类型:
数据类型 | 描述 | 例子 |
---|---|---|
Numbers | 它表示整数类型。 | 2,10.5 |
Strings | 它是在单引号或双引号内定义的字符序列。 | 'Tutorialspoint', "Tutorialspoint" |
Colors | 它用于定义颜色值。 | red, #008000, rgb(25,255,204) |
Booleans | 它返回true或false布尔类型。 | 10 > 9 specifies true |
Nulls | 它指定空值,这是未知数据。 | if(val==null) {//statements} |
Space and Comma | 表示由空格或逗号分隔的值。 | 1px solid #eeeeee,0 0 0 1px |
Mapping | 它从一个值映射到另一个值。 | 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使用一些列表函数,如:
第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提供与在其他输出模式中键入的输出格式相同的输出格式,当颜色插入到选择器中时,这些输出格式变为无效语法。 要克服这个问题,请使用引号内的颜色名称。
Mos固件,小电视必刷固件
ES6 教程
Vue.js 教程
JSON 教程
jQuery 教程
HTML 教程
HTML 5 教程
CSS 教程
CSS3 教程
JavaScript 教程
DHTML 教程
JSON在线格式化工具
JS在线运行
JSON解析格式化
jsfiddle中国国内版本
JS代码在线运行
PHP代码在线运行
Java代码在线运行
C语言代码在线运行
C++代码在线运行
Python代码在线运行
Go语言代码在线运行
C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。
大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
![](http://cdns.jsrun.net/avatar/default.png)
选择支付方式:
![支付宝](/res/css/img/alipay.png)
![微信](/res/css/img/wxpay.png)
立即支付
![支付宝](/res/css/img/alipay.png)
¥
9.99
无法付款,请点击这里
金额: 0 元
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟