diff --git a/README.md b/README.md index 984ca006..fd6de668 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,7 @@ Feel free to take a look. You might learn new things. They have been designed to - [HTML5](frontend/html5.html) - [CSS3](frontend/css3.css) +- [SCSS](frontend/scss.scss) #### Frameworks diff --git a/frontend/scss.scss b/frontend/scss.scss new file mode 100644 index 00000000..5c34c7da --- /dev/null +++ b/frontend/scss.scss @@ -0,0 +1,442 @@ +/**************************** + * SCSS CHEATSHEET + * Documentation: https://sass-lang.com/documentation/ + * + * + * Table of contents + * ----------------- + * 01 | Variables + * 02 | Nesting + * 03 | Interpolation + * 04 | Operators + * 05 | At-Rules + * - @use + * - @include + * - @extend + * - @function + * - @mixin and @include + * - @if + * - @else and @else if + * - @for + * - @each + * - @while + *****************************/ + +/*************************** + +------------ 01: Variables ----------- + +You can define variables in SCSS using the $ symbol as prefix and assign a value. +We can then refer this variable anywhere instead of the value in the SCSS file. +This helps in reducing repetition and makes it easier to update the value in one place. + +*******************************/ +// $success-color and $error-color are variables defined with color values + +$success-color: #56c0a4; +$error-color: #ff5b5b; + +.success-notification { + color: $success-color; +} + +.error-notification { + color: $error-color; +} + +.valid { + background-color: $success-color; +} + +.invalid { + background-color: $error-color; +} + +/*** CSS Output ***/ + +.success-notification { + color: #56c0a4; +} + +.error-notification { + color: #ff5b5b; +} + +.valid { + background-color: #56c0a4; +} + +.invalid { + background-color: #ff5b5b; +} + +/*************************** + +------------ 02: Nesting ----------- + +SCSS allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. + +
+

Title

+

Content 1

+

Content 2

