Sass 语法详细介绍

文章目录

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:Sass和Less

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

SASS缩进语法

SASS缩进语法或只是SASS是基于CSS的SCSS语法的替代。

  • 它使用缩进而不是 {和} 来分隔块。

  • 要分隔语句,它使用换行符而不是分号(;)。

  • 属性声明和选择器必须放在一行,{和}中的语句必须放在新行和缩进。

例如,考虑以下SCSS代码:

css 复制代码
.myclass {
  color= red;
  font-size= 0.2em;
}

缩进语法是一种旧的语法,不建议在新的Sass文件中使用。如果使用此文件,它将在CSS文件中显示错误,因为我们使用 = 而不是:来设置属性和变量。

使用下面的命令编译上面的代码:

css 复制代码
sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来,运行上面的命令,它将在 style.css 文件中显示错误,如下所示:

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(:)将以每个属性名称为前缀。

例如,您可以写为:

css 复制代码
.myclass
  :color red
  :font-size 0.2em

默认情况下,可以使用上述两种方法(属性声明不带分号,冒号以属性名称开头)。

多线选择器

在缩进语法中,选择器可以在逗号后出现时放在换行符上。

例子

下面的示例描述了在SCSS文件中使用多行选择器:

css 复制代码
<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

css 复制代码
.class1,
.class2{
   color:red;
}

您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:

css 复制代码
sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来执行上面的命令,它将用下面的代码自动创建 style.css 文件:

生成的 style.css 如下所示:

style.css

css 复制代码
.class1,
.class2 {
  color: red;
}

让我们执行以下步骤,看看上面的代码如何工作:

  • 在 multiline_selectors.html 文件中保存html代码。

  • 在浏览器中打开此HTML文件,将显示如下输出。

注释

注释占用整行并包围嵌套在它们下面的所有文本,它们是基于行的缩进语法。

@import

在SASS中, @import 指令可以使用/不使用引号。与SCSS不同,它们必须使用引号。

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

css 复制代码
@import "themes/blackforest";
@import "style.sass";

这可以在SASS中写为:

css 复制代码
@import themes/blackforest
@import fontstyle.sass

Mixin指令

SASS支持 @mixin 和 @include 等指令的缩写。您可以使用 = 和 + 字符替换 @mixin 和 @include 更简单,更容易阅读。

例如,您可以将mixin指令写为:

css 复制代码
=myclass
  font-size: 12px;

p
  +myclass

是相同的

css 复制代码
@mixin myclass
  font-size: 12px;

p
  @include myclass

已弃用的语法

SASS支持使用一些旧的语法。但是,在SASS中使用此语法是不推荐。如果您使用此语法将显示警告,并且将在以后的版本中删除它。一些旧的语法如下表所示。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

相关推荐
写不来代码的草莓熊21 分钟前
vue前端面试题——记录一次面试当中遇到的题(5)
前端
weixin_ab38 分钟前
【HTML分离术】
前端·html
文心快码BaiduComate1 小时前
新手该如何选择AI编程工具?文心快码Comate全方位体验
前端·后端·程序员
夫唯不争,故无尤也1 小时前
Tomcat 内嵌启动时找不到 Web 应用的路径
java·前端·tomcat
lichong9511 小时前
【Xcode】Macos p12 证书过期时间查看
前端·ide·macos·证书·xcode·大前端·大前端++
oh,huoyuyan1 小时前
如何在火语言中指定启动 Chrome 特定用户配置文件
前端·javascript·chrome
前端大聪明20021 小时前
single-spa原理解析
前端·javascript
一枚前端小能手1 小时前
📦 从npm到yarn到pnpm的演进之路 - 包管理器实现原理深度解析
前端·javascript·npm
影i1 小时前
CSS Transform 和父元素撑开问题
前端
@大迁世界2 小时前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript