前言
hello world欢迎来到前端的新世界
😜当前文章系列专栏：Sass和Less
🐱👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力
SASS缩进语法
SASS缩进语法或只是SASS是基于CSS的SCSS语法的替代。
- 它使用缩进而不是 {和} 来分隔块。
- 要分隔语句，它使用换行符而不是分号（;）。
- 属性声明和选择器必须放在一行，{和}中的语句必须放在新行和缩进。
例如，考虑以下SCSS代码:
.myclass { color= red; font-size= 0.2em; }
缩进语法是一种旧的语法，不建议在新的Sass文件中使用。如果使用此文件，它将在CSS文件中显示错误，因为我们使用 = 而不是:来设置属性和变量。
使用下面的命令编译上面的代码:
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来，运行上面的命令，它将在 style.css 文件中显示错误，如下所示:
Error: Invalid CSS after " color= red": expected "{", was ";" on line 2 of C:\ruby\lib\sass\style17.scss 1: .myclass { 2: color= red; 3: font-size= 0.2em; 4: }
SASS的语法差异
大多数CSS和SCSS语法在SASS中工作完美。但是，有一些差异，在以下部分中解释:
属性语法
CSS属性可以通过两种方式声明:
- 属性可以声明为类似于CSS但没有分号（;）。
- colon（:）将以每个属性名称为前缀。
例如，您可以写为:
.myclass :color red :font-size 0.2em
默认情况下，可以使用上述两种方法（属性声明不带分号，冒号以属性名称开头）。
多线选择器
在缩进语法中，选择器可以在逗号后出现时放在换行符上。
例子
下面的示例描述了在SCSS文件中使用多行选择器:
<html> <head> <title>Multiline Selectors</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> <h2>Example using Multiline Selectors</h2> <p class="class1">Welcome to Tutorialspoint!!!</p> <p class="class2">SASS stands for Syntactically Awesome Stylesheet...</p> </body> </html>
接下来，创建文件 style.scss。 请注意 .scss 扩展名。
style.scss
.class1, .class2{ color:red; }
您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下来执行上面的命令，它将用下面的代码自动创建 style.css 文件:
生成的 style.css 如下所示:
style.css
.class1, .class2 { color: red; }
让我们执行以下步骤，看看上面的代码如何工作:
- 在 multiline_selectors.html 文件中保存html代码。
- 在浏览器中打开此HTML文件，将显示如下输出。
注释
注释占用整行并包围嵌套在它们下面的所有文本，它们是基于行的缩进语法。
@import
在SASS中， @import 指令可以使用/不使用引号。与SCSS不同，它们必须使用引号。
例如，在SCSS中， @import 指令可以用作:
@import "themes/blackforest"; @import "style.sass";
这可以在SASS中写为:
@import themes/blackforest @import fontstyle.sass
Mixin指令
SASS支持 @mixin 和 @include 等指令的缩写。您可以使用 = 和 + 字符替换 @mixin 和 @include 更简单，更容易阅读。
例如，您可以将mixin指令写为:
=myclass font-size: 12px; p +myclass
是相同的
@mixin myclass font-size: 12px; p @include myclass
已弃用的语法
SASS支持使用一些旧的语法。但是，在SASS中使用此语法是不推荐。如果您使用此语法将显示警告，并且将在以后的版本中删除它。一些旧的语法如下表所示。
后言
创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力
