什么是Sass，SCSS与它是什么关系? - Css

Sass首先是一个CSS预处理器，CSS预处理器，除了Sass外，还有Less，Stylus等等

网方解释，Sass是世界上最成熟，最稳定，最强大的专业级CSS扩展语言。

Sass官网：https://sass-lang.com/
Sass on Github: https://github.com/sass
Sass中文：https://www.sass.hk

什么是CSS预处理器？

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

通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

Sass安装

Sass是基于Ruby的，所以首先要安装Ruby(mac下自带Ruby无需在安装Ruby)
Ruby安装：https://rubyinstaller.org/downloads/

按默认选项安装就行:

检测是否安装成功

C:\Users\administrator>ruby -v
ruby 2.6.1p33 (2019-01-30 revision 66950) [x64-mingw32]

Ruby安装成功后，就可以使用gem来安装Sass了。什么是gem?简单的说，Gem是封装起来的Ruby应用程序或代码库，类似于npm用于管理nodejs的包

C:\Users\administrator>gem -v
3.0.1

gem切换安装源

//1.删除原gem源
gem sources --remove https://rubygems.org/
//2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/
//3.打印是否替换成功
gem sources -l
//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/

正式安装Sass

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass

C:\Users\administrator>gem install sass
Fetching sass-3.7.3.gem
Fetching rb-fsevent-0.10.3.gem
Fetching ffi-1.10.0-x64-mingw32.gem
Fetching rb-inotify-0.10.0.gem
Fetching sass-listen-4.0.0.gem
Successfully installed rb-fsevent-0.10.3
Successfully installed ffi-1.10.0-x64-mingw32
Successfully installed rb-inotify-0.10.0
Successfully installed sass-listen-4.0.0
Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.
* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install
* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme
* For more details, please refer to the Sass blog:
  http://sass.logdown.com/posts/7081811
Successfully installed sass-3.7.3
Parsing documentation for rb-fsevent-0.10.3
Installing ri documentation for rb-fsevent-0.10.3
Parsing documentation for ffi-1.10.0-x64-mingw32
Installing ri documentation for ffi-1.10.0-x64-mingw32
Parsing documentation for rb-inotify-0.10.0
Installing ri documentation for rb-inotify-0.10.0
Parsing documentation for sass-listen-4.0.0
Installing ri documentation for sass-listen-4.0.0
Parsing documentation for sass-3.7.3
Installing ri documentation for sass-3.7.3
Done installing documentation for rb-fsevent, ffi, rb-inotify, sass-listen, sass after 8 seconds
5 gems installed

检查Sass版本

C:\Users\administrator>sass -v
Ruby Sass 3.7.3

Sass编译

sass可以通过命令行来编译，也可以使用IDE工具的插件来编译，如在sublime、 vs code中使用插件编译。在前端工程化中，gulp,grunt,webpack等都有相就的工具来自动化编译Sass

命令行编译

//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

命令行编译配置选项
命令行编译sass有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令sass -v查看详细。我们一般常用两种—style``—sourcemap。

//编译格式
sass --watch input.scss:output.css --style compact
//编译添加调试map
sass --watch input.scss:output.css --sourcemap
//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap
//开启debug信息
sass --watch input.scss:output.css --debug-info

--style 表示解析后的css是什么排版格式;
sass内置有四种编译格式:nested expanded compact compressed。

--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

四种编译排版

//未编译样式
.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}

