Style Sheets
Zesty.io supports writing CSS, Less, and SCSS for styling your instances. Upon publishing we process all SCSS, Less, and CSS files and build a concatenated and minified CSS file to serve for your inst
Zesty.io’s Code Editor supports CSS, LESS, and SCSS/SASS. Every save of a stylesheet will combine, compile, and minify all stylesheet files into a single CSS file called
site.css. If more than one style of stylesheet is used, they will compile and concat into a single file in the following order of concatenation:
CSS
LESS
SCSSTo create style files that are not compiled through this flow and used site-wide you can create style sheets in a custom endpoint and add them to the item's head that requires it.
All files are concatenated based on their type then by their order set in the editor interface of the Zesty.io manager. Each stylesheet type has its own compiler or minifier explained below. Files will transpile with their given type; Less and Sass files will compile with style variables. Parsley is not accessible from to files in the Style Sheet section.
Comments in Style files can err on compilation especially if they are single-line comments noted by
// and at the top or bottom of a file. To mitigate this ensure that comments are noted using the multi-line /* */ syntax. All CSS with the exception of any file named ‘ie8.css’ is concatenated and run through a minification process. The repository used for CSS minification: https://github.com/matthiasmullie/minify
All LESS files are concatenated based on their order in the editor interface and then run through the LESSC compiler with the compressed flag. The repository we use to compile: https://github.com/leafo/lessphp
Errors are returned for broken LESS at compile time.
All SCSS files are concatenated based on their order in the Editor and run through the SASSC compiler with the flags ‘ --style compressed --stdin’, that behavior is hard coded and cannot be changed. The repository used for compiling SASS: https://github.com/sass/sassc
Errors are returned for broken SASS at compile time.
SCSS cannot be used in base blueprints files. This refers the the files that are loaded from a GitHub repo upon blueprint selection during instance creation.
ie8.css
If a file is given the name ie8.css, it will be ignored by the minification process and is included in its own href link in the header after the main minified CSS file is added.
Zesty.io auto appends stylesheets to specific templates (mostly legacy). If you experience added CSS and it is a problem please reach out to support on the Zesty.io developer slack channel. Support engineers can remove the base CSS files.
All old CSS files use to be processed by the LESSC compiler for minification or file compile order. When sites are migrated, old CSS files will be converted to LESS file to maintain the same behavior.
- Head type changes from text/css to text/less
- View type changes from text/css to text/less
- File extension changes from .css to .less
New CSS files will abide by the rules in this specification.
Last modified 2yr ago