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

相关文章

来自专栏大内老A

深入理解C# 3.x的新特性(2):Extension Method[下篇]

四、Extension Method的本质 通过上面一节的介绍,我们知道了在C#中如何去定义一个Extension Method:它是定义在一个Static c...

1839
来自专栏企鹅号快讯

使用多个Python库开发网页爬虫(一)

21CTO社区导读:在本篇文章里,我们将讨论使用Python进行网页抓取以及如何引用多个库,如Beautifusoup,Selenium库,以及JavaScri...

3626
来自专栏nimomeng的自我进阶

Swift4 新特性一览

当然,由于Session的时间限制,肯定没有把所有Swift4的特性说全。仅就列出来的这几个,我个人比较喜欢的有 XCode支持Swift的refactor,S...

772
来自专栏君赏技术博客

GB代码规范1.0

对于如果导入是UIKit类就使用UIKIT_EXTERN 如果是Founction使用关键词FOUNDATION_EXTERN

952
来自专栏程序员的SOD蜜

Why to do,What to do,Where to do 与 Lambda表达式!

最近我做一个“四象限”图表控件,其中有一个比较复杂的“坐标变换”问题,即是如何让一组数据放到有限的一个区间内,例如有一组数据 List[4,5,6,7,8],要...

2139
来自专栏游戏杂谈

使用InjectProxy、InjectMediator简化Fabrication开发

加上Fabrication自身支持的元标签,可简化一些代码,但简化后也付出了一定的代码,那就是变量需要声明为public,而之前虽然繁琐,但却可以将其声明为pr...

1193
来自专栏Jack-Cui

Python3网络爬虫(七):使用Beautiful Soup爬取小说

运行平台: Windows Python版本: Python3.x IDE: Sublime text3 一、Beautiful Soup简介    ...

3997
来自专栏吉浦迅科技

DAY17:阅读纹理内存之纹理引用API

1192
来自专栏游戏开发那些事

【Cocos2d-x游戏开发】Cocos2d-x中的数据存储技术

  数据存储和网络功能可以说是一款游戏中必不可少的功能,如果一款游戏不能保存进度那么它的可玩性必然大打折扣(试想一下,玩家辛辛苦苦玩了一整天的游戏,结果退出时告...

561
来自专栏青玉伏案

iOS开发之Masonry框架源码解析

Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁。Masonry简化了NSLay...

1878

扫码关注云+社区