diff --git a/CHANGELOG.md b/CHANGELOG.md index 5696184..ccde29c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ -# 更新日志 +# 更新日志(Changed Logs) +## [1.2.0] 2019-01-05 +- 配置优化 ## [1.1.1] 2018-12-27 - 更换sass库,兼容win10 [#1](https://github.com/yutent/scss-to-css/issues/1) diff --git a/README.md b/README.md index 4f862e0..3e491f5 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # scss-to-css -> 可用于对scss文件进行简单的编译/压缩, 而不用安装各种前端工程化工具(webpack等)。 +> The easiest way to compile scss file to css without using other tools like `webpack`. And autoprefixer at the same time. [![Version](https://vsmarketplacebadge.apphb.com/version-short/yutent.scss-to-css.svg)](https://marketplace.visualstudio.com/items?itemName=yutent.scss-to-css) [![Rating](https://vsmarketplacebadge.apphb.com/rating-short/yutent.scss-to-css.svg)](https://marketplace.visualstudio.com/items?itemName=yutent.scss-to-css) @@ -7,30 +7,34 @@ [![Build Status](https://travis-ci.org/yutent/scss-to-css.svg?branch=master)](https://travis-ci.org/yutent/scss-to-css) -效果: +[README_中文](./README_ZH.md) + + +Live demo: ![demo](./demo.gif) -## 出现的契机 -> 对于小项目来说, webpack等各种工程化工具, 实在过于重, 配置又繁琐。 而且还要安装一大堆模块。 -> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个vsc的插件, 可以在scss文件保存的时候, 自动编译成css文件(存于当前目录),并且自动补全浏览器前缀。 - -## 易用性 -> 本插件只有4个配置选项,而且都是可选的。真正的开箱即用。 ->> - 是否保存后自动编译; 默认 `是` ->> - 是否补全浏览器的前缀; 默认 `是`。 非常实用的一个选项, 在不需要的情况下可以关闭, 以加快编译速度。 ->> - 编译输出类型, 默认`压缩输出`。 可以自定义, 可以同时编译输出多种格式的文件。 ->> - 忽略正则。 这个也是非常实用的功能, 毕竟现在的公司前端项目, 都使用webpack等打包工具, 这时候就可以临时停用本插件; 现在呢还有个更加方便的方式, 就是把使用了webpack的项目的目录名配置到这里, 这样插件就会自动忽略这个目录下的scss文件编译了。 +## Why Scss-to-css +> For some small project or teaching speech. It's too fat to deploy a webpack env. +> Now, `scss-to-css` help us to compile scss file to css file at a none webpack project and autoprefixer. -## 兼容性 -> 理论上, 兼容Linux/MacOS/Windows, 不过我只在Linux/MacOS下测试过, 用Windows的童鞋请自行测试,有什么问题, 可以提issue。 - -## 安装 -> 直接在商店搜索安装即可。 +## Configuration +> Some configuration can be set, which it works better for you。 +>> - `compileOnSave`: Auto compile on document saved, default `true` +>> - `autoPrefixer`: Will autoprefixer. It can be run faster when turn off. default `true` +>> - `output`: Output style. default `compressed`。 +>> - `exclude`: The RegExp of path what you can to ignore(the `var.scss file` will never be compiled)。 -## .browserslistrc 示例 -> 这只是个示例, 可自行根据项目需求, 修改配置。 没有配置则默认为 `last 2 version`。 +## Issues +> This extension work well on all os. If any problem please let me known [issue](https://github.com/yutent/scss-to-css/issues) + +## Installation +> Search `scss-to-css` and install in the marketplace. + + +## .browserslistrc DEMO +> Just for demo, you can change it by youself. If not exists, the default value will be `last 2 version`. ``` ie > 9 diff --git a/README_ZH.md b/README_ZH.md new file mode 100644 index 0000000..3bac454 --- /dev/null +++ b/README_ZH.md @@ -0,0 +1,43 @@ +# scss-to-css +> 可用于对scss文件进行简单的编译/压缩, 而不用安装各种前端工程化工具(webpack等)。 + +[![Version](https://vsmarketplacebadge.apphb.com/version-short/yutent.scss-to-css.svg)](https://marketplace.visualstudio.com/items?itemName=yutent.scss-to-css) +[![Rating](https://vsmarketplacebadge.apphb.com/rating-short/yutent.scss-to-css.svg)](https://marketplace.visualstudio.com/items?itemName=yutent.scss-to-css) +[![Installs](https://vsmarketplacebadge.apphb.com/installs/yutent.scss-to-css.svg)](https://marketplace.visualstudio.com/items?itemName=yutent.scss-to-css) +[![Build Status](https://travis-ci.org/yutent/scss-to-css.svg?branch=master)](https://travis-ci.org/yutent/scss-to-css) + + +[README_EN](./README.md) + +效果: +![demo](./demo.gif) + +## 出现的契机 +> 对于小项目来说, webpack等各种工程化工具, 实在过于重, 配置又繁琐。 而且还要安装一大堆模块。 +> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个vsc的插件, 可以在scss文件保存的时候, 自动编译成css文件(存于当前目录),并且自动补全浏览器前缀。 + +## 易用性 +> 本插件只有4个配置选项,而且都是可选的。真正的开箱即用。 +>> - 是否保存后自动编译; 默认 `是` +>> - 是否补全浏览器的前缀; 默认 `是`。 非常实用的一个选项, 在不需要的情况下可以关闭, 以加快编译速度。 +>> - 编译输出类型, 默认`压缩输出`。 可以自定义, 可以同时编译输出多种格式的文件。 +>> - 忽略正则。 这个也是非常实用的功能, 毕竟现在的公司前端项目, 都使用webpack等打包工具, 这时候就可以临时停用本插件; 现在呢还有个更加方便的方式, 就是把使用了webpack的项目的目录名配置到这里, 这样插件就会自动忽略这个目录下的scss文件编译了。 + + +## 兼容性 +> 理论上, 兼容Linux/MacOS/Windows, 不过我只在Linux/MacOS下测试过, 用Windows的童鞋请自行测试,有什么问题, 可以提issue。 + +## 安装 +> 直接在商店搜索安装即可。 + + +## .browserslistrc 示例 +> 这只是个示例, 可自行根据项目需求, 修改配置。 没有配置则默认为 `last 2 version`。 + +``` +ie > 9 +iOS > 8 +Android >= 4.4 +ff > 38 +Chrome > 38 +``` diff --git a/index.js b/index.js index ab65d0a..ad18543 100644 --- a/index.js +++ b/index.js @@ -122,6 +122,13 @@ const Compiler = { } } +function __init__() { + let conf = vsc.workspace.getConfiguration('Scss2css') + Object.assign(options, conf) + + options.output = options.output.split('|').map(it => it.trim()) +} + function activate(ctx) { let folders = vsc.workspace.workspaceFolders let wsf = '' @@ -145,18 +152,16 @@ function activate(ctx) { .toString() .split(/[\n\r]/) } - - let conf = vsc.workspace.getConfiguration('Scss2css') - Object.assign(options, conf) - - options.output = options.output.split('|').map(it => it.trim()) - prefixer = postcss().use( autoprefixer({ browsers: options.browsers }) ) + __init__() + + vsc.workspace.onDidChangeConfiguration(__init__) + vsc.workspace.onDidSaveTextDocument(doc => { Compiler.filter(doc) }) diff --git a/package.json b/package.json index ef00dbe..fbe8305 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "scss-to-css", "displayName": "scss-to-css", - "description": "🔥 最简单易用的SCSS编译器, 可自动编译scss文件及补全前缀", - "version": "1.1.1", + "description": "🔥 The easiest way to compile scss file to css. And autoprefixer at the same time.", + "version": "1.2.0", "publisher": "yutent", "author": "Yutent [@yutent]", "icon": "logo.png", @@ -36,27 +36,27 @@ ], "configuration": { "type": "object", - "title": "Scss-to-css 配置", + "title": "Scss-to-css configuration", "properties": { "Scss2css.compileOnSave": { "type": "boolean", "default": true, - "description": "保存后自动编译" + "description": "Auto compile on document saved" }, "Scss2css.autoPrefixer": { "type": "boolean", "default": true, - "description": "是否自动补全浏览器前缀(可以手动在项目根目录添加 .browserslistrc)" + "description": "will autoprefixer ?(You can add .browserslistrc file to the workspace root path)" }, "Scss2css.output": { "type": "string", "default": "compressed", - "description": "css 文件输出方式. 使用 \"nested\", \"expanded\", \"compact\" or \"compressed\" .\n PS. 如果需要同时编译多种, 可用'|' 分隔, 如 compact | compressed \n 注: 如果编译多种,会自动微调文件名, 编译单个则不微调。" + "description": "css file output style. It can be one of these [nested, expanded, compact or compressed] .\n Also can be one more styles set (split with '|'), eg. compact | compressed \n Notice: It will auto rename the result css file" }, "Scss2css.exclude": { "type": "string", "default": "", - "description": "要忽略的文件的正则表达式(默认不编译var.scss文件)。" + "description": "The RegExp of path what you can to ignore(the `var.scss file` will never be compiled)。" } } } diff --git a/test/demo.css b/test/demo.css index 775036a..31109c5 100644 --- a/test/demo.css +++ b/test/demo.css @@ -1 +1 @@ -ul{display:flex}ul li{flex:1} +ul{display:flex}ul li{flex:2;color:#fff} diff --git a/test/demo.scss b/test/demo.scss index 9b16a06..7231d5e 100644 --- a/test/demo.scss +++ b/test/demo.scss @@ -1,5 +1,5 @@ ul { display: flex; - li {flex: 1} + li {flex: 2;color: #fff;} } \ No newline at end of file