在本章中,我们将学习SASS 语法。SASS支持两种语法,即 SCSS 和缩进语法。
SCSS(Sassy CSS)是CSS语法的扩展。这意味着每个有效的CSS也是一个有效的SCSS。SCSS更容易维护大型样式表,并且可以识别供应商特定的语法和许多CSS。SCSS文件使用扩展名 .scss 。
缩进 - 这是较旧的语法,有时仅称为 Sass 。使用这种形式的语法,可以简洁地编写CSS。SASS文件使用扩展名 .sass 。
SASS缩进语法或只是SASS是基于CSS的SCSS语法的替代。
它使用缩进而不是 {和} 来分隔块。
要分隔语句,它使用换行符而不是分号(;)。
属性声明和选择器必须放在一行,{和}中的语句必须放在新行和缩进。
例如,考虑以下SCSS代码:
.myclass { color= red; font-size= 0.2em; }
缩进语法是一种旧的语法,不建议在新的Sass文件中使用。如果使用此文件,它将在CSS文件中显示错误,因为我们使用 = 而不是:来设置属性和变量。
使用下面的命令编译上面的代码:
sass --watch C:rubylibsassstyle.scss:style.css
接下来,运行上面的命令,它将在 style.css 文件中显示错误,如下所示:
Error: Invalid CSS after " color= red": expected "{", was ";" on line 2 of C:rubylibsassstyle17.scss 1: .myclass { 2: color= red; 3: font-size= 0.2em; 4: }
大多数CSS和SCSS语法在SASS中工作完美。但是,有一些差异,在以下部分中解释:
CSS属性可以通过两种方式声明:
属性可以声明为类似于CSS但没有分号(;)。
colon(:)将以每个属性名称为前缀。
例如,您可以写为:
.myclass :color red :font-size 0.2em
默认情况下,可以使用上述两种方法(属性声明不带分号,冒号以属性名称开头)。 但是,在使用 “>:property_syntax 选项。
在缩进语法中,选择器可以在逗号后出现时放在换行符上。
下面的示例描述了在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 扩展名。
.class1, .class2{ color:red; }
您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:
sass --watch C:rubylibsassstyle.scss:style.css
接下来执行上面的命令,它将用下面的代码自动创建 style.css 文件:
生成的 style.css 如下所示:
.class1, .class2 { color: red; }
让我们执行以下步骤,看看上面的代码如何工作:
在 multiline_selectors.html 文件中保存html代码。
在浏览器中打开此HTML文件,将显示如下输出。
注释占用整行并包围嵌套在它们下面的所有文本,它们是基于行的缩进语法。 有关评论的详细信息,请参阅此链接。
在SASS中, @import 指令可以使用/不使用引号。与SCSS不同,它们必须使用引号。
例如,在SCSS中, @import 指令可以用作:
@import "themes/blackforest"; @import "style.sass";
这可以在SASS中写为:
@import themes/blackforest @import fontstyle.sass
SASS支持 @mixin 和 @include 等指令的缩写。您可以使用 = 和 + 字符替换 @mixin 和 @include 更简单,更容易阅读。
例如,您可以将mixin指令写为:
=myclass font-size: 12px; p +myclass
是相同的
@mixin myclass font-size: 12px; p @include myclass
SASS支持使用一些旧的语法。但是,在SASS中使用此语法是不推荐。如果您使用此语法将显示警告,并且将在以后的版本中删除它。一些旧的语法如下表所示。
序号 | 运算符和描述 |
1 | = 它用于代替:将变量和属性设置为SassScript的值。 |
2 | || = 它被用来代替:每当你分配一个变量的默认值。 |
3 | ! 而不是$,! 被用作可变前缀。 当使用函数而不是$时,函数不会改变。 |
描述在选择器排序更改时,将选择器预留到继承(父)选择器很有用。 这是通过在选择器之后放置&。 例如,当您使用Modernizer时,...
CSS3引入了几个新的文本属性,我们可以使用文本样式。CSS3文本阴影在CSS3中,我们可以使用 text-shadow 属性将阴影应用于文本。 ...
都说用 DIV+CSS 布局来设计网站便于优化,容易被收录,那么你对 DIV+CSS 布局的用法是否了解?CSS 布局是网页html通过 DIV 标签 ...
footer 标签一般用于网页的底部布局,表示页脚,包含与文档相关的信息。实例文档的页脚:footer pPosted by: Hege Refsnes/p pti...
HTML tbody 标签char 属性用来指定 tbody 标签内的元素该以哪个字符对齐,请参考下述例子:实例把 tbody 元素中的内容与字符 "."...
HTML style 标签通过 type 属性设置HTML样式表的 MIME 类型,请参考下述示例:实例在 style 标签中使用 type 属性:style type="...
HTML5 新的表单元素HTML5 有以下新的表单元素:datalistkeygenoutput注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以...
HTMLbig标签 -HTML5 不支持实例让文本比常规的字体大一号:!DOCTYPE htmlhtmlheadmetacharset="utf-8"title编程狮(.cn)/title/he...