Sass
web
Source
Write stylesheets with Sass variables, nesting, and mixins for your Roq site
Usage
Add Sass/SCSS support to your Roq project. Use variables, nesting, mixins, and all Sass features to write maintainable stylesheets.
Sass is the default Web Bundler preprocessor. It is included automatically when using the Web Bundler without Tailwind.
Getting started
Create .scss files in your web/ directory:
// web/style.scss
$primary: #3b82f6;
$radius: 0.5rem;
.card {
border-radius: $radius;
background: white;
&-title {
color: $primary;
font-weight: 600;
}
}
You can then reference the bundled stylesheet (i.e /static/bundle/app-xxxxx.css), via the bundle user tag (already included in base and other themes):
<script type="module" src="/static/bundle/app-EORJGSOS.js"></script>
<link rel="stylesheet" href="/static/bundle/app-RBZZBB6F.css" />