Scss和sass的学习前的准备

官网地址： https://www.sass.hk/

我选择官方推荐最简单方案，最靠谱那个方案。

方案：写一个scss文件,实时编译生成一个css文件，一个html引进去再开个服务，浏览器中看的见写的效果。

这样子后就可以继续学习了。否则看不到效果一切白搭。

首先安装个Visual Studio Code 下载地址 https://code.visualstudio.com/

Visual Studio Code 现在也是前端流行编辑器。

Live Sass Compiler

安装成功后

然后把下边这段配置放上去

"liveSassCompile.settings.formats":[
        // 扩展
        {
            "format": "compact",//可定制的出口CSS样式（expanded，compact，compressed，nested）
            "extensionName": ".min.css",//编译后缀名
            "savePath": null//编译保存的路径
        } 
        
    ],

    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
     ]

接下来新建个文件夹，然后在里边新建一个html 文件 scss文件（看我箭头指的，忽略其他文件）

在vscode中按下F1 搜索 Live Sass: Watch Sass

点击之后

控制台显示

此时你刚才新建的文件夹内多了个 .css的文件

去你新建的html里引入这个css文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试sass</title>
  <link rel="stylesheet" href="test.min.css">
</head>
<body>
  <div id="app">
    <h1>学习sass</h1>
  </div>
</body>
</html>

在test.scss中先写个简单的

body {
  background: blue;
}

接下来就是起个服务在浏览器里看了。

点开你的html文件在文件上右键

然后浏览器就被打开了。

看看是不是瓦蓝瓦蓝的。。。

生效了。。

接下来就可以安心看文档测试了。

Army-海军

原创文章 112 获赞 173 访问量 4万+

关注私信

Scss和sass的学习前的准备

方案：写一个scss文件,实时编译生成一个css文件，一个html引进去再开个服务，浏览器中看的见写的效果。

猜你喜欢