Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oawu/npm-scss
OA's Node scss 轉換工具
https://github.com/oawu/npm-scss
compass css node node-sass npm sass scss
Last synced: 3 days ago
JSON representation
OA's Node scss 轉換工具
- Host: GitHub
- URL: https://github.com/oawu/npm-scss
- Owner: oawu
- Created: 2021-01-18T07:50:12.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-22T05:59:45.000Z (almost 2 years ago)
- Last Synced: 2024-09-19T00:39:45.977Z (9 days ago)
- Topics: compass, css, node, node-sass, npm, sass, scss
- Language: SCSS
- Homepage:
- Size: 151 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# OA's Node scss 轉換工具
OA's Node scss 轉換工具 📝
## 說明
基於 npm 上的 [sass](https://www.npmjs.com/package/sass) 開發的應用工具，同時加入些許 [compass](http://compass-style.org/) 相關的 [`mixin`](https://sass-lang.com/documentation/at-rules/mixin) 或 [`function`](https://sass-lang.com/documentation/at-rules/function) 以便於使用。
## 安裝
```shell
npm install @oawu/scss
```
## 使用
引入 `require('@oawu/scss')` 即可使用 **scss** 功能，如下範例：
```javascript
const SCSS = require('@oawu/scss')
SCSS.file('/paths.../some.scss', (error, result) => {
// done..
})
// or
SCSS.data('$w: 100px; div { width: $w; }', (error, result) => {
// done..
})
```
## 其他功能
可以使用 `@import "@";` 來使用此套件的相關功能，其參考目錄為 [Libs](https://github.com/oawu/npm-scss/tree/master/Libs)
```scss
@import "@";
* {
&, &:after, &:before {
vertical-align: top;
@include box-sizing(border-box);
@include font-smoothing(subpixel-antialiased);
}
}
```
若要使用 Libs 下的其他功能，例如 `CSS3/Cursor` 內所有功能與 `CSS3/Font/Face.scss`，使用方式如下：
```scss
@import "@/CSS3/Cursor";
@import "@/CSS3/Font/Face";
```
### 特殊功能
可以使用 `@import "*";` 或 `@import "Lalilo";` 來快速使用 [Lalilo](https://github.com/oawu/Lalilo) 框架常用功能，其引入的功能可以參考 [`Lalilo.scss`](https://github.com/oawu/npm-scss/blob/master/Libs/Lalilo.scss) 此檔案。
```scss
@import "*";
* {
&, &:after, &:before {
vertical-align: top;
@include box-sizing(border-box);
@include font-smoothing(subpixel-antialiased);
}
}
```
由於 `@import "Lalilo";` 為直接指定的快取檔案，主要目的是為了加快編譯速度，當然您可以自定義引入的檔案內容。
預設的快取檔案為 [`Lalilo.scss`](https://github.com/oawu/npm-scss/blob/master/Libs/Lalilo.scss)，但可以使用 `Scss.contents` 來改變快取檔案內容。
以下範例為改變 `@import "Lalilo";` 後所引入的內容：
```javascript
const SCSS = require('@oawu/scss')
SCSS.contents = "%-tmp {}"
```
```scss
@import "Lalilo";
div {
@extend %-tmp;
}
```
### 自動編譯
資料結構如下，其實可以使用 `watch.js` 來自動編譯 scss 檔案。
```
project/
+ css/
+ scss/
+ index.scss
+ watch.js
```
``` scss
// index.scss
@import "*";
a {
@include border-radius(10px);
background-color: rgba(0, 0, 255, 0.2);
border: 1px solid rgba(255, 0, 0, .3);
}
```
``` javascript
// watch.js
const { watch } = require('@oawu/scss')
watch
.scssDir('scss')
.cssDir('css')
.start()
```
終端在 **專案目錄** 下，執行 `node watch.js` 即可啟動自動編譯。
`scssDir` 與 `cssDir` 兩個目錄可以擺放與 `watch.js` 相對的路徑目錄，亦可擺放絕對目錄。
## 參考
* compass 功能參考:
* [https://github.com/Igosuki/compass-mixins](https://github.com/Igosuki/compass-mixins)
* [https://www.npmjs.com/package/compass-mixins](https://www.npmjs.com/package/compass-mixins)