mirror of
https://github.com/LeCoupa/awesome-cheatsheets.git
synced 2026-01-27 13:48:01 -08:00
Merge e39a183086 into 88e5be6e4b
This commit is contained in:
Harish-clb
GitHub
@@ -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
|
||||
|
||||
|
||||
442
frontend/scss.scss
Normal file
442
frontend/scss.scss
Normal file
@@ -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);
|
||||
}
|
||||
|
||||
/****************************************************************/
|
||||
Reference in New Issue
Block a user