专栏首页进击的君君的前端之路Sass/SCSS 和纯 CSS 写法的差别

Sass/SCSS 和纯 CSS 写法的差别

Sass 和 CSS 写法有差别:

Sass 和 CSS 写法的确存在一定的差异,由于 Sass 是基于 Ruby 写出来,所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号,其主要是依靠严格的缩进方式来控制的。如:

Sass写法:

body
  color: #fff
  background: #f36

而在 CSS 我们是这样书写:

body{
  color:#fff;
  background:#f36;
}

SCSS 和 CSS 写法无差别:

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 和 CSS 写法无差别,这也是 Sass 后来越来越受大众喜欢原因之一。简单点说,把你现有的“.css”文件直接修改成“.scss”即可使用。

不管是 Sass 的语法格式还是 SCSS 的语法格式,他们的功能都是一样的,不同的是其书写格式和文件扩展名不同。

正因为如此,当使用 Sass 新的语法规则,而文件扩展名依旧使用的是“.sass”,这也就造成血案了,编译时说编译不出来。在此需要特别注意的是:“.sass”只能使用 Sass 老语法规则(缩进规则),“.scss”使用的是 Sass 的新语法规则,也就是 SCSS 语法规则(类似 CSS 语法格式)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 什么是Sass

    小胖
  • Sass 和 SCSS 有什么区别?

    小胖
  • 关于浮动

    小胖
  • bash 中冷门但非常有用的命令: trap

    trap 属于bash的内置命令,所以查看帮助用: help trap, 如果用”man trap“则会跳出bash的帮助文档; trap命令的作用是:对捕获...

    qsjs
  • 代码审计|禅道7.3SQL注入复现

    上周的zentaopms漏洞复现你们觉得还OK吗? 斗哥想要的是一个肯定。 如果你们觉得意犹未尽, 本期将进入, 代码审计的小练习。 Zentaopms v7....

    漏斗社区
  • 使用Angular rxjs打印鼠标点击事件的x坐标之和

    Jerry Wang
  • 算法篇-python排序算法-2

    让指定的元素归位,就是放到它应该放的位置(左边元素比它小,右边元素比他大),然后对每个元素归位,完成排序。

    小团子
  • Mysql读写分离方案-Amoeba环境部署记录

    Mysql的读写分离可以使用MySQL Proxy,也可以使用Amoeba。Amoeba(变形虫)项目是一个类似MySQL Proxy的分布式数据库中间代理层软...

    洗尽了浮华
  • Spring和RabbitMQ消息队列(AMQP)整合详解

    消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成。通过提供消息传递和消息排队模型,它可以在分布式环境下扩展进程间...

    品茗IT
  • LNMP架构应用实战——Nginx配置虚拟主机

    前面介绍了nginx服务的安装与配置文件,今天介绍下它的另一种实用配置——“虚拟主机”,每个虚拟主机可以是一个独立的网站,可以具有独立的域名,同...

    民工哥

扫码关注云+社区

领取腾讯云代金券