nested 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style nested
/*编译过后样式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }

expanded 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

compact 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style compact
/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style compressed
/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

软件编译

推荐koala
koala是一个国产免费前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

Sass与SCSS的关系?

Sass预处理器有两种语法格式：

Sass：一种缩进语法
SCSS：一种 CSS-like 语法

最开始，Sass 是Haml的一部分，Haml 是一种预处理器，由 Ruby 开发者设计和开发。因为这样，Sass 使用类似 Ruby的语法，没有花括号，没有分号，具有严格的缩进。

Sass缩进语法类似这样的：

// Variable
!primary-color= hotpink
// Mixin
=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius
.my-element
    color= !primary-color
    width= 100%
    overflow= hidden
.my-other-element
    +border-radius(5px)

你可以就看到，这和CSS代码有很大的区别！即使你是一个 Sass（预处理器）用户，你也会发现这和你正在使用的有很大的差别。变量的标志用 !，而不是$,分配符是=而不是:。非常怪异。

2010年5月，官方推出了一个全新的语法，被叫做 SCSS，意思是 Sassy CSS。这个语法带来了对 CSS 友好的语法，试图弥合 Sass 和 CSS 之间的鸿沟。

// Variable
$primary-color: hotpink;
// Mixin
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}
.my-element {
    color: $primary-color;
    width: 100%;
    overflow: hidden;
}
.my-other-element {
    @include border-radius(5px);
}

SCSS 和 Sass 相比更加贴近 CSS 语法。也就是说，Sass 维护者做了大量的工作，把缩进语法中的!和=换成了 SCSS 中的 $ 和 :。

Sass缩进语法的优劣

虽然语法看起来怪异，但是缩进语法有很多有趣的点。首先，它更短并且更易于书写。没有花括号，没有分号，你完全不需要这些东西。更好的是，你甚至不需要@mixin 或者 @include, 一个字符就足够了：= 和 +。

同时 Sass 通过严格的缩进来强制 clean coding standards。因为一个错误的缩进就会破坏整个.sass文件，这使得整个代码总是clean 和格式良好的。只有一种写 Sass 代码的方式：正确的方式。

但是请注意！缩进在 Sass 中是有意义的。当你缩进了一个元素，这意味这你将它变为了之前元素的子元素。比如:

.element-a
    color: hotpink
    .element-b
        float: left

以上会输出下面的 CSS 代码：

.element-a {
    color: hotpink;
}
.element-a .element-b {
    float: left;
}

将 .element-b 向右一格以为着它变成了 .element-a 的子元素，改变了输出 CSS 代码的结果。所以一定要小心你的代码缩进。

另外，我觉得基于缩进的语法适合于 Ruby/Python 团队，而不适合 PHP/Java 团队。（这是值得商榷的，我也希望听到不同的声音）

SCSS语法的优劣

对于初学者，SCSS 是完全和 CSS 兼容的，这意味着几乎为零的学习曲线。SCSS语法即是：它只是加了一些功能的 CSS。当你和没经验的开发者一起工作时这很重要：他们可以很快开始编码而不需要首先去学习Sass。

此外，SCSS 还是易于阅读的，因为它是有语义的，而不是用符号表示。当你读到 @mixin，你就会知道这是一个 mixin 声明；当你看到 @include ，你就是在引用一个 mixin。他并没有用任何缩写，当你大声读出来时所有的都很明了。

还有，现在几乎所有 Sass 的工具，插件和 demo 都是基于 SCSS语法来开发的。随着时间过去，SCSS 会变成大家首选的选择。比如，你现在很难找到一个 Sass 缩进语法的高亮插件，通常都只有 SCSS 的可以用。

Saas语法

变量(Variables)

将变量视为存储要在整个样式表中重用的信息的一种方法。您可以存储颜色，字体堆栈或您认为要重用的任何CSS值等内容。Sass使用$符号将某些内容变为变量。

// Sass语法
$font-stack:    Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color
// SCSS语法
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}
// 编译后的CSS
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

嵌套(Nesting)

sass允许您以符合HTML相同视觉层次结构的方式嵌套CSS选择器。请注意，过度嵌套的规则将导致过度合格的CSS，这些CSS可能难以维护，通常被认为是不好的做法。

// Sass语法
nav
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block
  a
    display: block
    padding: 6px 12px
    text-decoration: none
// SCSS语法
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
// 编译后的CSS
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

父选择器 & (Referencing Parent Selectors: &)

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译为

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译为

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

&必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

当父选择器含有不合适的后缀时，Sass 将会报错。

片断(Partials)

您可以创建包含很少CSS片段的部分Sass文件，您可以将这些片段包含在其他Sass文件中。这是模块化CSS并帮助维护事物更容易的好方法。partial只是一个以前导下划线命名的Sass文件。你可能会说它的名字_partial.scss。下划线让Sass知道该文件只是一个部分文件，不应该生成CSS文件。Sass partials与@import指令一起使用。

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

@import "colors";

上面的例子，导入的其实是 _colors.scss 文件

注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

导入(Import)

CSS有一个导入选项，可以将CSS拆分为更小，更易维护的部分。唯一的缺点是每次@import在CSS中使用它都会创建另一个HTTP请求。Sass构建在当前CSS的基础之上，@import但不需要HTTP请求，Sass将获取您要导入的文件并将其与您导入的文件合并，以便您可以将单个CSS文件提供给Web浏览器。

假设您有几个Sass文件，_reset.scss并且base.scss。我们要导入_reset.scss到base.scss。

// Sass语法
// _reset.sass
html,
body,
ul,
ol
  margin:  0
  padding: 0

// Sass语法
// base.sass
@import reset
body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

// Sass语法
// _reset.scss
html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

// 编译后的css
html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

请注意我们@import ‘reset’;在base.scss文件中使用。导入文件时，不需要包含文件扩展名.scss。Sass很聪明，会为你解决问题。

混合(Mixins)

CSS中的一些东西写起来有点乏味，特别是CSS3和存在的许多供应商前缀。mixin允许您创建要在整个站点中重用的CSS声明组。您甚至可以传入值以使您的mixin更灵活。mixin的良好用途是供应商前缀。这是一个例子transform。

要创建mixin，请使用该@mixin指令并为其命名。我们已经命名我们的mixin transform。我们也在$property括号内使用变量，因此我们可以传递任何我们想要的变换。在创建mixin之后，您可以将其用作CSS声明，@include后跟mixin的名称

// Sass语法
=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.box
  +transform(rotate(30deg))
// SCSS语法
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }
// 编译后的CSS
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

扩展/继承(Extend/Inheritance)

这是Sass最有用的功能之一。使用@extend允许您从一个选择器共享一组CSS属性到另一个选择器。它有助于保持你的Sass非常干燥。在我们的示例中，我们将使用另一个与扩展，占位符类同时进行的功能，为错误，警告和成功创建一系列简单的消息。占位符类是一种特殊类型的类，只在扩展时才会打印，并且可以帮助保持编译后的CSS整洁干净。

// Sass语法
/* This CSS will print because %message-shared is extended. */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333
// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap
.message
  @extend %message-shared
