css – 个人技术小站

Stylus 解决一下编写小程序写 css 难受的问题。不是很优雅，但是能解决问题，有语法提示也不会多打几个字，感觉还是很香的。

编译出来的结果还算理想，不用管生成的 wxss rpx 随便格式化会有空格的问题。

JetBrains 是我很喜欢的工具，下面是我 WebStorm 的配置。

https://stylus.bootcss.com/ 可以先去官网简单浏览一下，这里只是使用了一下函数和 unit() 内置函数。

安装 stylus：npm install stylus -g

在 WebStorm 设置 stylus 的自动处理

--ext .wxss 这个很关键，是定义生成文件的后缀的。要不然默认是 css 后缀。

这里推荐两个插件，对于 WebStorm 写小程序有一些帮助。

TabNine https://plugins.jetbrains.com/plugin/12798-tabnine

Wechat mini program support https://plugins.jetbrains.com/plugin/13396-wechat-mini-program-support

相关连接：

WebStorm scss 自动输出 css

WebStorm WePY 开发微信小程序简单设置

在设置中添加 scss 的配置。当然我之前安装了 gem install sass。

目前就可以在边上出现同名但是扩展名不同的文件了。

这个编译后产生的文件。

我很奇葩的遇到了。错误。加了 -E “UTF-8” 参数就好了。

/usr/local/bin/sass base.scss:base.css
ArgumentError: invalid byte sequence in US-ASCII
  Use --trace for backtrace.

Process finished with exit code 1

下面是我配置时填写的两行，就是默认值后面加了 -E “UTF-8”.

$FileName$:$FileNameWithoutExtension$.css -E "UTF-8"
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

–no-source-map 这个选项可以不生成 map

$FileName$:$FileNameWithoutExtension$.css --no-source-map

2020_03_05

我最近抹盘重装了系统。发现 npm 安装 sass 给直接就能用。之前我是 brew 安装的。
https://sass-lang.com/install