# Sass

[Sass](https://sass-lang.com/) is the CSS pre-processor used with Galaxy Themes, allowing you to compile your `.scss` files to CSS without any configuration needed.

<details>

<summary>I want Standard CSS, no compilation by Galaxy</summary>

You can simply add your CSS files to the folder `public` and call them on the page with this syntax

Create a file `public/folder-name/index.css` and then link it from the html

<pre class="language-html"><code class="lang-html"><strong>&#x3C;!-- this CSS is not compiled by Galaxy -->
</strong><strong>&#x3C;link rel="stylesheet" href="#$$#/folder-name/index.css?v{{website.version}}" />
</strong></code></pre>

It will be loaded like any theme asset, and Galaxy will directly serve the CSS file.&#x20;

**This is a quick way, but it does not handle design settings or minifying files.**

</details>

{% hint style="warning" %}
This describes **the new way to add SASS compilation to your theme** that will be released mi-march. \
The previous way to import the main.css file still works (`#$$#/css/main.css`)
{% endhint %}

### TLDR;

```html
<!--
Directory structure:
my-theme/
├─ sass/
│  ├─ main.scss
│  ├─ print.scss
-->

<!-- Import files in HTML -->
<link rel="stylesheet" href="#$$#/galaxy-css/main.css" />
<link rel="stylesheet" media="print" href="#$$#/galaxy-css/print.css" />
```

* Create your entry file at the root of the folder `sass`: `my-theme/sass/filename.scss`
* in the HTML, use the path `#$$#/galaxy-css/filename.css`
* you can have several entry files. Replace "filename" with the files created
* no configuration file to create, the Scss compilation is handled by Galaxy if the theme is updated

With this, you are free to split the CSS between different files and decide when to load them

### Simple example: main.css

To have your Sass files compiled by Galaxy, create the file inside the folder `sass`, and link the file in the HTML

1. Inside your theme, create a file `my-theme/sass/main.scss`
2. In the HTML, you can add the path to the CSS with this syntax `#$$#/galaxy-css/main.css`

```html
<!-- this CSS is compiled by Galaxy, the entry point is sass/main.scss -->
<link rel="stylesheet" href="#$$#/galaxy-css/main.css" />
```

Galaxy replaces the path "`#$$#/galaxy-css/main.css`" with another path containing the CSS compiled just for this website.&#x20;

{% hint style="info" %}
The syntax **`#$$#/galaxy-css/*.css`** indicates to the backoffice that this is a file that should be compiled.
{% endhint %}

### Compile several CSS files / Splitting CSS

Sometimes you have some CSS that only makes sense in a specific context (for one device, for some page templates, etc..)

Here is an example where I would have 3 entry files:

* `main.scss`
* `desktop.scss`
* `mobile.scss`

We create the 3 entry files at the root of `sass` folder

```
my-theme/
├─ sass/
│  ├─ _config.scss
│  ├─ desktop.scss
│  ├─ main.scss
│  ├─ tablet.scss
```

To have the path of each file, the syntax is `#$$#/galaxy-css/filename.css`

```html
<link rel="stylesheet" href="#$$#/galaxy-css/main.css" />

<link rel="stylesheet" media="(min-width: 768px)" href="#$$#/galaxy-css/tablet.css" />

<link rel="stylesheet" media="(min-width: 1024px)" href="#$$#/galaxy-css/desktop.css" />
```

With this syntax, on small screens the file `tablet.css` and `desktop.css` will not be render-blocking.

<details>

<summary>CSS file per page template</summary>

In the case of a CSS file only for some page templates, you could link the file only from the HTML of these templates.\
\
If you want to inject the code in the head of the page, you can refer to the guide: [add-code-to-the-head-end-of-body](https://galaxy-cms.gitbook.io/project/cms/cms-features/add-code-to-the-head-end-of-body "mention")

</details>

<details>

<summary>What if I want to lazyload my CSS?</summary>

These examples use a `link` tag, but you could decide to lazyload some CSS with Javascript. \
For example, if you have some CSS for a popup visible only sometimes, you could do something like this:

```
<script>
    var myThemelazyCSS = {
        'css-popups': '#$$#/galaxy-css/popups.css',
        'vendor-pikaday': '#$$#/galaxy-css/pikaday.css',
    };
</script>
```

and with Javascript, if there is a popup, you could decide to add the link tag dynamically using the URL from `myThemelazyCSS['css-popups']`

</details>

### Possible future evolutions

* ability to inline CSS (could be useful if you have a very small CSS / identified critical CSS)
* ability the indicate at block level the CSS necessary, and Galaxy could aggregate these files and generate one CSS per page, with only the necessary blocks
