一、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 语法格式)。

Sass 语法格式及编译的更多相关文章

  1. Sass简介,安装环境,Sass的语法格式及编译调试

    什么是 CSS 预处理器? 定义:CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进 ...

  2. Sass入门——简介+语法格式及编译调试

    本文来自慕课网大漠. Sass简介 Sass和SCSS区别 1.后缀名不同,很好理解 2.Sass以严格的缩进语法规则书写,不带大括号和分号:而SCSS的语法规则和CSS的语法很类似. Sass: $ ...

  3. SCSS语法格式及编译调试

    一.SASS编译 Sass 的编译有多种方法: 命令编译 GUI工具编译 自动化编译 1.1 命令编译 1)单文件编译 sass <要编译的Sass文件路径>/style.scss:< ...

  4. 1-3 Sass 语法、编译、调试

    Sass 语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格.另外其不带有任何的分号和大括号.常常把这种格式称为 Sa ...

  5. SASS语法备忘

    sass语法 关于sass 3.3.0更新说明——3.3.0 sublime相关插件为:scss语法高亮,sass语法高亮,编译,保存即编译,格式化 文件后缀名 sass有两种后缀名文件:一种后缀名为 ...

  6. 1.sass的安装,编译,还有风格

    1.安装sass 1.安装ruby 因为sass是用ruby语言写的,所以需要安装ruby环境 打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径 [x] Add Ruby executab ...

  7. 项目开发---使用node.js中sass语法

    前言:本文中所有sass文件都指后缀名为scss的文件.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. 一.sass插件的安装: gulp-sass-china //  ...

  8. SASS:sass语法参照列表及教程

    http://sass-lang.com/documentation/file.SASS_REFERENCE.html 保存一下,上面的链接包括了scss中所有语法规则. 转载自:http://www ...

  9. Lambda表达式的语法格式

    Lambda表达式的语法格式: 参数列表 => 语句或语句块 “Lambda表达式”是委托的实现方法,所以必须遵循以下规则: 1)“Lambda表达式”的参数数量必须和“委托”的参数数量相同: ...

随机推荐

  1. MAC环境下idea:maven+Spring+Dubbo+Zookeeper简单工程搭建

    : 一:安装软件:tomcatZookeeperDubbo+admin 二:工程: 总工程  API    Pom.xml:不用引用任何东西  Provider    Pom.xml:要denpend ...

  2. python pd.read_csv/pd.read_table参数详解

  3. javascrip基础学习

    JS是一种解释性脚本语言,在网页开发用经常用到(HTML CSS),用于控制网页的行为.现在RTT的柿饼UI也是用JS来开发的,所以很有必要学习一下. 注释:// ./*  */ 语句分行: 折行\ ...

  4. (转) tcpdump参数解析及使用详解

    tcpdump介绍 原文:http://blog.csdn.net/hzhsan/article/details/43445787 tcpdump 是一个运行在命令行下的抓包工具.它允许用户拦截和显示 ...

  5. 封装RateLimiter 令牌桶算法

    自定义注解封装RateLimiter.实例: @RequestMapping("/myOrder") @ExtRateLimiter(value = 10.0, timeOut = ...

  6. CI模板中php脚本的使用

    今天偶然发现,在CI的模板中能够直接使用CI自带的函数,并且可以直接调用controller里面的属性.案例: 控制器: public function test(){ $this->a = ' ...

  7. C# winform文件批量转编码 选择文件夹

    C# winform文件批量转编码 选择文件夹 打开指定目录 private void btnFile_Click(object sender, EventArgs e) { OpenFileDial ...

  8. JavaScript new 操作符 OOP(一)

    什么是对象    对象是单个实物的抽象,通常需要一个模板,表示某一类实物的共同特征,然后对象根据这个模板生成. 对象是一个容器,封装了属性(property)和方法(method),属性是对象的状态, ...

  9. cf914F. Substrings in a String(bitset 字符串匹配)

    题意 题目链接 Sol Orz jry 和上一个题一个思路吧,直接bitset乱搞,不同的是这次有了修改操作 因为每次修改只会改两个位置,直接暴力改就好了 #include<bits/stdc+ ...

  10. python反爬之懒加载

    # 在平时的爬虫中,如果遇到没有局部刷新,没有字体加密,右键检查也能看到清晰的数据,但是按照已经制定好的解析规则进行解析时,会返回空数据,这是为什么呢,这时可以在网页右键查看一下网页源代码,可以发现, ...