Switch To Template 2
Choose color
Header option
Footer option
Buy Unishop

Shop Categories

Daniel Adams
  support@unishop.com  00 33 169 7720
  Get mobile app
English$ USD
FrançaisFrançaisDeutschDeutschItalianoItaliano
Clear
3$289.68
Product
Unionbay Park1 x $43.90
Product
Daily Fabric Cap2 x $24.89
Product
Haan Crossbody1 x $200.00
Total:
$289.68 
View Cart
Checkout

Documentation

  • Home
  •  
  • Documentation

Using Preprocessors (Pug & Sass)

Sass (Syntactically Awesome Style Sheets)
Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It is the most mature, stable, and powerful professional grade CSS extension language in the world. Sass gives you the power of variables, mixins, functions, etc.
Pug (former Jade)
Pug is a high performance Node.js Templating Engine. Just like SASS, Pug is a prepocessor and, as such it helps you accomplishing tasks like wrapping away repetitive work by providing features not available in plain HTML like variables, includes, mixins, functions, etc.

Compiling Sass and Pug

Again, if you are not using Node.js and Grunt setup, don't like command line interface there is another way to work with preprocessors. There is a popular software (GUI) for compiling Sass and Pug called "Prepross". Visit it's website at https://prepros.io/. Basic version is completely free and available for Mac and Windows.

Prepros

Sass files structure

Folder / File name Description
base folder Folder contains _scaffolding.scss and _utilities.scss files. Most basic styles and commonly used classes. More about utility classes learn in Utility Classes section.
helpers folder As name stands this folder holds helper Sass files namely: _variables.scss, _mixins.scss, _placeholders.scss.
layout folder Main structural components of the template: _footer.scss, _grid.scss, _header.scss, _page-title.scss, _section.scss, _offcanvas-menu.scss.
modules folder Template modules: _account.scss, _blog.scss, _shop.scss.
components folder All components used accross the template. Learn more about available components in Components section.
styles.scss Main Sass file that imports all other files and is compiled to styles.min.css.