CSS、Sass、Scss，以及sass和scss的区别

CSS 指层叠样式表 (Cascading Style Sheets)

Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。 Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目，其后缀是.sass。

SCSS (Sassy CSS)，一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为 .scss。

sass和scss的关系

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。 SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。 两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。 而scss则和css的规范是一致的。

插入文件

 @import "foo.scss"; //都会导入文件 foo.scss
 @import "foo"; //都会导入文件 foo.scss
 @import "http://foo.com/bar";  // 插入外部文件
 @import "foo.css"; // 等同于css的import命令。

混合器 Mixin (避免不停地重复一段样式)

// 使用@mixin命令，定义一个代码块。
　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
    //使用@include命令，调用这个mixin。
　　div {
　　　　@include left;
　　}
　　
　　// mixin的强大之处，在于可以指定参数和缺省值。
　　@mixin left($value: 10px) {
　　    float: left;
　　    margin-right: $value;
　　}
    // 使用的时候，根据需要加入参数：
　　div {
　　　　@include left(20px);
　　}

在Sass中，我们可以使用“@for”来实现循环操作。其中，Sass中的@for循环有2种方式。

方式1：@for $i from 开始值 through 结束值

方式2：@for $i from 开始值 to 结束值

@for $i from 1 through 3
{
    .item-#{$i}
    {
        width:(20px * $i);
    }
}

编译出来的CSS代码如下：

.item-1
{
    width:20px;
}
.item-2
{
    width:40px;
}
.item-3
{
    width:60px;
}

分析：

扫描二维码关注公众号，回复： 10961804 查看本文章

如果将“@for $i from 1 through 3”改为“@for $i from 1 to 3”，则编译出来的CSS代码如下：

.item-1
{
    width:20px;
}
.item-2
{
    width:40px;
}

举例2：

@for $i from 1 through 3
{
    .border-#{$i}
    {
        border:#{$i}px solid red;
    }
}