Merge e39a183086 into 88e5be6e4b

fix spelling and whitespace in cheatsheets

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
 

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.
+
+<div class="container">
+  <h1 class="header">Title</h1>
+  <p class="content">Content 1</p>
+  <p class="content">Content 2</p>
+</div>
+
+*******************************/
+
+.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);
+}
+
+/****************************************************************/

languages/C#.txt

@@ -88,7 +88,7 @@ CHEATSHEET C#
     string newStr = oldStr.Replace("old","new");
 
     //IndexOf
-    //Finds the first ocurrence of a string in a larger string
+    //Finds the first occurrence of a string in a larger string
     //Returns -1 if the string is not found
     String.IndexOf(val, start, num)
     val - string to search for
@@ -102,7 +102,7 @@ CHEATSHEET C#
     String.Split(Char[]);
 
     //ToCharArray
-    //Places selected characteres in a string in a char array
+    //Places selected characters in a string in a char array
     String str = "AaBbCcDd";
     //create array of 8 vowels
     var chars = str.ToCharArray();
@@ -135,7 +135,7 @@ CHEATSHEET C#
 
     6.1 TimeSpan Constructor
 
-    TimpeSpan(hour, minute, sec)
+    TimeSpan(hour, minute, sec)
 
     TimeSpan timeS = new TimeSpan(10, 14, 50);
     TimeSpan timeS_Hours = TimeSpan.FromDays(3640);
@@ -144,8 +144,8 @@ CHEATSHEET C#
 
     Format item syntax: {index[,alignment][:format string]}
     index - Specifies element in list of values to which format is applied
-    aligment - Indicates minimun width (in characters) to display value
-    format string - Contains the code which specififes the format of the displayed value
+    alignment - Indicates minimum width (in characters) to display value
+    format string - Contains the code which specifies the format of the displayed value
 
     7.1 Numeric
 
@@ -293,7 +293,7 @@ CHEATSHEET C#
     [access modifier] className (parameters) [:initializer]
 
     initializer -base calls constructor in base class.
-                 this calls constuctor within class.
+                 this calls constructor within class.
 
     public class nameClass : Initializer {
         public className(dataType param1 , dataType param2, ...) : base(param1, param2)
@@ -313,8 +313,8 @@ CHEATSHEET C#
     abstract – must be implemented by subclass
 
     Passing parameters:
-        1. By default, parametres are passed by value
-        2. Passing by reference: ref, in and out modifers
+        1. By default, parameters are passed by value
+        2. Passing by reference: ref, in and out modifiers
 
     To pass a parameter by reference with the intent of changing the value, use the ref, or out keyword. To pass by reference with the intent of avoiding copying but not changing the value, use the in modifier
 

languages/bash.sh

@@ -524,14 +524,14 @@ Cyan='\033[0;36m'   # Cyan
 White='\033[0;97m'  # White
 
 # Additional colors
-LGrey='\033[0;37m'  # Ligth Gray
+LGrey='\033[0;37m'  # Light Gray
 DGrey='\033[0;90m'  # Dark Gray
-LRed='\033[0;91m'   # Ligth Red
-LGreen='\033[0;92m' # Ligth Green
-LYellow='\033[0;93m'# Ligth Yellow
-LBlue='\033[0;94m'  # Ligth Blue
+LRed='\033[0;91m'   # Light Red
+LGreen='\033[0;92m' # Light Green
+LYellow='\033[0;93m'# Light Yellow
+LBlue='\033[0;94m'  # Light Blue
 LPurple='\033[0;95m'# Light Purple
-LCyan='\033[0;96m'  # Ligth Cyan
+LCyan='\033[0;96m'  # Light Cyan
 
 
 # Bold

languages/golang.md

@@ -397,8 +397,8 @@ d, t := doubleAndTriple(5)
 _, t := doubleAndTriple(3)
 // t = 9
 
-// Functions can defer commands. Defered commands are
-// runned in a stack order after the execution and
+// Functions can defer commands. Deferred commands are
+// ran in a stack order after the execution and
 // returning of a function
 var aux = 0
 
@@ -488,7 +488,7 @@ person3.Age // 0
 
 ## Maps
 
-Maps are data structures that holds values assigneds to a key.
+Maps are data structures that holds values assigned to a key.
 
 ```go
 // Declaring a map
@@ -508,7 +508,7 @@ newYork // "EUA"
 // Delete
 delete(cities, "NY")
 
-// Check if a key is setted
+// Check if a key is set
 value, ok := cities["NY"]
 ok // false
 value // ""

languages/java.md

@@ -308,7 +308,7 @@ for(dataType item : array) {
   //Declare a variable, object name
   String s;
 
-  //Invoke a contructor to create an object
+  //Invoke a constructor to create an object
   s = new String ("Hello World");
 
   //Invoke an instance method that operates on the object's value

languages/php.php

@@ -1,8 +1,8 @@
 <?php
 
 // Exit the file, string inside get's echo'ed
-die("This file is not ment to be ran. ¯\_(ツ)_/¯");
-exit("This file is not ment to be ran. ¯\_(ツ)_/¯");
+die("This file is not meant to be ran. ¯\_(ツ)_/¯");
+exit("This file is not meant to be ran. ¯\_(ツ)_/¯");
 
 /**
  * Printing
@@ -17,7 +17,7 @@ var_dump($arr); // Print anything, with type hints for any value and sizes
 $string = 'Awesome cheatsheets';
 
 str_contains($string, 'cheat'); // Find if the string contains the specified string (PHP >= 8.0)
-str_replace('Awesome', 'Bonjour', $string); // Replace all occurence
+str_replace('Awesome', 'Bonjour', $string); // Replace all occurrence
 strcmp($string, 'Awesome cheatsheets'); // Compare two strings
 strpos($string, 'a', 0); // Get position in the string
 str_split($string, 2); // Split the string
@@ -541,7 +541,7 @@ u   Pattern is treated as UTF-8
 \w  Any "word" character (a-z 0-9 _)
 \W  Any non "word" character
 \s  Whitespace (space, tab CRLF)
-\S  Any non whitepsace character
+\S  Any non whitespace character
 \d  Digits (0-9)
 \D  Any non digit character
 .   (Period) - Any character except newline

languages/python.md

@@ -71,7 +71,7 @@
 | import | import libraries/modules/packages | import |
 | from | import specific function/classes from modules/packages | import |
 | try | this block will be tried to get executed | exception handling |
-| except | is any exception/error has occured it'll be executed | exception handling |
+| except | is any exception/error has occurred it'll be executed | exception handling |
 | finally | It'll be executed no matter exception occurs or not | exception handling |
 | raise | throws any specific error/exception | exception handling |
 | assert | throws an AssertionError if condition is false | exception handling |