.success
  @extend %message-shared
  border-color: green
.error
  @extend %message-shared
  border-color: red
.warning
  @extend %message-shared
  border-color: yellow

// SCSS语法
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}
.message {
  @extend %message-shared;
}
.success {
  @extend %message-shared;
  border-color: green;
}
.error {
  @extend %message-shared;
  border-color: red;
}
.warning {
  @extend %message-shared;
  border-color: yellow;
}

// 编译后的CSS
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

上面的代码的告诉.message，.success，.error，和.warning表现就像%message-shared。这意味着任何地方%message-shared显示出来，.message，.success，.error，和.warning也会这样做的。神奇的事情发生在生成的CSS中，其中每个类都将获得与CSS相同的CSS属性%message-shared。这有助于您避免在HTML元素上编写多个类名。

除了Sass中的占位符类之外，您还可以扩展大多数简单的CSS选择器，但使用占位符是确保您不扩展嵌套在样式中其他位置的类的最简单方法，这可能会导致CSS中出现意外的选择器。

请注意，%equal-heights未生成CSS in ，因为%equal-heights永远不会扩展。

更多语法，请参考：
https://www.sass.hk/docs/
https://sass-lang.com/guide

参考

https://segmentfault.com/a/1190000005646206
https://www.sass.hk/install/
https://henter.me/post/ruby-rvm-gem-rake-bundle-rails.html