srcmini本文概述
Sass支持两种语法：
SCSS语法：可以将SCSS(Sassy CSS)指定为CSS语法的扩展。这仅表示每个有效的CSS也是有效的SCSS。 SCSS使维护大型样式表变得容易。它使用扩展名” .scss”。
缩进语法：缩进语法是较旧的语法, 称为Sass。你必须使用这种语法简洁地编写CSS。它使用扩展名” .sass”。
Sass缩进语法
SASS缩进语法或SASS是基于CSS的SCSS语法的替代方法。它具有以下功能：
- 它使用缩进而不是{and}来分隔块。
- 它使用换行符代替分号(;)来分隔语句。
- 属性声明和选择器必须放在自己的行上, {and}中的语句必须放在新行上并缩进。
请参阅以下SCSS代码：
.myclass {
color= red;
font-size= 0.2em;
}该语法较旧, 因此不建议在新的Sass文件中使用。如果使用此文件, 将显示错误。
Sass的语法差异
大多数CSS和SCSS语法都与SASS兼容, 但也有一些区别。你可以在以下各节中看到差异：
1.属性语法：
你可以通过两种方式声明Sass属性：
声明类似于CSS的属性, 但不使用分号(;)。
声明一个冒号(：)作为每个属性名称的前缀。
例如：
.myclass
:color blue
:font-size 0.2em可以默认使用两种属性声明方法, 即不带分号和以属性名称开头的冒号, 但是在使用：property_syntax选项时, 应仅使用一种属性语法来指定。
2.多行选择器
在预期的语法中, 多行选择器指定你可以将选择器放在逗号后的换行符上。
请参阅以下示例：
HTML文件：example.html
<html>
<head>
<title>Multiline Selectors Example</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>
<h2>Example using Multiline Selectors</h2>
<p class="class1">Welcome to srcmini</p>
<p class="class2">A solution of all technology.</p>
</body>
</html>SCSS文件：style.scss
.class1, .class2{
color:blue;
}告诉SASS观看文件, 并在更改SASS文件时更新CSS。
用ruby打开命令提示符, 然后选择以下命令：
Sass –watch style.scss：style.css
它将创建一个style.css文件。现在, 运行example.html文件：
输出
在此示例中, 你可以看到多行选择器的使用。
@import指令
在SASS中, @ import指令可以带引号或不带引号。另一方面, 在SCSS中, 它们必须与引号一起使用。
例如：在SCSS中, @import指令可以用作：
@import "themes/blackforest";
@import "style.sass";在Sass中, 它可以写为：
@import themes/blackforest
@import fontstyle.sassMixin Directives
SASS支持指令的简写属性, 例如@mixin和@include。你可以使用=和+字符代替@mixin和@include。它需要更少的输入, 并使你的代码更简单, 更易于阅读。
例如：你可以将mixin指令编写为：
=myclass
font-size: 12px;
p
+myclass与以下内容相同：
@mixin myclass
font-size: 12px;
p
@include myclass
评论前必须登录！
注册