https://github.com/jxnblk/css-scss

Convert CSS syntax to SCSS with calc, variables, and custom media queries
https://github.com/jxnblk/css-scss

Last synced: 3 months ago
JSON representation

Convert CSS syntax to SCSS with calc, variables, and custom media queries

• Host: GitHub
• URL: https://github.com/jxnblk/css-scss
• Owner: jxnblk
• Archived: true
• Created: 2014-12-10T00:26:26.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-12-13T07:33:50.000Z (almost 7 years ago)
• Last Synced: 2024-07-18T08:53:52.067Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 26.4 KB
• Stars: 44
• Watchers: 5
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS-SCSS

Convert CSS syntax to SCSS with calc, variables, and custom media queries

As used in http://basscss.com

## Install

```sh

npm install css-scss

```

## Usage

```js

var fs = require('fs');

var cssscss = require('css-scss');

var src = fs.readFileSync('./input.css', 'utf8');

var scss = cssscss(src);

fs.writeFileSync('./output.scss', scss);

```

## Results

### Variable Definitions

Convert this CSS:

```css

:root {

  --red: #f00;

}

```

Into this:

```scss

$red: #f00 !default;

```

### Variables in Declarations

Convert this:

```css

.warning {

  color: var(--red):

}

```

Into this:

```scss

.warning {

  color: $red;

}

```

### Custom Media Queries

Convert this:

```css

@media (--breakpoint-small) {

  .sm-col-6 { width: 50% }

}

@custom-media --breakpoint-small (min-width: 40em);

```

Into this:

```scss

$breakpoint-small: '(min-width: 40em)' !default;

@media #{$breakpoint-small} {

  .sm-col-6 { width: 50% }

}

```

### Calc

Convert this:

```css

.col-4 { calc( 4 / 12 * 100% ) }

```

Into this:

```scss

.col-4 { ( 4 / 12 * 100% ) }

```

MIT License