Private betav0.1.0
Docs
Format developer documentation

Sass / SCSS

Use Sass or SCSS styles in Format Studio documents.

Supported frameworks

FrameworkSupported
React
Vue
HTML

Installation

No additional installation steps required.

Usage

SCSS files

Add an .scss file anywhere in your Format project or document.

documents
invoice
styles.scss
index.tsx
documents/invoice/styles.scss
$peach: peachpuff;

.peach {
	background: $peach;
}

Import the SCSS file into your document entry point. This import only needs to be done once, in the entry file.

documents/invoice/index.tsx
import { Document, Layout } from '@format.dev/react'
import './styles.scss'

export default function Invoice () {
	return (
		<Document title="Invoice">
			<Layout id="invoice" width={793.71} height={1122.52}>
				<div className='peach'>Hey, 🍑</div>
			</Layout>
		</Document>
	)
}

Add an .scss file anywhere in your Format project or document.

documents
invoice
styles.scss
index.vue
documents/invoice/styles.scss
$peach: peachpuff;

.peach {
	background: $peach;
}

Include the SCSS module into your document entry point. This import only needs to be done once, in the entry file.

documents/invoice/index.vue
<script setup lang="ts">
import { Document, Layout } from '@format.dev/vue'
</script>

<template>
	<Document title="Invoice">
		<Layout id="invoice" :width="793.71" :height="1122.52">
			<div class="peach">Hey, 🍑</div>
		</Layout>
	</Document>
</template>

<style lang="scss">
@use './styles.scss'; 
</style>

Add an .scss file anywhere in your Format project or document.

documents
invoice
styles.scss
index.html
index.ts
documents/invoice/styles.scss
$peach: peachpuff;

.peach {
	background: $peach;
}

Import the SCSS file into your document entry point. This import only needs to be done once, in the entry file.

documents/invoice/index.ts
export { default } from './index.html'
import './styles.scss'
documents/invoice/index.html
<template data-type="document" data-title="Invoice">
	<template data-type="layout" data-id="invoice" data-width="793.71px" data-height="1122.52px">
		<div class="peach">Hey, 🍑</div>
	</template>
</template>

Sass indented syntax (.sass)

If you prefer Sass's indented syntax, use .sass files.

documents/invoice/styles.sass
$peach: peachpuff

.peach
	background: $peach
Was this page helpful?