个性化阅读
专注于IT技术分析

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

Sass语法1

它将创建一个style.css文件。现在, 运行example.html文件:

输出

Sass语法2

在此示例中, 你可以看到多行选择器的使用。

@import指令

在SASS中, @ import指令可以带引号或不带引号。另一方面, 在SCSS中, 它们必须与引号一起使用。

例如:在SCSS中, @import指令可以用作:

@import "themes/blackforest";
@import "style.sass";

在Sass中, 它可以写为:

@import themes/blackforest
@import fontstyle.sass

Mixin Directives

SASS支持指令的简写属性, 例如@mixin和@include。你可以使用=和+字符代替@mixin和@include。它需要更少的输入, 并使你的代码更简单, 更易于阅读。

例如:你可以将mixin指令编写为:

=myclass
  font-size: 12px;
p
  +myclass

与以下内容相同:

@mixin myclass
  font-size: 12px;
p
  @include myclass
赞(0) 打赏
未经允许不得转载:srcmini » Sass语法介绍和使用详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