https://github.com/davidkpiano/sassport-reference

Import by Reference in Sass using Sassport
https://github.com/davidkpiano/sassport-reference

Last synced: 2 months ago
JSON representation

Import by Reference in Sass using Sassport

• Host: GitHub
• URL: https://github.com/davidkpiano/sassport-reference
• Owner: davidkpiano
• License: mit
• Created: 2015-12-09T17:03:08.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-23T14:45:19.000Z (over 9 years ago)
• Last Synced: 2025-03-08T02:16:01.527Z (3 months ago)
• Language: JavaScript
• Size: 9.77 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sassport Reference Loader

Import by reference in Sass using [Sassport](https://www.github.com/davidkpiano/sassport).

## Quick Start

- `npm install sassport sassport-reference --save`

- Add `sassport-reference` to your [Sassport](https://www.github.com/davidkpiano/sassport) modules:

```js

import sassport from 'sassport';

import sassportReference from 'sassport-reference';

sassport([ sassportReference ])

  .render({

    file: 'path/to/stylesheet.scss'

  }, (err, result) => {

    console.log(result.css.toString());

    

    // Output the result CSS however you'd like

  });

```

And just add the `!reference` loader to any imported SCSS file you want to include by reference:

```scss

// Imported file

@for $i from 1 through 12 {

  .col-#{$i} {

    float: left;

    width: percentage($i / 12);

  }

}

```

**Input SCSS:**

```scss

@import 'path/to/grid !reference';

.half {

  @extend #{reference('.col-6')};

  

  // Alternatively:

  @extend %REF.col-6;

}

```

**Result CSS:**

```css

.half {

  float: left;

  width: 50%;

}

```

Only the CSS you reference will be output. You can use extended referenced selectors in the same way as you would use any other extended selector.