Sass语法介绍和使用详解 _语法

本文概述

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语法介绍和使用详解】你可以通过两种方式声明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="http://www.srcmini.com/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="http://img.readke.com/220507/0A1413002-1.jpg"> < /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