https://github.com/txs1992/stylus-converter

🛠️🤖 A tool that converts a stylus into scss, or less, or other precompiled CSS. 一个将 stylus 转换为 scss 或 less 或其他预编译 CSS 的工具。
https://github.com/txs1992/stylus-converter

stylus stylus-conveter stylus-to stylus-to-less stylus-to-sass stylus2 stylus2less stylus2sass stylus2scss stylusto stylustoless stylustosass stylustoscss

Last synced: about 2 months ago
JSON representation

🛠️🤖 A tool that converts a stylus into scss, or less, or other precompiled CSS. 一个将 stylus 转换为 scss 或 less 或其他预编译 CSS 的工具。

• Host: GitHub
• URL: https://github.com/txs1992/stylus-converter
• Owner: txs1992
• License: mit
• Created: 2018-03-30T07:37:38.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T01:11:04.000Z (almost 2 years ago)
• Last Synced: 2024-07-06T00:19:01.892Z (3 months ago)
• Topics: stylus, stylus-conveter, stylus-to, stylus-to-less, stylus-to-sass, stylus2, stylus2less, stylus2sass, stylus2scss, stylusto, stylustoless, stylustosass, stylustoscss
• Language: JavaScript
• Homepage:
• Size: 581 KB
• Stars: 344
• Watchers: 5
• Forks: 74
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  





  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  





  


    

      中文

    

     | 

    

      English

    

  



## What is this

> A tool that converts a stylus into scss, or less, or other precompiled CSS.

## stylus-converter config

### converter options

| Attribute | Description | Type | Accepted Values | Default |

| ---- | ---- | ---- | ---- | ---- |

| `quote` | The quote type to use when converting strings | string | `'` / `"` | `'` |

| `conver` | Conversion type, such as conversion to scss syntax | string | scss | scss |

| `autoprefixer` | Whether or not to automatically add a prefix, stylus will automatically add prefixes when converting stylus grammars. `@keyframes` | boolean | true / false | true |

| `indentVueStyleBlock` | Indent the entire style block of a vue file with a certain amount of spaces. | number | number | 0 |

### cli options

| Attribute | Shorthand | Description | Accepted Values | Default |

| ---- | ---- | ---- | ---- | ---- |

| `--quote` | `-q` | The quote type to use when converting strings | single / dobule | single |

| `--input` | `-i` | Enter a name, which can be a path to a file or a folder | - | - |

| `--output` | `-o` | Output name, can be a path to a file or a folder | - | - |

| `--conver ` | `-c` | Conversion type, such as conversion to scss syntax | scss | scss |

| `--directory` | `-d` | Whether the input and output paths are directories | yes / no | no |

| `--autoprefixer` | `-p` | Whether to add a prefix | yes / no | yes |

| `--indentVueStyleBlock` | `-v` | Indent the entire style block of a vue file with a certain amount of spaces. | number | 0 |

### How to handle single line comments

```js

1. First fork project and then clone project to local

git clone [email protected]:/stylus-converter.git

2. Enter the project directory

cd stylus-converter

3. Installation project depends

npm install

4. Go to line 581 of the `node_modules/stylus/lib/lexer.js` file.

5. Modify the code below.

// before modification

if ('/' == this.str[0] && '/' == this.str[1]) {

  var end = this.str.indexOf('\n');

  if (-1 == end) end = this.str.length;

  this.skip(end);

  return this.advance();

}

// After modification

if ('/' == this.str[0] && '/' == this.str[1]) {

  var end = this.str.indexOf('\n');

  const str = this.str.substring(0, end)

  if (-1 == end) end = this.str.length;

  this.skip(end);

  return new Token('comment', new nodes.Comment(str, suppress, true))

}

```

## Use examples

```javascript

// download stylus-converter

npm install -g stylus-converter

// Run the cli conversion file

stylus-conver -i test.styl -o test.scss

// Run the cli conversion directory

// cd your project

mv src src-temp

stylus-conver -d yes -i src-temp -o src

```

## Conversion file comparison

### Stylus source code before conversion

```stylus

handleParams(args...)

  args

@media screen and (max-width: 500px) and (min-width: 100px), (max-width: 500px) and (min-height: 200px)

  .foo

    color: #100

.foo

  for i in 1..4

    @media (min-width: 2 * (i + 7) px)

```

### Converted SCSS source code

```scss

@function handleParams($args...) {

  @return $args;

}

@media screen and (max-width: 500px) and (min-width: 100px), (max-width: 500px) and (min-height: 200px) {

  .foo {

    color: #100;

  }

}

.foo {

  @for $i from 1 through 4 {

    @media (min-width: 2 * ($i + 7) px) {

      width: 100px * $i;

    }

  }

}

```

> If you do not want to add the default prefix for your converted @keyframes, please set `options.autoprefixer = false`

### The `.vue` file before conversion

```html

  


    click me

  


.page-home

  .el-button

    margin: 10px auto

```

### Converted `.vue`  file

```html

  


    click me

  


.page-home {

  .el-button {

    margin: 10px auto;

  }

}

```

## Build a development environment

```text

1. First fork project and then clone project to local

git clone [email protected]:/stylus-converter.git

2. Enter the project directory

cd stylus-converter

3. Installation project depends

npm install

4. Package compilation source file

npm run build

5. Local debugging cli

npm link

```