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中使用此语法是不推荐。如果您使用此语法将显示警告,并且将在以后的版本中删除它。一些旧的语法如下表所示。

后言

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

相关推荐
Nan_Shu_6141 小时前
Web前端面试题(2)
前端
知识分享小能手2 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队2 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光3 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5203 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
咸甜适中3 小时前
rust语言 (1.88) egui (0.32.2) 学习笔记(逐行注释)(二十八)使用图片控件显示图片
笔记·学习·rust·egui
Days20503 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端3 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿3 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉3 小时前
Vue组件化开发介绍
前端·javascript·vue.js