mirror of
https://github.com/LeCoupa/awesome-cheatsheets.git
synced 2026-01-27 13:48:01 -08:00
443 lines
7.1 KiB
SCSS
443 lines
7.1 KiB
SCSS
/****************************
|
|
* 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: $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);
|
|
}
|
|
|
|
/****************************************************************/
|