教程目录

安装与基础使用

2022年06月14日更新

安装

yarn global add sass

# 或

npm install -g sass

确认安装成功

sass --version

看是否返回版本号，有的话，就是安装成功了。

使用

新建项目 sass 项目，里面新建 assets/css/common.scss 文件，里面添加如下代码：

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

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

在 sass 中新建 index.html，里面添加如下代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/common.css">
</head>
<body>
    <div class="wrap">
        <p>你好 Scss</p>
    </div>
</body>
</html>

编译

cd sass/assets/css

sass common.scss common.css

编译成功后，会得到css和css.map文件。

  • css文件，是你HTML代码中最终应当引用的文件
  • css.map文件，是记录scss与css之间对应关系的文件

image.png

修改 common.scss 代码：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
$bgc-color: #08c;
$height:100px;

body {
  color: $primary-color;
  background-color: $bgc-color;
}

.wrap {
  background-color: #fff;
  height: $height;
}

.wrap p {
  font-size: 18px;
}

刷新页面，你会发现新添加的样式无法生效，原因是因为我们没有手动编译它，重新编译即可。也就是说每次修改了 scss 文件后都必须要手动编译才能生效，很繁琐！

监听编译

cd sass/assets/css

sass --watch common.scss:common.css

监听编译整个目录

cd scss

sass --watch assets/css:assets/css

使用webstorm自动监听

最简单的方法，是使用WebStorm，自动监听Sass/Scss文件，这样就不用开启命令行来监听了。

image.png

image.png

每次修改Scss文件后，WebStorm 便会自动监听重新编译成新的CSS文件。

image.png

修改 common.scss 代码：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
$bgc-color: red;
$height:100px;

body {
  color: $primary-color;
  background-color: $bgc-color;
}

.wrap {
  background-color: #fff;
  height: $height;
}

.wrap p {
  font-size: 18px;
}

刷新浏览器，查看是否生效，若无效，请重启 webstrom 即可。

如果误点了No，那么在 WebStorm 的设置菜单中找到，File Watchers，里面添加监听也是一样的

image.png

在Vue中使用

使用Vui-cli构建项目的时候，选择了Sass。这里选择dart-sass或者node-sass均可。

使用时，加上lang="scss"即可

<style scoped lang="scss">
.content {
  .info {
    font-size: 14px;
  }
}
</style>

已添加到喜欢了