SASS
Apprenticeship project

SASS

Apprenticeship project • 2015

I created this online presentation about the dynamic style options of the CSS modification "SASS" during my apprenticeship in 2015.

The Task

In the first year of my apprenticeship as a media designer digital and print, our online lecturer commissioned us to research different web frameworks, so that we could present them to each other.



The Goal


To learn about common web frameworks, such as Bootstrap or Angular, and learn how to implement them future projects on a fundamental level.


SASS = Syntactically Awesome Style Sheets




Research & considerations


I started by researching for frameworks that I would want to use in future projects. While downloading the files of several frameworks, I realized that many of them used ".sass", ".scss" or ".less" files.
While discussing this discovery with fellow trainees, I realized that this didn't just occur in the frameworks I downloaded, but in almost every popular web framework.

Since nobody of us knew at that time, what exactly these files were and why these are useful, I knew I wanted to address this topic in my framework presentation.


Execution

After discussing the discovery and my idea with the online lecturer, I started researching the file extensions and their meanings.
I quickly found out that these are modified forms of CSS, used for styling purposes.

These modified CSS files offer the benefits that colours, fonts and more styles are addressable via variables, which allows for faster and more precise modifications of the styles.
To teach the class about SASS and simultaneously learn more about it in the fastest way possible, I decided to code this presentation website using SASS for the styling.

Using the website as a "red thread", I told my fellow trainees what I found out about the CSS "alternatives" SASS, SCSS & LESS. For example, which advantages the modified CSS versions offer and how they can be used.



Explaining the differences & similarities between SASS, SCSS & LESS




Feedback


The feedback about my presentation was very positive.
My lecturer told me that he was amazed by how fast I taught myself SASS and how well I explained it to the fellow trainees.

Thanks to the learnings in this project, I was able to help fellow trainees in future projects in regards to SASS, SCSS & LESS as well as the implementation of frameworks.



Conclusion


During my research and while setting up the website, I learnt that SASS, SCSS & LESS are mainly used by front end developers to style websites more efficiently. Especially in large-scale projects such as webshops.
I quickly learned how to use some features of SASS, such as variables, "nesting", or direct import of external styles, and learned how to use different compilers to "translate" the SASS code into CSS.

Annotations

This website is not optimized for small mobile devices.

Trained media designer digital & print.
Self-taught UX & UI designer.

Solving user & business problems with design.