From 52487df8c0ba7b944f16bc2a31e696c07dc3daae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Halil=20=C4=B0brahim=20=C3=87ak=C4=B1ro=C4=9Flu?=
 <ibrahimchll@hotmail.com>
Date: Sun, 16 Jan 2022 00:44:43 +0300
Subject: [PATCH] Add extend feature for Loadify mixin.

---
 CHANGELOG.md                |  3 +++
 package.json                |  2 +-
 scss/_gerillass-prefix.scss | 31 ++++++++++++++++++++++---------
 scss/library/_loadify.scss  | 13 ++++++++-----
 4 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 77d1542..ee1f96b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # Changelog
 _Change is the essence._
 
+## 1.2.1
+* Add @extend fuctionality to use Loadify mixin for multiple selectors.
+
 ## 1.2.0
 * Add Loadify: A new mixin to help page elements render more natural during the time of page loads.
 
diff --git a/package.json b/package.json
index 75739b3..a148a44 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "author": "Halil İbrahim Çakıroğlu",
   "main": "scss/_gerillass.scss",
   "license": "Apache-2.0",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/selfishprimate/gerillass"
diff --git a/scss/_gerillass-prefix.scss b/scss/_gerillass-prefix.scss
index 3df9c33..6213744 100644
--- a/scss/_gerillass-prefix.scss
+++ b/scss/_gerillass-prefix.scss
@@ -802,18 +802,31 @@
     @keyframes loadify {
       to {
         opacity: 1;
+        visibility: visible;
+        backface-visibility: visible;
       }
     }
+    .static-rules {
+      opacity: 0;
+      visibility: hidden;
+      backface-visibility: hidden;
+      animation-name: loadify;
+      animation-fill-mode: forwards;
+    }
   } @else if not & and length($params) > 0 {
-    @warn "PLEASE DO NOT PASS AN ARGUMENT WHEN YOU CALL THE MIXIN AT THE ROOT OF YOUR STYLESHEET! \A";
-  } @else if & and length($params) == 0 {
-    @warn "PLEASE PASS AN ARGUMENT TO SPECIFY HOW MANY SECONDS OR MILLISECONDS THE ELEMENTS WILL BE DELAYED! \A \A .element { \A   @incude loadify(0.2s); \A } \A ";
-  } @else if length($params) > 0 and length($params) < 3 {
-    opacity: 0;
-    animation-name: loadify;
-    animation-fill-mode: forwards;
-    animation-delay: nth($params, 1);
-    animation-duration: if(length($params) == 2, #{nth($params, 2)}, 0.5s);
+    @error "PLEASE DO NOT PASS AN ARGUMENT WHEN YOU CALL LOADIFY MIXIN AT THE ROOT OF YOUR STYLESHEET! \A";
+  } @else if & and length($params) == 0 or length($params) < 3 {
+    @extend .static-rules;
+    @if length($params) == 0 {
+      animation-delay: 0.2s;
+      animation-duration: 0.5s;
+    } @else if length($params) == 1 {
+      animation-delay: #{nth($params, 1)};
+      animation-duration: 0.5s;
+    } @else if length($params) == 2 {
+      animation-delay: #{nth($params, 1)};
+      animation-duration: #{nth($params, 2)};
+    }
   } @else if length($params) > 2 {
     @error "NO MORE THAN 2 ARGUMENTS ARE ALLOWED! \A";
   }
diff --git a/scss/library/_loadify.scss b/scss/library/_loadify.scss
index c02f460..7444350 100644
--- a/scss/library/_loadify.scss
+++ b/scss/library/_loadify.scss
@@ -9,14 +9,17 @@
         backface-visibility: visible;
       }
     }
+    .static-rules {
+      opacity: 0;
+      visibility: hidden;
+      backface-visibility: hidden;
+      animation-name: loadify;
+      animation-fill-mode: forwards;
+    }
   } @else if not & and length($params) > 0 {
     @error "PLEASE DO NOT PASS AN ARGUMENT WHEN YOU CALL LOADIFY MIXIN AT THE ROOT OF YOUR STYLESHEET! \A";
   } @else if & and length($params) == 0 or length($params) < 3 {
-    opacity: 0;
-    visibility: hidden;
-    backface-visibility: hidden;
-    animation-name: loadify;
-    animation-fill-mode: forwards;
+    @extend .static-rules;
     @if length($params) == 0 {
       animation-delay: 0.2s;
       animation-duration: 0.5s;