Mac中配置scss简介和使用(一)—使用篇

上一篇介绍了Mac中配置scss简介和使用(一)—配置环境

这次来说说怎么把写的scss文件编译成css文件

这里不要看懂代码是什么意思就可以了。

1：创建一个scss的文件。
写了下面的代码

$blue: #1875e7;
$bgColor:#000000;

body {

}

html {
  font-size: 100px;
}

.street {
  color: $blue;
  height: 3rem;
  width: 4rem;
  background: $bgColor;
  .person {
    width: 0.44rem;
    height: 0.4rem;
    background: green;
  }
}

2：引入css文件

我们这样式写完了，就要实际使用。但是我们不能直接去引用这个scss文件

所以就要编译成css文件。

在webStorm中创建Scss文件之后，在IDE中有个提示如下

记住一定要点击 “Add watcher” 这样系统就默认监视这个文件夹，有任何变化就会自动生成对应的.css文件.
目录结构如下

如图.scss代码

$bgColor:#000000;

.street {
  width: 100px;
  height: 100px;
  background: $bgColor;
}

生产的.css代码

.street {
  width: 100px;
  height: 100px;
  background: #000000; }

/*# sourceMappingURL=testScss.css.map */

如有问题可添加我的QQ：1290925041
还可添加QQ群:234812704（洲洲哥学院）
欢迎各位一块学习，提高逼格！
也可以添加洲洲哥的微信公众号

更多消息

更多信iOS开发信息 请以关注洲洲哥 的微信公众号，不定期有干货推送：

这里写图片描述