This cheat sheet is created. ASSETS - Uncompiled assets (like Less / Sass). STATIC - Unchanging files (like robots.txt). COMPONENTS LAYOUTS - Application layouts. Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart. Few months ago, I started working with SASS - I use SCSS syntax cause I care about my mental health. It’s not particularly difficult, and if you learnt CSS, well, you could learn SASS. One of the first thing I wanted was some kind of SASS cheatsheet - so I summarized the main features of SASS in a SASS file.
Using SASS (SCSS) gives you power to use features which are not available in CSS yet. SASS makes the CSS easy and enjoyable. SASS is nothing but a re-usable code which we will have to compile before publishing it to production/ live.
We can declare variables, functions, etc… we can also do nesting. My favourite feature is MIXIN. We can define mixins in the settings file and include it in other .scss files to use the mixins defined in the file.
Here, I have my favourite 6 mixins, I use in each of my project.
1. Breakpoints
For the projects with Bootstrap, I have defined below breakpoints which are inline with the breakpoints of Bootstrap. It becomes very handy at the time of working.
Sass Cheat Sheet Pdf
Usage
2. Vendor Prefixes
There are two SCSS mixins, I used in my projects. One is for CSS3 properties like – transform, transitions and second is for animation.
Usage
For mixin declared as vendor-prefix, we can use it as below:
For Animation, we first need to define the animation keyframes using the mixin declared with keyframes.
After declaring the keyframes we can use it with our vendor-prefix mixins to animate any element as defined in keyframes mixins.
3. Anchor Links
As we, as Web Developer know that we need to define anchor elements different states with the theme we’re using, it is really tedious task to define all states of links as we might have different colours for headers, body and footers or may be for related area. With SCSS we can define all of the states of anchor link with one line.
Usage
We can define each state’s colour saperated by comma in the mixin and weather we have text-decoration with underline or not. OR we can define only one colour in case we have same style for all the states.
Sass Cheat Sheet Pdf
4. Font Size
With mixins we can define font size in rem (root ems) without remembering to declare the font size in px as fallback for IE browsers.
Usage
The function will automatically count the rem size from the px and use it with rem and before that it will add the font size in px for fallback.
5. Clearfix
We can avoid using extra class in DOM by including this mixins wherever needed.
Usage
6. Visually Hidden Element
We can have a css ready to include on any class to make it visually hidden, but available for screen reader to read.
Usage
I use this mixin on every project and it helps me save lots of time. I hope this will also help you to save time and expedite project.
Let me know what do you think of this cheat sheet and if there’s any more useful mixins you have and want me to include in this sheet, please share it in the comment box and I will add it in the list.