3 votes

Backoffice SCSS Editor

Once you go SCSS it is hard to go back! This simple back office extension adds a SCSS file editor and ClientDependency compiler to our favorite CMS. It also has some handy toolbor functions to make it easier to insert import statement, insert variables and insert mixins.

To install

Download package (there is an x86 version if needed) and install via the Umbraco back office, done.

NOTE: This package requires the C++ Redistributable for your processor type (x86 or x64) to be installed first for LibSass to work. You can fine the latest version here: https://www.microsoft.com/en-us/download/details.aspx?id=48145

Web.Config settings

The extension will add three appSettings key to the web.config:

<add key="dtpScssEditor:Version" value="2.2" />  <add key="dtpScssEditor:Root" value="~/scss/" />  <add key="dtpScssEditor:DeleteEmptyDirectory" value="true" />

dtpScssEditor:Version, is the extension version. Just for reference, recommend not to change.
dtpScssEditor:Root, is the configurable location of your scss files. Default is ~/scss/ and the directory will be created automatically.
dtpScssEditor:DeleteEmptyDirectory, when true prevents the deletion of directories that are not empty. Just a safeguard to protect you from deleting all your hard work.

Using your SCSS files

The point of this is to have some runtime compiled SCSS to CSS. To use your SCSS file in your site/templates include the Client Dependency MVC handler in your view, then add you SCSS file with the Client Dependency RequiresCss helper.

@using ClientDependency.Core.Mvc;@{    Html.RequiresCss("~/scss/main.scss");  }

Don't forget to add the output helper where you want the compiled SCSS to render.

@Html.RenderCssHere();

Also see Client Dependency (CD) GitHub for CD documentation: http://github.com/Shazwazza/ClientDependency

Ver 2.3

Fixed issue with preview not working.
Fixed issue with CD version not incrementing and resetting to zero.

Ver 2.2

Added logic to add the required http handlers during install.
Moved example SCSS files to a sub folder to prevent overwriting existing SCSS files during upgrades.

Ver 2.1

Removed compile test on save of main scss files
re-worked the preview dialog.

Ver 2.0

Added preview feature for non-partial SCSS files.
Added error message for SCSS compile errors for non-partial files.
Replaced NSass LibSass wrapper with LibSassNet.x64 3.0.1.1 wrapper

Ver 1.0

Added Toolbar to editor to allow for inserting import statments, inserting mixins, inserting variables and commenting out text.
Added example SCSS files.

Ver .02