parent
64ae364fb5
commit
d823c08a0a
|
@ -1,5 +1,7 @@
|
||||||
# 更新日志
|
# 更新日志(Changed Logs)
|
||||||
|
|
||||||
|
## [1.2.0] 2019-01-05
|
||||||
|
- 配置优化
|
||||||
|
|
||||||
## [1.1.1] 2018-12-27
|
## [1.1.1] 2018-12-27
|
||||||
- 更换sass库,兼容win10 [#1](https://github.com/yutent/scss-to-css/issues/1)
|
- 更换sass库,兼容win10 [#1](https://github.com/yutent/scss-to-css/issues/1)
|
||||||
|
|
42
README.md
42
README.md
|
@ -1,5 +1,5 @@
|
||||||
# scss-to-css
|
# 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)
|
[![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)
|
[![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)
|
[![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)
|
![demo](./demo.gif)
|
||||||
|
|
||||||
## 出现的契机
|
## Why Scss-to-css
|
||||||
> 对于小项目来说, webpack等各种工程化工具, 实在过于重, 配置又繁琐。 而且还要安装一大堆模块。
|
> For some small project or teaching speech. It's too fat to deploy a webpack env.
|
||||||
> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个vsc的插件, 可以在scss文件保存的时候, 自动编译成css文件(存于当前目录),并且自动补全浏览器前缀。
|
> Now, `scss-to-css` help us to compile scss file to css file at a none webpack project and autoprefixer.
|
||||||
|
|
||||||
## 易用性
|
|
||||||
> 本插件只有4个配置选项,而且都是可选的。真正的开箱即用。
|
|
||||||
>> - 是否保存后自动编译; 默认 `是`
|
|
||||||
>> - 是否补全浏览器的前缀; 默认 `是`。 非常实用的一个选项, 在不需要的情况下可以关闭, 以加快编译速度。
|
|
||||||
>> - 编译输出类型, 默认`压缩输出`。 可以自定义, 可以同时编译输出多种格式的文件。
|
|
||||||
>> - 忽略正则。 这个也是非常实用的功能, 毕竟现在的公司前端项目, 都使用webpack等打包工具, 这时候就可以临时停用本插件; 现在呢还有个更加方便的方式, 就是把使用了webpack的项目的目录名配置到这里, 这样插件就会自动忽略这个目录下的scss文件编译了。
|
|
||||||
|
|
||||||
|
|
||||||
## 兼容性
|
## Configuration
|
||||||
> 理论上, 兼容Linux/MacOS/Windows, 不过我只在Linux/MacOS下测试过, 用Windows的童鞋请自行测试,有什么问题, 可以提issue。
|
> 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 示例
|
## Issues
|
||||||
> 这只是个示例, 可自行根据项目需求, 修改配置。 没有配置则默认为 `last 2 version`。
|
> 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
|
ie > 9
|
||||||
|
|
|
@ -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
|
||||||
|
```
|
17
index.js
17
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) {
|
function activate(ctx) {
|
||||||
let folders = vsc.workspace.workspaceFolders
|
let folders = vsc.workspace.workspaceFolders
|
||||||
let wsf = ''
|
let wsf = ''
|
||||||
|
@ -145,18 +152,16 @@ function activate(ctx) {
|
||||||
.toString()
|
.toString()
|
||||||
.split(/[\n\r]/)
|
.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(
|
prefixer = postcss().use(
|
||||||
autoprefixer({
|
autoprefixer({
|
||||||
browsers: options.browsers
|
browsers: options.browsers
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
|
||||||
|
__init__()
|
||||||
|
|
||||||
|
vsc.workspace.onDidChangeConfiguration(__init__)
|
||||||
|
|
||||||
vsc.workspace.onDidSaveTextDocument(doc => {
|
vsc.workspace.onDidSaveTextDocument(doc => {
|
||||||
Compiler.filter(doc)
|
Compiler.filter(doc)
|
||||||
})
|
})
|
||||||
|
|
14
package.json
14
package.json
|
@ -1,8 +1,8 @@
|
||||||
{
|
{
|
||||||
"name": "scss-to-css",
|
"name": "scss-to-css",
|
||||||
"displayName": "scss-to-css",
|
"displayName": "scss-to-css",
|
||||||
"description": "🔥 最简单易用的SCSS编译器, 可自动编译scss文件及补全前缀",
|
"description": "🔥 The easiest way to compile scss file to css. And autoprefixer at the same time.",
|
||||||
"version": "1.1.1",
|
"version": "1.2.0",
|
||||||
"publisher": "yutent",
|
"publisher": "yutent",
|
||||||
"author": "Yutent [@yutent]",
|
"author": "Yutent [@yutent]",
|
||||||
"icon": "logo.png",
|
"icon": "logo.png",
|
||||||
|
@ -36,27 +36,27 @@
|
||||||
],
|
],
|
||||||
"configuration": {
|
"configuration": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"title": "Scss-to-css 配置",
|
"title": "Scss-to-css configuration",
|
||||||
"properties": {
|
"properties": {
|
||||||
"Scss2css.compileOnSave": {
|
"Scss2css.compileOnSave": {
|
||||||
"type": "boolean",
|
"type": "boolean",
|
||||||
"default": true,
|
"default": true,
|
||||||
"description": "保存后自动编译"
|
"description": "Auto compile on document saved"
|
||||||
},
|
},
|
||||||
"Scss2css.autoPrefixer": {
|
"Scss2css.autoPrefixer": {
|
||||||
"type": "boolean",
|
"type": "boolean",
|
||||||
"default": true,
|
"default": true,
|
||||||
"description": "是否自动补全浏览器前缀(可以手动在项目根目录添加 .browserslistrc)"
|
"description": "will autoprefixer ?(You can add .browserslistrc file to the workspace root path)"
|
||||||
},
|
},
|
||||||
"Scss2css.output": {
|
"Scss2css.output": {
|
||||||
"type": "string",
|
"type": "string",
|
||||||
"default": "compressed",
|
"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": {
|
"Scss2css.exclude": {
|
||||||
"type": "string",
|
"type": "string",
|
||||||
"default": "",
|
"default": "",
|
||||||
"description": "要忽略的文件的正则表达式(默认不编译var.scss文件)。"
|
"description": "The RegExp of path what you can to ignore(the `var.scss file` will never be compiled)。"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
ul{display:flex}ul li{flex:1}
|
ul{display:flex}ul li{flex:2;color:#fff}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
li {flex: 1}
|
li {flex: 2;color: #fff;}
|
||||||
}
|
}
|
Loading…
Reference in New Issue