关于 sass 的安装使用和介绍

相信很多人在写了大量的 css 代码之后,要是没有统一的风格去编写的话,在维护起来是一件多么痛苦的是事情,很多小伙伴已经知道了 css 的预处理语言,我也不多说了,毕竟还是一个学习的人.

常用的 css 预处理语言有 scss sass less stylus,我用的多的就是 sass 和 less 了,下面就来介绍一下sass. 首先我们想要使用 sass 的话就必须安装相应的环境和插件啦.

1. 安装相应的环境

先去他们的中文档去看下教程(sass中文网), 会让安装一个ruby的东西(官网哟Ruby官网),我们选择一个适合自己版本即可

,我下载的是这个,然后接下来傻瓜式安装即可,也可以自己选择安装的目录,安装成功之后,我们可以进入到命令行进行查看,

ruby -v //就可以查看版本啦

接下来我们开始安装 sass

gem install sass

等待它安装成功就行了,因为我已经安装过了,提示的不用重复安装.去看看我们是否安装成功

sass -v

出来这个页面就说明我们安装成功了

我们接下来还要安装一个东西 Compass 和我们的sass安装很相似

gem install compass
compass -v

然后等待安装成功即可,如果出来了这个页面就说明安装成功了,

接下来我们就能够使用我们的sass啦

2. 在我们的案例中使用 sass

我们打开我们的 vscode 安装要用到的插件

第一个

在插件库中搜索 Beautify css/sass/scss/less 这个就可以点击安装

第二个搜索这个 Live Sass Compiler,点击安装

然后我们就可以创建我们的案例啦

新见两个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div>
        <p>
            我是一段红色的文字<br>
        </p>
        <span>我是单独的颜色</span>
    </div>
</body>
</html>

$gray: #aaa;
$red: red;
$span: green;
html,body {
    margin: 0;
}

div {
    border: 1px solid $gray;
    padding: 20px;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    margin-top: 100px;
    &>p {
        color: $red;
    }
    span {
        color: $span;
    }
}

然后点击

可以看到我们的文件中多了两个文件,

这两个文件是经过编译之后的文件

然后在浏览器中打开我们的案例就可以看到我们写的css代码啦

我们想要指定sass编译后的位置怎么办,在 VSCode 菜单栏依次点击“文件首选项设置”，打开 settings.json 全局配置文件。修改这个地方

"liveSassCompile.settings.formats": [
    {
        "format": "expanded" ,
        "extensionName": " .css",
        "savePath": "~/../css/"
    }
J

这样就指定了编译后的位置了

我们想在我们的项目中运行也可以直接通过 yarn 或者 npm 安装依赖包即可, 安装命令如下

npm i sass-loader node-sass -D

在 style 标签中写上这个即可

<style lang="scss"></style>