Sass的安装使用及入门

   一、安装Sass

有两种方法可以使用Sass：

1、应用

有很多应用程序将在几分钟内为Mac，Windows和Linux带来Sass功能。您可以免费下载大部分应用程序，但其中一些是付费应用程序（完全值得）

2、命令行

我们采用第二种。

视窗

在开始使用Sass之前，您将需要安装Ruby。在Windows计算机上获得Ruby的最快方法是使用Ruby Installer。这是一个一键安装程序，将为您提供超快的一切设置。

安装程序还将安装一个可以让您使用Ruby库的Ruby命令行powershell应用程序。

(1) 下载地址：http://rubyinstaller.org/

(2) 下载哪个版本？

如果您不知道要安装的版本，您开始使用Ruby，我们推荐您使用Ruby 2.2.X的安装程序。这些提供了一个稳定的语言和广泛的包兼容和更新的包（gems）。

下面列出了在 Windows 机器上安装 Ruby 的步骤:

注意：在安装时，您可能有不同的可用版本。

• Window 系统下，我们可以使用 RubyInstaller 来安装 Ruby 环境，下载地址为：请点击这里下载。
• 下载 rubyinstaller 之后，解压到新创建的目录下：
• 双击 rubyinstaller-2.2.3.exe 文件，启动 Ruby 安装向导。
• 点击 Next，继续向导，记得勾选 Add Ruby executables to your PATH，直到 Ruby 安装程序完成 Ruby 安装为止。

如果您的安装没有适当地配置环境变量，接下来您可能需要进行环境变量的配置。

• 如果您使用的是 Windows 9x，那么请在您的 c:\autoexec.bat 中添加：set PATH="D:\(ruby 安装目录)\bin;%PATH%"
• Windows NT/2000 用户需要修改注册表。
  • 点击控制面板|系统性能|环境变量。
  • 在系统变量下，选择 Path，并点击 EDIT。
  • 在变量值列表的末尾添加 Ruby 目录，并点击 OK。
  • 在系统变量下，选择 PATHEXT，并点击 EDIT。
  • 添加 .RB 和 .RBW 到变量值列表中，并点击 OK。

• 安装后，通过在命令行中输入以下命令来确保一切工作正常：

$ ruby -v
ruby 2.2.3

• 如果一切工作正常，将会输出所安装的 Ruby 解释器的版本，如上所示。如果您安装了其他版本，则会显示其他不同的版本。

通过使用命令行开始使用Sass的最快方法：

1. 打开你的终端或命令提示符。在Mac上，Terminal.app默认安装。它位于“Utilities”文件夹中。在Windows上，运行`cmd`。

2. 安装Sass。Ruby使用Gems管理其各种代码包，如Sass。在您打开的终端窗口中键入：

   gem install sass

   这将为您安装Sass和任何依赖项。这很神奇 如果您收到错误消息，那么可能需要使用该sudo命令来安装Sass宝石。它看起来像：

   sudo gem install sass
   

3. 再检查一遍。你现在应该安装Sass，但是从来不会再次仔细检查。在您的终端应用程序中，您可以键入：

   sass -v

   它应该返回Sass 3.4.22 (Selective Steve)。恭喜！您已成功安装Sass。

二、学习使用Sass

1、预处理

CSS可以很有趣，但样式表越来越大，更复杂，更难维护。这是预处理器可以帮助的地方。Sass可以让您使用CSS中不存在的功能，例如变量，嵌套，混合，继承和其他令人兴奋的好东西，使CSS再次有趣。

一旦您开始修补Sass，它将采取您的预处理的Sass文件，并将其保存为您可以在您的网站中使用的普通CSS文件。

实现这一目标的最直接的方法是在您的终端。安装Sass后，您可以sass input.scss output.css从终端运行。您可以查看单个文件或整个目录。此外，您可以使用--watch标志来观看文件夹或目录。在观看整个目录时运行Sass的示例如下所示：

sass --watch app/sass:public/stylesheets

2、变量

将变量视为存储要在整个样式表中重用的信息的一种方法。您可以存储像您想要重复使用的颜色，字体堆栈或任何CSS值。Sass使用$符号来做某事变量。以下是一个例子：

