chasegiunta/scss

Compiler for SCSS

SCSS plugin for Craft CMS 4.x

Compile SCSS to CSS in your templates, _(*1)

, _(*2)

Requirements

This plugin requires Craft CMS 4.0.0 or later., _(*3)

Installation

To install the plugin, follow these instructions., _(*4)

1. Open your terminal and go to your Craft project:, _(*5)

   cd /path/to/project

2. Then tell Composer to load the plugin:, _(*6)

   composer require chasegiunta/scss

3. In the Control Panel, go to Settings → Plugins and click the “Install” button for SCSS., _(*7)

SCSS Overview

Craft conveniently offers {% css %} tags to include template-specific styles in the head of your page. This plugin takes that functionality a bit further by enabling support for compiling SCSS to CSS with {% scss %} using the scssphp library (https://github.com/scssphp/scssphp)., _(*8)

Configuring SCSS

By default, while working with devMode enabled, the styles generated will be output into a readable expanded format. If Craft is not running in devMode, the styles will be uglified into a compressed format., _(*9)

You can configure these default output formats by copying the scss.php file from the plugin directory in your config folder., _(*10)

Using SCSS

{% scss %}
... insert scss here ...
{% endscss %}

Given the following SCSS:, _(*11)

{% scss %}
/*! Comment */
.navigation {
    ul {
        line-height: 20px;
        color: blue;
        a {
            color: red;
        }
    }
}

.footer {
    .copyright {
        color: silver;
    }
}
{% endscss %}

Output format

Specifying an output format will take precedence over any default settings in config/scss.php., _(*12)

{% scss expanded %}, _(*13)

/*! Comment */
.navigation ul {
  line-height: 20px;
  color: blue;
}
.navigation ul a {
  color: red;
}
.footer .copyright {
  color: silver;
}

{% scss compressed %}, _(*14)

/* Comment*/.navigation ul{line-height:20px;color:blue;}.navigation ul a{color:red;}.footer .copyright{color:silver;}

@import

When you import a file using the @import directive, the current path of your Craft install is used as the search path., _(*15)

Brought to you by Chase Giunta, _(*16)