Sass 语法格式及编译

SimpleTriangle 发布于2019-04-23 13:31 / 716人阅读

摘要：一语法格式这里说的语法是的最初语法格式，他是通过键控制缩进的一种语法规则，而且这种缩进要求非常严格。在此特别提醒新同学只能使用老语法规则缩进规则，使用的是的新语法规则，也就是语法规则类似语法格式。

一、sass语法格式

这里说的 Sass 语法是 Sass 的最初语法格式，他是通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本，其文件名以“.sass”为扩展名。
来看一个 Sass 语法格式的简单示例。假设我们有一段这样的 CSS 代码：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

现在用 Sass 的语法格式来编写：

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color$font-stack: Helve

在整个 Sass 代码中，我们没看到类似 CSS 中的大括号和分号。
注：这种语法格式对于前端人员都不太容易接受，而且容易出错。

二、SCSS语法格式

SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

同样的这段 CSS 代码：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

我们使用 SCSS 语法格式将按下面这样来书写：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

这样的语法格式对于从事前端工作的同学来说更易于接受，这也是 SCSS 为什么更被前端人员青眯的原因。

不管是 Sass 的语法格式还是 SCSS 的语法格式，他们的功能都是一样的，不同的是其书写格式和文件扩展名不同，来看一个简单的对比图：

正因为如此，有不少同学使用 Sass 新的语法规则，而文件扩展名依旧使用的是“.sass”，这也就造成血案了，编译时说编译不出来。在此特别提醒新同学：“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。

GPU云服务器云服务器 asp语法格式 java 编译及运行编译的html格式 sass

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1990.html

vue入门文章

摘要：本来想自己写一篇关于入门的文章。后面可能在这篇文章基础上，有所内容的增加。预处理器定义了一种新的专门的编程语言，编译后成正常的文件。本来想自己写一篇关于vue入门的文章。但是看到链接的文章后，觉得写得太详细了，实在有保存下来的必要。后面可能在这篇文章基础上，有所内容的增加。 CSS预处理器定义了一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏...

seanHai 2019-08-29 17:06 评论0 收藏0
sass的学习记录

摘要：核心团队不懈努力，一直使其保持领先地位。自身选择器编译成自身选择器属性嵌套编译为占位符从以后就可以定义占位选择器。将局部变量转换为全局变量可以添加声明编译为默认变量的默认变量仅需要在值后面加上即可。 sass简介 SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。世界上最成熟、最稳定、最强大的专业级CSS扩展语言！兼容C...

xuweijian 2019-08-29 14:21 评论0 收藏0
SASS

摘要：编译之后结果混合作用继承复用定义使用传参可以对混合进行传递参数，和设置默认值。占用中的位置，使用其样式内容。在模式下，进行色彩运算时，要求通明度必须保持一致，否则无法进行运算。 Sass 是一个CSS 的扩展，在语法CSS语法的基础上，增加变量，嵌套规则, 混合,导入，函数等功能对CSS进行预处理的中间语言文件格式 .sass ，.scssscss是对css的一种拓展，跟...

chanthuang 2019-08-29 11:01 评论0 收藏0
大话css预编译处理（一）通读介绍篇

摘要：使用预编译处理的优势使用预处理器，可以提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。一、什么是css预编译处理？ CSS 预编译处理，从字面上理解，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。...

Backache 2019-08-30 15:55 评论0 收藏0
webstorm 设置 sass自动编译问题

摘要：语法使用它带来的好处，就不再这里做介绍了，主要看怎么在里配置自动编译。因为国内网络的问题导致源间歇性中断因此我们需要更换源。也就是说，任何标准的样式表都是具有相同语义的有效的文件。参考文档官网设置自动编译及参数配置　　sass语法、使用它带来的好处，就不再这里做介绍了，主要看怎么在webstorm里配置自动编译。　　sass编译是需要Ruby环境的，可以到这里去下载 : https:/...

APICloud 2019-04-23 13:13 评论0 收藏0