/* In SASS */
.alert, .warning {
ul, p {
margin-right: 0;
margin-left: 0;
padding-bottom: 0;
}
}
/* In CSS */
.alert ul, .alert p, .warning ul, .warning p {
margin-right: 0;
margin-left: 0;
padding-bottom: 0;
}
/* In SASS */
ul > {
li {
}
}
transition: {
property: font-size;
duration: 4s;
delay: 2s;
}
/* In CSS */
.class {
transition-property: ;
transition-duration: ;
transition-delay: ;
}
/* In SASS */
margin: auto {
bottom: 10px;
top: 2px;
}
/* In CSS */
.class {
margin: auto;
margin-bottom: 10px;
margin-top: 2px;
}
/* In SASS - Define Mixin with Default Arguments */
/* hyphen(-) & underscore(_) are identical */
@mixin button(
$width: 50%,
$background-color: $secondary-color-dark,
$text-color: $color-black,
$is-border-radius: true
) {
display: block;
background-color: $background-color;
color: $text-color;
cursor: pointer;
width: $width / $base-font-size * 1% or $width;
text-align: center;
padding: 1rem;
transition: all 0.2s;
text-decoration: none;
border: none;
@if $is-border-radius {
border-radius: $border-radius;
}
&:hover {
background-color: darken($background-color, 15%);
transform: scale(1.05);
color: lighten($text-color, 100%);
}
}
/* Use Mixin */
.button-1 {
@include button(50%, $tertiary-color-dark, $color-white, false);
}
.button-2 {
/* When we do not pass arguments, it will take default one as like in any other languages */
@include button();
}
.button-3 {
@include button(40%, $tertiary-color-light, $color-black, false);
}
$variable: global value;
.content {
$variable: local value;
value: $variable;
}
/* !global keyword*/
$variable: first global value;
.content {
$variable: second global value !global;
/* Now We changed value of global scope from local scope using !global*/
value: $variable;
}
@mixin inline-animation($duration) {
/* unique-id() function will generate unique-id everytime you called mixin */
$name: inline-#{unique-id()};
@keyframes #{$name} {
@content;
}
animation-name: $name;
animation-duration: $duration;
animation-iteration-count: infinite;
}
.pulse-1 {
@include inline-animation(2s) {
/* What we write inside @include is called @content,
that can be dynamically changeable everytime we called mixin */
from { background-color: yellow }
to { background-color: red }
}
}
.pulse-2 {
@include inline-animation(2s) {
/* What we write inside @include is called @content,
that can be dynamically changeable everytime we called mixin */
from { background-color: brown }
to { background-color: yellow }
}
}
/* Block of Code that defined using %placeholder can reusable using @extend
keyword in other classes or div */
%tool-belt {
box-sizing: border-box;
border-top: 1px rgba(#000, 0.12) solid;
padding: 1rem;
width: 100%;
&:hover {
border: 2px rgba(#000, 0.5) solid;
}
}
/* While Extending... */
.tool-belt-1 {
@extend %tool-belt;
color: #4285f4;
}
.tool-belt-2 {
@extend %tool-belt;
color: #567877;
}
/* meta.Keywords() return list that can be iterable */
@mixin inline-text-colors($args...) {
@each $name, $color in keywords($args) {
span.stx-#{$name} {
color: $color;
/* map-get(list, key) --> Return Value */
font-weight: map-get($base-font-bold, "extra-bold");
}
}
}
.inline-text-colors {
@include inline-text-colors($success: $color-success, $warning: $color-danger, $highlight: #60b);
}
/* SASS */
@for $i from 0 through $multiplier {
@if $is-point-grid-system {
.#{$project-prefix-name}-m-#{$i} {
margin: $point-grid * $i + px;
}
.#{$project-prefix-name}-mt-#{$i} {
margin-top: $point-grid * $i + px;
}
...
} @else if $is-point-grid-system != true {
.#{$project-prefix-name}-m-#{$i} {
margin: $i + rem;
}
.#{$project-prefix-name}-mt-#{$i} {
margin-top: $i + rem;
}
...
}
}
/* How can we use? */
class="pg-p-1 pg-m-1
class="pg-p-2 pg-m-2
class="pg-p-3 pg-m-3
@function invert($color, $amount: 100%) {
$inverse: change-color($color, $hue: hue($color) + 180);
@return mix($inverse, $color, $amount);
}
.invert-block-1 {
background-color: $primary-color;
&:hover {
background-color: invert($primary-color, 60%);
}
}
.invert-block-2 {
background-color: $primary-color;
&:hover {
background-color: invert($primary-color, 30%);
}
}
@function convert-into-rem($size) {
@if $size > 0px and $base-font-size > 0px {
@return $size / $base-font-size + rem;
}
}
.convert-to-rem {
font-size: convert-to-rem(32px);
@debug convert-to-rem(32px);
}
@mixin border($sides, $weight: 1px, $type: solid, $color: $primary-color) {
@each $side in $sides {
border-#{$side}: $weight $type $color;
}
}
.border-1 {
@include border(top left bottom right, 2px);
}
.border-2 {
@include border(top, 2px, solid, $secondary-color-dark);
}
.border-3 {
@include border(left right, 3px, dashed, $tertiary-color-dark);
}
/* @error rule stop the compliling and give an error */
$known-sides: top, right, bottom, left;
@mixin border($sides, $weight: 1px, $type: solid, $color: $primary-color) {
@each $side in $sides {
@if not index($known-sides, $side ) {
@error "Unknown side #{$side}.";
}
border-#{$side}: $weight $type $color;
}
}
/* @warn rule do not stop the compliling and give an warning */
/* In above example, we can write @wan instead of @error */
@warn "Unknown side #{$side}.";
/* @debug rule print something to the console */
@debug "User Entered side --> #{$side}.";
/* Variable defined using (_) or (-) are private Variables */
$_count: 1;
$_define-heading-size: 10;
@while $_count < $_define-heading-size {
@if $is-point-grid-system {
.#{$project-prefix-name}-h-#{$_count} {
/* unquote removes quotes - "16px" -> 16px */
font-size: unquote($point-grid * $_count + "px");
}
} @else {
.#{$project-prefix-name}-h-#{$_count} {
font-size: $base-font-size * $_count;
}
}
$_count: $_count + 1;
}
.myclass {
background-color: grey;
height: 100px;
margin: 50px;
width: 100px;
transition: 0.3s ease;
/* Defines block of code at root scope/level */
@at-root {
/* This Keyframes defined *at-root* level in compiled css */
@keyframes fade {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}
}
&:hover {
animation: fade 5s infinite;
}
}