SCSS在线编译

什么是SCSS？

SCSS是一种CSS预处理器，看起来更像是加了一些功能的 CSS。

CSS常用的预处理器：SCSS、Sass、LESS

SCSS诞生于Sass之后，Sass功能强大但采用缩进语法偏诡异,SCSS在Sass上进行升级使得语法上更类似LESS ，集合LESS和Sass两者的优点， 如无历史项目遗留原因，建议直接使用SCSS。

什么是CSS预处理器

通过引入更优的复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。 重新定义了一种全新的专门的语言，再通过编译后生成CSS文件使用。 让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。

你可以通过本教程并结合 SCSS在线编译工具 http://scss.jsrun.net 学习SCSS语法。

SCSS 常用语法

SCSS 嵌套规则与属性

嵌套是使用SCSS的重要原因 大多数时候，我们并不需要完全利用到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;
}

请结合SCSS在线编译工具 http://scss.jsrun.net 进行实践练习吧。

嵌套属性

很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。 我们可以使用嵌套属性来简化编写：

font: { //注意这个地方的冒号
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

转换CSS后会是什么结果呢？请结合SCSS在线编译工具 http://scss.jsrun.net 进行实践练习吧。

SCSS语法格式 使用变量

普通变量声明后可以在全局范围内使用； 默认变量仅需在值后面加上!default 即可； 默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式是在默认变量之前重新声明下变量即可。默认变量的价值在进行组件化开发的时候会非常有用。

scss代码：

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

转换CSS后会是什么结果呢？请结合SCSS在线编译工具 进行实践练习吧。

SCSS作用域

变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标签则是为 red。

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}

转换CSS后会是什么结果呢？请结合SCSS在线编译工具 进行实践练习吧。

!global 关键字

p 标签的样式会变成 green

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}

p {
  color: $myColor;
}

转换CSS后会是什么结果呢？请结合SCSS在线编译工具 进行实践练习吧。

@import 指令

@import 指令可以让我们导入其他文件等内容。 CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

Sass @import 指令语法如下：

@import filename;

注意：包含文件时不需要指定文件后缀，SCSS 会自动添加后缀 .scss。

此外，你也可以导入 CSS 文件。

导入后我们就可以在主文件中使用导入文件等变量。

以下实例，导入 variables.scss、colors.scss 和 reset.scss 文件。

@import "variables";
@import "colors";
@import "reset";

接下来我们创建一个 reset.scss 文件：

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

然后我们在 standard.scss 文件中使用 @import 指令导入 reset.scss 文件：

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

将以上代码转换为 CSS 代码，如下所示：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Partials

如果你不希望将一个 SCSS 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 SCSS 不要将其编译到 CSS 文件。 但是，在导入语句中我们不需要添加下划线。

以下实例创建一个 _colors.scss 的文件，但是不会编译成 _colors.css 文件：

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

如果要导入该文件，则不需要使用下划线：

 @import "colors";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}

@extend 与 继承

@extend 指令表示一个选择器的样式从另一选择器继承。 如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。 以下实例中，我们创建了一个基本的按钮样式 .button-basic，接着我们定义了两个按钮样式 .button-report 与 .button-submit， 它们都继承了 .button-basic ，它们主要区别在于背景颜色与字体颜色，其他的样式都是一样的。

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

转换CSS后会是什么结果呢？请结合SCSS在线编译工具 进行实践练习吧。

使用 @extend 后，我们在 HTML 按钮标签中就不需要指定多个类 class="button-basic button-report" ， 只需要设置 class="button-report" 类就好了。 @extend 很好的体现了代码的复用。

Mixins

@mixin指令用于定义mixin。 @include指令用于在文档中包括混合。 Sass Mixins可帮助您制作要在站点上重复使用的CSS声明组。您甚至可以根据需要传递值，以使mixin更加灵活。 mixin可以存储多个值或参数，并可以调用函数以避免编写重复的代码。混合名称可以下划线和连字符互换使用。 让我们以边界半径为例。此示例指定如何在边界半径中使用mixin以便在您的网站中重复使用它。

@mixin border-radius($radius) {
 -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
     -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }

转换CSS后会是什么结果呢？请结合SCSS在线编译工具 进行实践练习吧。