I've been doing a lot of styling work recently so I thought it might be useful to write a post about it. We're going to have a run through of what Sass is and why you might want to use it. And then we're going to have a look at how we can get it integrated into a Blazor application.
Compiling your code into CSS. To compile your code automatically, you need to configure a Sass, Less, or SCSS File Watcher which will track changes to your files and run the compiler. When you open a file, IntelliJ IDEA checks whether an applicable File Watcher is available in the current project. Compiling Themes. All kendo-themes are written in sass, using scss syntax, and you need a sass compiler to compile them. We support both node-sass and dart-sass. Due to the complexity of the themes, we rely on postcss, autoprefixer, and postcss-calc to properly compile them. When using Ruby Sass, there is a Ruby gem called sass-globbing that enables exactly that behavior. If running on node-sass, one can rely either on Node.js, or whatever build tool they use to handle the compilation (Gulp, Grunt, etc.). Online SCSS Compiler generates formatted css styles from scss code. Beautify or minify compiled css if necessary. Enter full url in @import statements if your scss code has those.
What is Sass?
As you can probably tell from my very subtle title, I use Sass for managing my styles. If you've never heard of Sass, it stands for Syntactically Awesome Style Sheets and it's a Css extension language or pre-processor.
Sass has two syntax options, SCSS and indented. The latter is the older, original syntax for Sass. Files using this option have a
.sass
extension. It uses indentation in order to describe the format of the document instead of the brackets and semi-colons found in traditional Css.SCSS is the more modern syntax and files using this option have the
.scss
extension. Minus a few small exceptions, this is superset of Css and therefor any valid Css is also valid SCSS. This option uses brackets and semi-colons and looks almost identical to traditional Css which makes it easier to pick up for most people.We can't use Sass files directly, they must be compiled it into valid Css first. There are a few different way of doing this but traditionally the common approach is to install Npm, a task runner like Gulp along with various other packages to handle the compilation and eventual minification. Don't worry though, in a bit I'm going to show you how you can avoid all of that and stay within the .NET ecosystem to compile your Sass.
Why use Sass?
Now we know a bit about Sass why would we want to use it? Css has always been a tricky to manage, especially in large applications or team environments. Stylesheets become very large and making changes or keeping things organised quickly becomes an issue. Not to mention the amount of repeated code that inevitably happens.
SASS offers a solution to this by enabling the use of basic programming paradigms such as modules, variables, functions and inheritance.
For example, how many times have you gone searching back through your Css for a certain colour value or padding size? Sass variable remove this issue, you can define your value in a variable which you can then use throughout your styles.
Another common problem with Css is repeating the same code. SASS give us an answer to that as well in the form of mixins. Mixins allow us to write re-usable chunks of code which we can then apply anywhere across our site.
The above example compiles to the following Css.
We can even pass variables into them to make them even more flexible.
Which compiles to this.
You can see examples of all the great features of Sass in the guide on the official site. But hopefully, even with the examples above, you can see what an advantage using Sass can give you.
Using SASS with Blazor
Now we know some of the benefits of using SASS, let's look at how can we take advantage of it in Blazor. We're also looking to avoid the JavaScript tool chain for compiling the Sass as well, so what are our options?
The answer to this question is Web Compiler by Madz Kristensen. This extension for Visual Studio will allow us to compile Sass to Css without having to install NPM or Gulp. The even better news is that there is also a NuGet package which adds a MSBuild task so we can even compile Sass in our devops pipeline.
Installing Web Compiler
Start by opening up Visual Studio 2019 and going to the Extension > Manage Extensions menu. Select Online from the left menu and then search for web compiler in the search box.
Click Download and then close Visual Studio to start the install process.
Once the install process is complete you can re-open Visual Studio. I'm going to create a fresh Blazor client-side app for this process but you can follow along using your own application.
Enabling Sass Compilation
I'm going to start by adding a Sass file to my project. I'm going to add this in a new folder at the root of my app called Styles.
Next, I'm going to right click on that file and go to the Web Compiler menu and then Compile File.
Once that is done there should be some new files in the project.
There is now a
.css
version of my Sass file, BlazorSass.css
. And there is also a minified version, BlazorSass.min.css
. In the root there are two new files, compilerconfig.json
and compilerconfig.json.defaults
. Let have a closer look at these two.The
compilerconfig.json
allows us to specify an input and an output file. We input SASS and it will output Css. By default, the output is located next to the input file but I'm going to make a change here and move the output location to the wwwroot folder. This will allow our compiled Css to be included when we publish our app.You will notice that as soon as you save the changes to the file your Sass will be recompiled and a new file will appear in the new output location.
The great thing about Web Compiler is that whenever a change is made to either a Sass file or the
compilerconfig.json
a recompile will be triggered. This means that when you have your Blazor app running you can make style changes and you won't need to do a rebuild, you will be able to just refresh the browser to see your changes.Let's have a look at the
compilerconfig.json.defaults
file next.![Compile sass to css Compile sass to css](https://themefisher.com/wp-content/uploads/2018/12/SASS-Compiler-Tools.jpg)
Ok, there's a lot of stuff in there. So as well as compiling Sass files, Web Compiler can compile a lot of other things as well. From this defaults file, we are able to configure the settings for the various compilers.
I'm only interested in Sass and minification so everything else can be safely removed.
I'm not going to change any of the default other than to enable sourceMaps which will make life a bit easier when debugging style issues. Live desktop 8 0 32.
The final piece of configuration needed is to enable compile on build. This will issue a prompt to install the NuGet package I mentioned earlier. This package will provide a MSBuild task so the Sass can be compiled during builds. To do this, right click on the
compilerconfig.json
and go to the Web Compiler menu and then Enable compile on build..When you see the prompt to install the NuGet package, select Yes.
You should then be able to see the BuildWebCompiler NuGet package in your projects dependencies.
Linking the Css
The last thing to do is to add a link to the compiled Css file into the index.html.
That's it, the project is now setup to use Sass for styling.
Summary
Sass is a very powerful tool to help us manage styles over traditional Css. We can even avoid the JavaScript tool chain by taking advantage of Madz excellent Web Compiler extension.
If you would like to learn more about Sass, then here are a few resources which will help you get started.
In a future post I'm going to share some ideas on how to structure Blazor applications which will include Sass structure as well. So check back for that one soon.
Automatically compiles SASS files on save or via shortcut, with extensive configuration possibilities.
Inspired by less-autocompile package, written by lohek, I have created a counterpart for SASS. This package can automatically compile SASS files (file ending:
.scss
or .sass
) when you save it. Or you can use shortcuts to do that. Beside that this package is highly configurable to fit all your needs.Requirements
At the moment, you can only use this package when you install node.js and node-sass on you system. It's important that you install node-sass globally (command:
npm install node-sass -g
), so it's possible to access it via CLI.The reason why sass-autocompile needs that is because node-sass is not compatible with atom shell in the current version (2.0.1), so it cannot be added as dependency. Probably that will change later, so you won't have to install node.js and node-sass additionally ‒ I put it to the roadmap.
Usage
Important:Install node.js and node-sass before, see requirements.
Basic SASS compilation
After you have installed this package, option Compile on save Indivisible 2019. is enabled, so if you save a SASS file it's automatically compiled to a CSS file. Since version 0.10.0 you don't need a first-line-comment to compile SASS files any more, except you set this by option.
Alternatively you can use shortcuts for starting compilation:
ctrl-shift-c
: Compile SASS file to a CSS filealt-shift-c
/cmd-shift-c
: Direct compilation; replaces SASS text with compiled CSS
The third method is to use the Tree View context menu where you can find a Compile SASS item when right clicking on a file with
.scss
or .sass
extension.Note: When you want to compile a SASS file to a CSS File (→ Compile to file) the file extension must be
.scss
or .sass
. You don't need a first-line-comment since version 0.10.0.After compiling a SASS file, you should see a notification or a panel at the bottom of the editor, depending on your settings, showing you an error or success message. If you use panel notification (see options ->
Notifications
) , you have the possibility to access the output CSS file by clicking on the compilation message. If compilation fails, you can even jump to error position in the corresponding SASS file where error occurred.When using panel notification you can use Show detailed output link in the header caption of the panel to open detailed output of
node-sass
command (available since 0.7.0). Additionally you can set option Show node-sass output after compilation to automatically show output after compilation.Compile to file
This feature is the default behaviour and the method you will use most. It compiles a SASS file to a CSS file. When you save a SASS file or use the Tree View context menu this method is used.
Direct compilation
When you want to instantly compile a SASS text, you can copy it to a new tab and press
alt-shift-c
/ cmd-shift-c
shortcut. This package then compiles the SASS input and replaces it with the compiled CSS.Options and parameters
Sass Compiling Slow
Since version 0.10.0 there are many new options. So have a look at the package options and configure the general behaviour for compiling SASS files. In the options section everything is explained in detail.
To overwrite general options in order to use specific configuration per project you can set parameters as comment in the first line. Have a look at the parameters where any parameter is described and how you can use it.
Options
Compile on Save
With this option you can en- or disable auto compiling on save functionality. If enabled and you save a file with.scss
or.sass
file extension, it's automatically compiled based on general options and on inline parameters, if defined.Default:true
Compile files ..
With this option you can decide if you want to compile every SASS file or only these which have a first-line-comment. Do I have t explain more about that? ;)Default:Every SASS file
Compile Partials
When you compile a Partial file (by saving it) and there is no first-line-comment, you can control if sass-autocompile compiles this file or not.Default:false
Ask for overwriting already existent files
If enabled and output file already exists, you are asked if you want to overwrite it. Else files are automatically overwritten .Default:false
Directly jump to error
If enabled and you compile an erroneous SASS file, this file is opened and jumped to the problematic position.Default:false
Show 'Compile SASS' item in Tree View context menu
If enabled there is a menu item in the Tree View context menu called Compile SASS. This item is visible only on files that has.scss
or.sass
file extension.Default:true
Compile with 'compressed' output style
Compile with 'compact' output style
Compile with 'nested' output style
Compile with 'expanded' output style
With these four options you can en- disable four different output styles. For each style the SASS file is compiled to the corresponding output file. So if you want to have the compressed and expanded style, activate that options, set the corresponding filename patterns and compile your SASS files.Default:compressed: true
Filename pattern for 'compressed' compiled files
Filename pattern for 'compact' compiled files
Filename pattern for 'nested' compiled files
Filename pattern for 'expanded' compiled files
With this options you can define a filename pattern for the output filename of each output style, include a relative or absolute output path.You can use$1
and$2
as placeholder for the original basename respectively the file extension. Furthermore you can add a relative or an absolute path where compiled files are stored to. For example: When you compileFoo.sass
and have.css$1.minified.$2.css
as filename pattern, the resulting filename will beFoo.minified.sass.css
and is stored in the relative path.css
. Alternatively you can use absolute paths.Default (compressed):$1.min.css
Default (compact):$1.compact.css
Default (nested):$1.nested.css
Default (expanded):$1.css
Indent type
With this option you can set the indention type: space or tab.Default:space
Indent width
This option defines the number of spaces or tabs to be used for indention.Default:2
Linefeed
Used to determine whether to usecr
,crlf
,lf
orlfcr
sequence for line break.Default:lf
Build source map
If enabled a source map is generated. Filename is automatically obtained by taking the output CSS filename and appending.map
, e.g.output.css.map
.Default:false
Embed source map
If enabled source map (see option Build source map) is embedded as a data URI.Default:false
Include contents in source map information
If enabled contents are included in source map information.Default:false
Include additional debugging information in the output CSS file
If enabled additional debugging information are added to the output file as CSS comments. If CSS is compressed this feature is disabled by SASS compiler.Default:false
Include paths
Paths to look for files that are referenced by@import
declarations (e.g. SASS frameworks or your own general SASS style collection). Multiple paths must be separated by commas. If you need spaces, commas or semicolons in a path, it must be surrounded by quotes.Default:'
Precision
Used to determine how many digits after the decimal will be allowed. For instance, if you had a decimal number of 1.23456789 and a precision of 5, the result will be 1.23457 in the final CSS.Default:5
Filename to custom importer
If you want to use a custom import functionality, you can use this option to define a path to a JavaScript file that contains your code.Default:'
Filename to custom functions
If you have custom functions you want to include, you use this option to set a path to your corresponding JavaScript file.Default:'
Notification type
This options allows you to decide which feedback you want to see when SASS files are compiled: notification and/or panel.Panel: The panel is shown at the bottom of the editor. When starting the compilation it's only a small header with a throbber. After compilation a success or error message is shown with reference to the CSS file, or on error the SASS file. By clicking on the message you can access the CSS or error file.Notification: The default atom notifications are used for output.Default:Panel
Automatically hide panel on ..
Select on which event the panel should automatically disappear. If you want to hide the panel via shortcut, you can usectrl-alt-shift-h
/ctrl-cmd-shift-h
.Default:Success
Panel-auto-hide delay
Delay after which panel is automatically hidden.Default:3000
Automatically hide notifications on ..
Decide when you want the notifications to automatically hide. Else you have to close every notification manually.Default:Info, Success
Show 'Start Compiling' Notification
If enabled and you added the notification option inNotifications
, you will see an info-message when compile process starts.Default:false
Show additional compilation info
If enabled additional info like duration or file size is presented.Default:true
Show node-sass output after compilation
If enabled detailed output of node-sass command is automatically shown in a new tab after each compilation. So you can analyse the output, especially when using @debug, @warn or @error in your SASS.Default:false
Show warning when using old parameters
If enabled any time you compile a SASS file und you use old inline parameters, an warning will be occur not to use them.Default:true
'node-sass' execution timeout
Maximal amount of time (in milliseconds) node-sass is allowed to run. If it's set to 0, there is no time limitfor execution.Default: 10000Path to 'node-sass' command
Absolute path where 'node-sass' executable is placed (Mac OS X:/usr/local/bin
, Linux:?
). This option is especially for Mac OS and Linux users who have problems with permissions and seeing error messagecommand failed: /bin/sh: node-sass: command not found
.Default:'
Parameters
Add following parameters in comma-separated way to the first line of your SASS file. See examples for demonstration:
compileOnSave [ : true | false ]
With this option you can control compile on save functionality by first line parameter. If you define this option, global option is overwritten. Examples:compileCompressed
compileCompact
compileNested
compileExpanded
With these parameters you can define which output files should be generated. If one of these parameters is set, every other output styles are deactivated. So, if you have enabled all four output styles in global options and set e.g.compileCompressed
in your inline parameters, only the compressed file is generated.Note: Please read documentation about patterns too! You can combine the compile and filenamePattern parameter.compressedFilenamePattern
compactFilenamePattern
nestedFilenamePattern
expandedFilenamePattern
With this parameter you can define a filename pattern for the output filename of each output style, including a relative or absolute output path.You can use$1
and$2
as placeholder for the original basename respectively the file extension. Furthermore you can add a relative or an absolute path where compiled files are stored to. For example: When you compileFoo.sass
and have.css$1.minified.$2.css
as filename pattern, the resulting filename will beFoo.minified.sass.css
and is stored in the relative path.css
.Note: There is a short form for combining the compile and filenamePattern parameter. For Example:This line tells sass-autocompile to output a compressed version of the SASS input and to store in intest.css
.main
Path to your main SASS file to be compiled. See http://sass-guidelin.es/#main-file for more info about that feature.Value:<main.scss>
Example:./main-scss.scss
indentType: space | tab
Indention type: space or tab, default: space.Value:space | tab
indentWidth: 0-10
Indention width, maximum: 10, default: 2.Value:<number>
linefeed:
Defines the linefeed of output files.Value:cr | crlf | lf | lfcr
sourceMap
Creates a source map file if a filename is given or if true, source map filenameis automatically set as CSS filename, extended with.map
.Value:true | false | <filename.css.map>
Airmail 3 5 download free.sourceMapEmbed
If true source map is embedded as data URI.Value:true | false
sourceMapContents
If true the contents are included to the source map informationValue:true | false
sourceComments
If true additional debugging information is added to the output file as CSS comments, but only if CSS is not compressed.Value:true | false
includePath | includePaths
Paths to look for files that are referenced by@import
declarations (e.g. SASS frameworks or your own general SASS style collection). Can be relative or absolute paths. If spaces, commas or semicolons are needed, a path must be surrounded by quotes.When you want to apply multiple paths, you have to surround the paths by[]
, see examples above.Value:<path> | [<path1>, <path2>, ..]
Examples:precision
The amount of precision allowed in decimal numbers.Value:<number>
importer
Path to .js file containing custom importer.Value:<filename.js>
functions
Path to .js file containing custom functions.Value:<filename.js>
Deprecated
These parameters are supported, but will be removed in future. Please use the corresponding parameters described above.
out
Defines the output filename pattern. If you set this parameter only one output file is generated. You should use this parameter in combination withoutputStyle
. If you useout
but do not defineoutputStyle
the default output style will becompressed
.You can use$1
and$2
as placeholder for the original basename respectively the file extension. For example: When you compileFoo.sass
and you define$1.minified.$2.css
as out parameter, the resulting filename will beFoo.minified.sass.css
.Values:<filename.css>
outputStyle
You can define the output style. Have a look at this page where the difference is explained and shown in examples. If you set this parameter only one output file is generated.Values:compressed | compact | nested | expanded
compress
Instead of usingoutputStyle
you can set this parameter in order to en- or disable compression. If enabledoutputStyle
is set tocompressed
, else tonested
.If you usecompress
andoutputStyle
, compress is ignored.Values:true | false
Examples
Basic usage
Defining a compressed output and save compiled CSS files to a relative CSS directory.
. or in short version:
Or you only want to overwrite some filename patterns?
Sass Compiler
Main parameter
Sass Compiling Setup
If you use
@import
command in SASS, you should define the main
parameter in the child files. Imagine you have the following structure:Add this to
colors.scss
and layout.scss
to enable auto compilation on saving each of these two child files.The special about this parameter is, that when you save a child file, the
main.scss
is compiled, not the child file itself. So you can structure your SASS files, modify them and after saving, everything is compiled correctly, not only the saved file.Predefined shortcuts
ctrl-shift-c
Compiles current file to a CSS file (see [Compile to file)(#compile-to-file)]). This only works on files with.scss
or.sass
file extension.alt-shift-c
/cmd-shift-c
Direct compilation of current text (see [Direct compilation)(#direct-compilation)]). This works with every file, but throws an error if content is not valid SASS.ctrl-alt-shift-s
/ctrl-cmd-shift-s
Toggles Compile on save functionality. You will see a notification if you change this value.ctrl-alt-shift-h
/ctrl-cmd-shift-h
Hides the panel.
Issues, questions & feedback
Please post issues on GitHub.
For other concerns like questions or feedback have a look at the discussion thread on atom.io.
Sass Compiler Options
Roadmap
- Add node-sass as dependency, so we do not need extra node.js and node-sass installation
- Recognize debug/info/error output and print it in info panel or print hint that such information is available
- Working on network directories/unc?
Changelog
See CHANGELOG.md.