使用codeKit编译scss

css yekong

wanjunshijiecom 2021-08-29 at 16.15.46

编译模式有两种

wanjunshijiecom 2021-08-29 at 16.18.48
默认使用Dart Sass就可以了。
Dart Sass和Libsass的区别

输出模式

是Scss的四种输出风格
wanjunshijiecom 2021-08-29 at 16.23.48

嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed

其他配置

wanjunshijiecom 2021-08-29 at 16.26.34@2x
emit a @charset for non-ASCII text
默认不勾选,不知道做啥用的!

编译后处理

wanjunshijiecom 2021-08-29 at 16.28.44
run Autoprefixer on the css file
用来处理CSS前缀问题的神器,浏览器兼容。
处理CSS前缀问题 AutoPrefixer

run Bless on the css file
分割ie<10的css文件

Purge Unused CSS Rules

什么是PurgeCSS?
从css中删除未使用的选择器,从而生成更小的css文件
wanjunshijiecom 2021-08-29 at 16.42.27@2x

Minify The Output With CSSO

css压缩
什么是CSSO?
wanjunshijiecom 2021-08-29 at 16.46.19@2x

Create a Source Map:

Source Map一个信息文件,里面储存着位置信息。
默认关闭
什么是Source Map?

输出

wanjunshijiecom 2021-08-29 at 16.54.08@2x

文件修改或编译时的输出操作配置

喜欢