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.
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 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
  • Add functionality to advance the ClientDependency version number when SCSS file is saved.
Ver  .01
  • Beta Release


Package owner



Jason has 630 karma points

Package Compatibility

This package is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
Version 11.0.x (untested)
Version 10.3.x (untested)
Version 10.2.x (untested)
Version 10.1.x (untested)
Version 10.0.x (untested)
Version 9.5.x (untested)
Version 9.4.x (untested)
Version 9.3.x (untested)
Version 9.2.x (untested)
Version 9.1.x (untested)
Version 9.0.x (untested)
Version 8.18.x (untested)

You must login before you can report on package compatibility.

Previously reported to work on versions: 7.3.x, 7.2.x

Package Information

  • Package owner: Jason
  • Created: 31/03/2015
  • Current version 2.3
  • .NET version 4.0
  • License MIT
  • Downloads on Our: 2.5K

External resources