Marketpath CMS Developer Tutorial Series

Stylesheets

Last Updated 3/6/2018

If you are a developer and do not understand the significance of stylesheets then you are reading the wrong tutorial. So what does Marketpath do to make it easy to create and maintain stylesheets? Read on to find out.

Just like javascript files, all stylesheets are served over the CDN. This comes with the same challenge as javascript files if you want to reference the stylesheet from another site. Since we covered that in the javascript lesson, however, we are not going to repeat it here.

Unlike javascript files, we do have the ability to combine and process stylesheets. We accomplish this through the practice of CSS preprocessing utilizing your choice of SCSS or LESS.

If you have not written CSS using SCSS or LESS before, you have to try it. Both of these options are backwards-compatible with CSS code, so you don't have to learn a new syntax if you don't want to. But you probably will.

Some of the features of both SCSS and LESS files are:

  • Include other "partial" SCSS and LESS files to keep your code more organized and accessible.
  • Use variables to make your code more readable and easier to write (what's that shade of green again? Oh, yeah - @valid-green)
  • Nest rules to reduce copy/paste and make changes easier
  • Define re-usable "logic" to increase readability and reduce the amount of code you have to maintain
  • And more... resulting in faster development times, better code quality, and simpler maintenance.

Stylesheets are included in templates using the {% add_stylesheet %} liquid tag.

---- End of Lesson ----

Question? Correction?

Let's work together to make our documentation as helpful as possible.

What is your name? 
What is your email address? 
Feedback: