https://github.com/ctx-core/sass

https://github.com/ctx-core/sass

Last synced: 30 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ctx-core/sass
• Owner: ctx-core
• License: other
• Created: 2019-12-02T17:20:12.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-05-22T00:19:09.000Z (7 months ago)
• Last Synced: 2024-05-22T01:29:32.574Z (7 months ago)
• Language: JavaScript
• Size: 640 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • Changelog: CHANGELOG.md
  • License: License.md

Awesome Lists containing this project

README

        
# @ctx-core/sass

Processes sass with postcss & global style support.

## Rollup Example

```javascript

// rollup.config.js

import svelte from 'rollup-plugin-svelte'

import { preprocess_ } from '@ctx-core/svelte/node'

import { preprocess_sass_ } from '@ctx-core/sass'

const preprocess__sass = preprocess_sass_()

const preprocess = preprocess_([

	preprocess__sass,

	// ...

])

module.exports = {

	client: {

		// ...

		plugins: [

			// ...

			svelte({

				// ...

				preprocess,

			})

		]

	},

	server: {

		// ...

		plugins: [

			// ...

			svelte({

				// ...

				preprocess,

			})

		]

	},

	// ...

}

```

## Svelte Component - `` Example

```html

<div class="container">

	<div class="my-global-class">✔</div>

</div>

<style lang="scss" global>

	.container {

		.my-global-class {

			color: green;

		}

	}

```

The CSS equilavent is generated for Svelte:

```css

:global(.container .my-global-class) {

	color: green;	

}

```