+
+ +*******************************/ + +.container { + width: 100%; + .header { + font-size: 24px; + } + .content { + font-size: 16px; + } +} + +/*** CSS Output ***/ + +.container { + width: 100%; +} +.container .header { + font-size: 24px; +} +.container .content { + font-size: 16px; +} + +/*************************** + +------------ 03: Interpolation ----------- + +Interpolation is a way to embed a variable value into a string. It is done using the #{} syntax. +Below is just a simple example, you can see better practical usages of interpolation in the At-Rules section. + +*******************************/ +$element: 'p'; + +#{$element} { + color: #e0ffff; +} + +/*** CSS Output ***/ + +p { + color: #e0ffff; +} + +/*************************** + +------------ 04: Operators ------------ +We can use operators in SCSS to perform arithmetic operations. + +*******************************/ + +$padding: 4px; +$font-size: 2rem; + +.header { + padding: $padding * 2; + font-size: $font-size + 2; +} + +.para { + padding: calc($padding / 2); + font-size: $font-size - 1; +} + +/*** CSS Output ***/ + +.header { + padding: 8px; + font-size: 4rem; +} + +.para { + padding: 2px; + font-size: 1rem; +} + +/*************************** + +------------ 05: At-Rules ----------- + +At-Rules are special instructions to the SCSS preprocessor. They are prefixed with the @ symbol. + +*******************************/ + +// @use + +// @use is a directive in SCSS that replaces @import and provides better control over how you import and use code from other stylesheets. +// Assume we have a file named _variables.scss + +// _variables.scss +$containerWidth: 100px; +$cardHeight: 60px; + +@function doubleWidth($width) { + @return $width * 2; +} + +// We can use the variables defined in _variables.scss in our main SCSS file as follows: + +@use 'variables' as v; + +.container { + width: v.doubleWidth(v.$containerWidth); // 200px +} + +.card { + height: v.$cardHeight; // 60px +} + +// @extend + +// @extend is used to inherit styles from another selector. + +.error { + border: 1px solid red; +} + +.error-notification { + @extend .error; + background-color: #ff5b5b; +} + +/*** CSS Output ***/ + +.error, +.error-notification { + border: 1px solid red; +} + +.error-notification { + background-color: #ff5b5b; +} + +/*****************/ + +// @function + +// @function is used to define a function in SCSS to perform operations and return a value. + +$spacing: 4px; + +@function spacing($value) { + @return $value * $spacing; +} + +.container { + padding: spacing(4); +} + +/*** CSS Output ***/ + +.container { + padding: 16px; +} +/*****************/ + +// @mixin and include + +// @mixin is used to define a mixin in SCSS to reuse styles. +// @include is used to include a mixin in the current selector. + +// $color is a parameter with a default value of #000, when not passed it defaults to #000 +@mixin border-radius($radius, $color: #e82b2b) { + border-radius: $radius; + color: $color; +} + +.button-primary { + @include border-radius(4px, #56c0a4); +} + +.button-secondary { + @include border-radius(4px); +} + +/*** CSS Output ***/ + +.button-primary { + border-radius: 4px; + color: #56c0a4; +} + +.button-secondary { + border-radius: 4px; + color: #e82b2b; // default value +} +/*****************/ + +// @if + +// @if is used to conditionally apply styles. +// In the below example, if the value of $progress is greater than or equal to 80, the green background-color will be added. + +@mixin show-progress($progress: 0) { + @if $progress >= 80 { + background-color: green; + } + color: #ffffff; +} + +.progress-bar-1 { + @include show-progress(90); +} + +.progress-bar-2 { + @include show-progress(); +} + +/*** CSS Output ***/ + +.progress-bar-1 { + background-color: green; + color: #ffffff; +} + +.progress-bar-2 { + color: #ffffff; +} +/*****************/ + +// @else + +// @else and @else if are used to define alternative conditions for @if. + +@mixin show-progress($progress: 0) { + @if $progress >= 80 { + background-color: green; + } @else if $progress >= 40 { + background-color: orange; + } @else { + background-color: red; + } + color: #ffffff; +} + +.progress-bar-1 { + @include show-progress(90); +} + +.progress-bar-2 { + @include show-progress(40); +} + +.progress-bar-3 { + @include show-progress(); +} + +/*** CSS Output ***/ + +.progress-bar-1 { + background-color: green; + color: #ffffff; +} + +.progress-bar-2 { + background-color: orange; + color: #ffffff; +} + +.progress-bar-3 { + background-color: red; + color: #ffffff; +} +/*****************/ + +// @for + +// @for is used to loop through a range of values. + +@for $i from 1 through 3 { + .item-#{$i} { + // Interpolation to create class names item-1, item-2, item-3 + padding: 4px * $i; + } +} + +/*** CSS Output ***/ + +.item-1 { + padding: 4px; +} + +.item-2 { + padding: 8px; +} + +.item-3 { + padding: 12px; +} +/*****************/ + +// @each + +// @each is used to loop through a list of values. + +$statuses: ( + 'success': 'green', + 'warn': 'orange', + 'error': 'red', +); + +@each $type, $color in $statuses { + .#{$type} { + color: $color; + } +} + +/*** CSS Output ***/ + +.success { + color: 'green'; +} + +.warn { + color: 'orange'; +} + +.error { + color: 'red'; +} +/*****************/ + +// @while + +// @while is used to loop through a block of code while a condition is true. + +$i: 5; + +@while $i > 0 { + .item-#{$i} { + background-color: rgba(255, 0, 0, $i * 0.1); + } + $i: $i - 1; +} + +/*** CSS Output ***/ + +.item-5 { + background-color: rgba(255, 0, 0, 0.5); +} + +.item-4 { + background-color: rgba(255, 0, 0, 0.4); +} + +.item-3 { + background-color: rgba(255, 0, 0, 0.3); +} + +.item-2 { + background-color: rgba(255, 0, 0, 0.2); +} + +.item-1 { + background-color: rgba(255, 0, 0, 0.1); +} + +/****************************************************************/