This is a basic responsive frontend highlighting some of the key aspects of the CSS preprocessor SASS.
Based on the tutorial by DesignCourse
In ./css/main.scss
you will find the main code for the project.
-
Variables
//Creation $padding: 15px; $borders: 15px; //Use padding: $padding;
-
Grouped Variables (objects)
$colors: ( primary: #005dff, primary-light: lighten(#005dff, 40%), primary-dark: darken(#005dff, 40%), accent: #fff6bb );
-
Functions
Create Function//function below is cleaning up object variable call @function color($color-name) { // way to call key:value pairs from sass objects @return map-get($colors, $color-name); }
Use Functionbackground-color: color(primary);
-
Mixins
Creat Mixin//below is used to make basic @media query formate @mixin desktop { @media (min-width: #{$desktop}) { @content; } }
Use Mixin@include desktop { display: grid; grid-template-columns: 50% auto; grid-template-areas: "primary card"; }
-
Nested Structure
It is possible to use nested structures in SASS to mimic the HTML structure. This helps with organization.ul { list-style-type: none; margin: 0; padding: 0; li { margin-bottom: 10px; span { position: absolute; width: 30px; height: 30px; background-color: color(primary-light); border-radius: 50%; margin-right: 10px; } strong { display: inline-block; margin-left: max(40px); margin-top: 10px; } } }
-
Math
You can do math in SASS.//Use Case padding: $padding * 4;