初体验Sass

提示

sass是css预处理语言，scss 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.sass两种。

SASS 版本 3.0 之前的后缀名为.sass，而版本 3.0 之后的后缀名.scss。

下面我为方便区分，名字统一叫做sass，文件后缀统一为.scss，不要刻意去区分sass和scss。

我们写了这么久的代码，每次写页面都需要配合CSS，CSS里面重复代码其实很多，包含通配颜色值、容器大小等。那我们能否使用JavaScript声明变量的方式解决这些问题呢？原本的CSS当然是不支持的，但是有其他方案，他就是 sass！！！

sass 世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言！

为什么使用 sass？

CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且代码也不方便维护。sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

sass 优点

sass 是一个 CSS 预处理器

sass 完全兼容所有版本的 CSS

sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性

Sass 环境搭建

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac 下自带 Ruby 无需再安装 Ruby!）

安装 Ruby

Ruby 下载地址：https://rubyinstaller.org/downloads/

看到下面的窗口，就代表着安装成功了，此时关闭即可

安装完成后需测试安装有没有成功,运行 CMD 输入以下命令：

ruby -v

RubyGems

RubyGems 类似 Nodejs 中的 npm

RubyGems 一直以来在国内都非常难访问到，我们需要将他的源替换国内的

// 删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

// 打印是否替换成功
gem sources -l
// https://gems.ruby-china.com/

sass 安装

Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass

// 安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass
// 检测是否安装成功
sass -v     // Ruby Sass 3.7.4
compass -v // Compass 1.0.3

编译 Sass

sass编译有很多种方式，如命令行编译模式、编译软件koala 、工程化工具webpack等

为什么要编译 sass

浏览器不支持解析 sass，需要把 sass 文件编译为浏览器可解析执行的 sass 文件

编写 Sass 代码

Sass 文件的后缀名为.scss

/* style.scss */
.box {
  width: 300px;
  height: 400px;

  &-title {
    height: 30px;
    line-height: 30px;
  }
}

命令行编译

sass style.scss style.css

效果展示

<div class="container">
  <div class="content">
    <div class="left">1</div>
    <div class="center">2</div>
    <div class="right">3</div>
  </div>
</div>

.container {
  background-color: red;
  .content {
    display: flex;
    justify-content: space-between;
    @mixin borderColor($color) {
      color: $color;
    }
    .left {
      @include borderColor(green);
    }
    .center {
      @include borderColor(pink);
    }
    .right {
      @include borderColor(blue);
    }
  }
}

轻松一刻 🎧

音乐

音乐

视频教程 🎥

A video

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。