SCSS语法

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

当Sass被处理，它需要我们定义的变量$font-stack和$primary-color输出正常的CSS我们的变量值放置在CSS。当使用品牌颜色并在整个网站保持一致时，这可能非常强大。

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

2、嵌套

在编写HTML时，您可能已经注意到它具有明确的嵌套和可视化层次结构。另一方面，CSS不是。

Sass将让您以一种遵循HTML的相同视觉层次结构的方式嵌套您的CSS选择器。请注意，过度嵌套的规则将导致过高的CSS，可能难以维护，并被普遍认为是不好的做法。

考虑到这一点，以下是一些网站导航的典型样式：

• 
  
  

SCSS语法

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

你会发现ul，li和a选择嵌套在里面nav选择。这是组织CSS并使其更易于阅读的好方法。当您生成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;
}

3、部分

您可以创建包含少量CSS的部分Sass文件，您可以将其包含在其他Sass文件中。这是模块化CSS的好方法，有助于保持更容易维护。部分只是一个以领先的下划线命名的Sass文件。你可以命名一下_partial.scss。下划线让Sass知道该文件只是一个部分文件，它不应该被生成到一个CSS文件中。该@import指令使用Sass部分。

4、进口

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

比方说，你有一对夫妇的萨斯文件，_reset.scss和base.scss。我们要导入_reset.scss到base.scss。

• 
  
  

SCSS语法

// _reset.scss

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

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

注意我们@import 'reset';在base.scss文件中使用。导入文件时，不需要包含文件扩展名.scss。Sass是聪明的，会为你量出来。当你生成CSS你会得到：

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

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

5、混合

CSS中的某些东西对于编写是有点乏味，特别是使用CSS3和许多供应商前缀存在。一个mixin可以使您想要在整个站点中重用CSS组声明。你甚至可以传递价值观，使你的mixin更灵活。一个很好的使用mixin是供应商的前缀。这是一个例子border-radius。

• 
  
  

SCSS语法

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

要创建一个mixin，您可以使用该@mixin指令并给它一个名称。我们命名为mixin border-radius。我们也在$radius括号内使用变量，所以我们可以传递任何我们想要的半径。创建mixin之后，您可以使用它作为一个CSS声明，@include然后是mixin的名称。当您的CSS生成时，它将如下所示：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

6、延伸/继承

这是Sass最有用的功能之一。使用@extend可以让您从一个选择器到另一个选择器共享一组CSS属性。它有助于保持你的Sass非常干。在我们的例子中，我们将为错误，警告和成功创建一系列简单的消息传递。

• 
  
  

SCSS语法

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

什么上面的代码的作用是让你拿在CSS属性.message，并将其应用到.success，.error，和.warning。生成的CSS会产生魔法，这有助于避免在HTML元素上写入多个类名。这是它的样子：

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

7、数学运算

在你的CSS做数学是非常有帮助的。萨斯拥有标准的数学运算符，例如屈指可数+，-，*，/，和%。在我们的例子中，我们要做一些简单的数学计算一个aside＆的宽度article。



SCSS语法

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

我们创建了一个非常简单的流体网格，基于960px。在Sass中的操作让我们做一些像像素值一样的操作，并将它们转换成百分比，而不用麻烦。生成的CSS将如下所示：

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

可参考博客：http://sass.logdown.com/

可参考网址：http://sass-lang.com/documentation/file.SASS_REFERENCE.html

总结

以上就是 Sass/SCSS 最简单最基础也是最常用的入门教程，在这篇文章中我们大致上介绍了 Sass 使用语法。除了 Sass 外，目前还有许多 CSS 扩展，包括语法较易学的LESS、组件化化思考的 CSS in JS、主要解决全域问题和模块引用的CSS Modules，取经于JavaScript Task Runner的PostCSS、网格样式表单GSS等等，这些最终目的都是为了解决传统CSS维护不易、重用性低等问题。事实上，有些人觉得使用 CSS 预处理器比较容易维护，有些人认为每次都要编译很麻烦，至于要选择哪一种 CSS 预处理器 或是根本不使用，取决于团队的内部规范和讨论。俗话说后端一天，前端一年，说不定现在选边站的技术，下个月就不流行了呢。