Sass 语法

Sass语法

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 lidihuo</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

Sass 语法_https://bianchenghao6.com_【SASS 教程】_第1张

它将创建一个style.css文件。现在，运行example.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 示例