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 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

使用Sublime Text编辑器 你所不知道的11个秘密

3067
来自专栏子勰随笔

iMac上Android Studio 的一些设置

2706
来自专栏Danny的专栏

机房收费系统(VB.NET)——超详细的报表制作过程

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

1843
来自专栏从零开始学自动化测试

Selenium2+python自动化63-二次封装(click/send_kesy)

前言 我们学了显示等待后,就不需要sleep了,然后查找元素方法用参数化去定位,这样定位方法更灵活了,但是这样写起来代码会很长了,于是问题来了,总不能每次定位一...

3805
来自专栏州的先生

Python爬虫入门实战七:使用Selenium--以抓取QQ空间好友说说为例

1203
来自专栏更流畅、简洁的软件开发方式

【开源】QuickPager ASP.NET2.0分页控件——使用示例、基本应用和查询功能

    myPage分页控件发出来之后,虽然开源了,但是没有给一个简单一点的 demo,真是漏掉了一个很重要的部分。     先说明一下使用myPage分页...

22110
来自专栏進无尽的文章

扒虫篇-Bug日志Ⅴ

解决方法:首先这个警告不会造成上传失败,也不会造成审核被拒。其次可以通过移除代码中警告的那些代码,并移除多余不使用的系统类库(framework),使警告消失。

1201
来自专栏Jerry的SAP技术分享

使用ABAP和JavaScript代码生成PDF文件的几种方式

详细步骤参考我的博客Convert word document into PDF via Adobe Livecycle Enterprise service

3648
来自专栏lonelydawn的前端猿区

打造炫酷的通知插件EasyToaster

引用 <link rel="stylesheet" type="text/css" href="./index.css"> <div id="slider"><...

3609
来自专栏极客猴

Django 学习笔记之表单

本文是自己 Django 学习笔记系列中第 8 篇,算是基础知识篇章中最后一篇笔记。后续的笔记内容会相对比较综合。所以建议大家要把前面的内容,包括本篇笔记掌握。...

1033

扫码关注云+社区