From 7167f05ace9ed492068637f2f1671eb1c2685fd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beatriz=20Sopen=CC=83a=20Merino?= Date: Tue, 22 Oct 2024 13:19:13 +0200 Subject: [PATCH 1/8] refactor(sass): unify underline header comment style across all files Reason: - The header comments was inconsistent with the rest of the files. All files should follow the same comment style with a standardized underline format to maintain consistency and readability across the codebase. Steps: - Update the header comments to match the style used in other files. --- src/assets/scss/settings/settings-breakpoints.scss | 2 +- src/assets/scss/settings/settings-colors.scss | 8 ++++---- src/assets/scss/settings/settings-fonts.scss | 4 ++-- src/assets/scss/styles.scss | 6 +++--- src/assets/scss/tools/tools-media.scss | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/assets/scss/settings/settings-breakpoints.scss b/src/assets/scss/settings/settings-breakpoints.scss index 2a2f7749..98b09f13 100644 --- a/src/assets/scss/settings/settings-breakpoints.scss +++ b/src/assets/scss/settings/settings-breakpoints.scss @@ -1,6 +1,6 @@ // SETTINGS // BREAKPOINTS -// ------------------ +// ================================================= // xs - mobile // sm - mobile diff --git a/src/assets/scss/settings/settings-colors.scss b/src/assets/scss/settings/settings-colors.scss index 5049396f..4fc915a8 100644 --- a/src/assets/scss/settings/settings-colors.scss +++ b/src/assets/scss/settings/settings-colors.scss @@ -1,10 +1,10 @@ // SETTINGS // COLORS -// ------------------ +// ================================================= @use "sass:color"; // GRAY SCALE -// ================================================= +// ---------------------------------------------------------------------- $color-black: #000000; $color-gray: #3f3f3f; $color-silver: #d5d5d5; @@ -12,12 +12,12 @@ $color-light: #fafafa; $color-white: #ffffff; // STATUS -// ================================================= +// ---------------------------------------------------------------------- $color-error: #ff6347; $color-success: #008080; // BRAND -// ================================================= +// ---------------------------------------------------------------------- $color-brand-1: #42b883; $color-brand-2: #35495e; $color-brand-2--dark: color.mix($color-black, $color-brand-2, 20%); diff --git a/src/assets/scss/settings/settings-fonts.scss b/src/assets/scss/settings/settings-fonts.scss index ea63dba5..8c20eb20 100644 --- a/src/assets/scss/settings/settings-fonts.scss +++ b/src/assets/scss/settings/settings-fonts.scss @@ -1,8 +1,8 @@ // SETTINGS // FONTS -// ------------------ +// ================================================= // BRAND -// ================================================= +// ---------------------------------------------------------------------- $font-brand-1: "Dauphin", "Bradley Hand", sans-serif; $font-brand-2: "Oxygen", helvetica, cursive; diff --git a/src/assets/scss/styles.scss b/src/assets/scss/styles.scss index fa222cf2..d286ec6d 100644 --- a/src/assets/scss/styles.scss +++ b/src/assets/scss/styles.scss @@ -1,12 +1,12 @@ // PARTIALS SCSS -// ------------------ +// =============================================================================== // SETTINGS -// ================================================= +// ---------------------------------------------------------------------- @forward "settings/settings-breakpoints"; @forward "settings/settings-colors"; @forward "settings/settings-fonts"; // TOOLS -// ================================================= +// ---------------------------------------------------------------------- @forward "tools/tools-media"; diff --git a/src/assets/scss/tools/tools-media.scss b/src/assets/scss/tools/tools-media.scss index 33f51dbe..091132f5 100644 --- a/src/assets/scss/tools/tools-media.scss +++ b/src/assets/scss/tools/tools-media.scss @@ -1,7 +1,7 @@ // TOOLS // MIXIN // media queries -// ------------------ +// ================================================= @use "sass:list"; @use "sass:map"; @use "sass:math"; From 525d9831976c79036375f72c12a3bafde88d163b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beatriz=20Sopen=CC=83a=20Merino?= Date: Tue, 22 Oct 2024 13:25:10 +0200 Subject: [PATCH 2/8] refactor(sass): align the title of the header comments with the respective folder names for clarity --- src/assets/scss/settings/settings-breakpoints.scss | 2 +- src/assets/scss/settings/settings-colors.scss | 2 +- src/assets/scss/settings/settings-fonts.scss | 2 +- src/assets/scss/tools/tools-media.scss | 3 +-- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/assets/scss/settings/settings-breakpoints.scss b/src/assets/scss/settings/settings-breakpoints.scss index 98b09f13..5fbd8a60 100644 --- a/src/assets/scss/settings/settings-breakpoints.scss +++ b/src/assets/scss/settings/settings-breakpoints.scss @@ -1,4 +1,4 @@ -// SETTINGS +// SETTINGS - VARIABLES // BREAKPOINTS // ================================================= diff --git a/src/assets/scss/settings/settings-colors.scss b/src/assets/scss/settings/settings-colors.scss index 4fc915a8..2745079f 100644 --- a/src/assets/scss/settings/settings-colors.scss +++ b/src/assets/scss/settings/settings-colors.scss @@ -1,4 +1,4 @@ -// SETTINGS +// SETTINGS - VARIABLES // COLORS // ================================================= @use "sass:color"; diff --git a/src/assets/scss/settings/settings-fonts.scss b/src/assets/scss/settings/settings-fonts.scss index 8c20eb20..deba6d14 100644 --- a/src/assets/scss/settings/settings-fonts.scss +++ b/src/assets/scss/settings/settings-fonts.scss @@ -1,4 +1,4 @@ -// SETTINGS +// SETTINGS - VARIABLES // FONTS // ================================================= diff --git a/src/assets/scss/tools/tools-media.scss b/src/assets/scss/tools/tools-media.scss index 091132f5..a6d32fae 100644 --- a/src/assets/scss/tools/tools-media.scss +++ b/src/assets/scss/tools/tools-media.scss @@ -1,5 +1,4 @@ -// TOOLS -// MIXIN +// TOOLS - MIXINS // media queries // ================================================= @use "sass:list"; From b28b629ee8084770f4a6f7f8f54781b724ac60ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beatriz=20Sopen=CC=83a=20Merino?= Date: Tue, 22 Oct 2024 13:27:34 +0200 Subject: [PATCH 3/8] refactor(sass): align file headers with respective file names for clarity --- src/assets/scss/tools/tools-media.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/scss/tools/tools-media.scss b/src/assets/scss/tools/tools-media.scss index a6d32fae..3aed2f15 100644 --- a/src/assets/scss/tools/tools-media.scss +++ b/src/assets/scss/tools/tools-media.scss @@ -1,5 +1,5 @@ // TOOLS - MIXINS -// media queries +// media // ================================================= @use "sass:list"; @use "sass:map"; From 4b33c158e7419142803aa1b7da273f7479e5e607 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beatriz=20Sopen=CC=83a=20Merino?= Date: Tue, 22 Oct 2024 13:29:57 +0200 Subject: [PATCH 4/8] refactor(sass): unify subtitles of header comment style across all files Reason: - The header comment was inconsistent with the rest of the files. All files should follow the same comment style with a standardized uppercase format to maintain consistency and readability across the codebase. Steps: - Update the header comment to match the style used in other files. --- src/assets/scss/tools/tools-media.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/scss/tools/tools-media.scss b/src/assets/scss/tools/tools-media.scss index 3aed2f15..45c33a8a 100644 --- a/src/assets/scss/tools/tools-media.scss +++ b/src/assets/scss/tools/tools-media.scss @@ -1,5 +1,5 @@ // TOOLS - MIXINS -// media +// MEDIA // ================================================= @use "sass:list"; @use "sass:map"; From f2ac1170cec707a6cca7844d60d483e43d037d6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beatriz=20Sopen=CC=83a=20Merino?= Date: Tue, 22 Oct 2024 13:34:05 +0200 Subject: [PATCH 5/8] refactor(sass): rename files to start with an underscore (_) as required for partials Error: - SCSS partials were not prefixed with an underscore (_), which is required for them to be recognized as partials by the Sass compiler. Without the underscore, Sass treats these files as standalone stylesheets, attempting to compile them directly, which can lead to errors or unwanted output. Solution: - Rename all SCSS partials to start with an underscore (_) to ensure they are treated as partials, meaning they will only be included when explicitly imported into other files. --- .../{settings-breakpoints.scss => _settings-breakpoints.scss} | 0 .../scss/settings/{settings-colors.scss => _settings-colors.scss} | 0 .../scss/settings/{settings-fonts.scss => _settings-fonts.scss} | 0 src/assets/scss/tools/{tools-media.scss => _tools-media.scss} | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename src/assets/scss/settings/{settings-breakpoints.scss => _settings-breakpoints.scss} (100%) rename src/assets/scss/settings/{settings-colors.scss => _settings-colors.scss} (100%) rename src/assets/scss/settings/{settings-fonts.scss => _settings-fonts.scss} (100%) rename src/assets/scss/tools/{tools-media.scss => _tools-media.scss} (100%) diff --git a/src/assets/scss/settings/settings-breakpoints.scss b/src/assets/scss/settings/_settings-breakpoints.scss similarity index 100% rename from src/assets/scss/settings/settings-breakpoints.scss rename to src/assets/scss/settings/_settings-breakpoints.scss diff --git a/src/assets/scss/settings/settings-colors.scss b/src/assets/scss/settings/_settings-colors.scss similarity index 100% rename from src/assets/scss/settings/settings-colors.scss rename to src/assets/scss/settings/_settings-colors.scss diff --git a/src/assets/scss/settings/settings-fonts.scss b/src/assets/scss/settings/_settings-fonts.scss similarity index 100% rename from src/assets/scss/settings/settings-fonts.scss rename to src/assets/scss/settings/_settings-fonts.scss diff --git a/src/assets/scss/tools/tools-media.scss b/src/assets/scss/tools/_tools-media.scss similarity index 100% rename from src/assets/scss/tools/tools-media.scss rename to src/assets/scss/tools/_tools-media.scss From c0a3504c9a3106b5df83da209681a68c1e7e457c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beatriz=20Sopen=CC=83a=20Merino?= Date: Tue, 22 Oct 2024 13:45:37 +0200 Subject: [PATCH 6/8] refactor(sass): move `contains` function to a separate file and update imports accordingly Error: - The `functions` and `mixins` must be in separate files. Solution: - Move the `contains` function from `_tools-media.scss` to a new file `_tools-contains.scss` for better separation of concerns. - Update `tools/_tools-media.scss` to remove the `contains` function and keep only media query mixins. - Update `styles.scss` to include the new `tools/_tools-contains.scss` file using `@forward`, allowing better separation of functions and mixins. --- src/assets/scss/styles.scss | 1 + src/assets/scss/tools/_tools-contains.scss | 8 ++++++++ src/assets/scss/tools/_tools-media.scss | 6 +----- 3 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 src/assets/scss/tools/_tools-contains.scss diff --git a/src/assets/scss/styles.scss b/src/assets/scss/styles.scss index d286ec6d..5aaff904 100644 --- a/src/assets/scss/styles.scss +++ b/src/assets/scss/styles.scss @@ -9,4 +9,5 @@ // TOOLS // ---------------------------------------------------------------------- +@forward "tools/tools-contains"; @forward "tools/tools-media"; diff --git a/src/assets/scss/tools/_tools-contains.scss b/src/assets/scss/tools/_tools-contains.scss new file mode 100644 index 00000000..91e9ea89 --- /dev/null +++ b/src/assets/scss/tools/_tools-contains.scss @@ -0,0 +1,8 @@ +// TOOLS - FUNCTIONS +// CONTAINS +// ================================================= +@use "sass:list"; + +@function contains($list, $item) { + @return list.index($list, $item) != null; +} diff --git a/src/assets/scss/tools/_tools-media.scss b/src/assets/scss/tools/_tools-media.scss index 45c33a8a..8b693810 100644 --- a/src/assets/scss/tools/_tools-media.scss +++ b/src/assets/scss/tools/_tools-media.scss @@ -1,16 +1,12 @@ // TOOLS - MIXINS // MEDIA // ================================================= -@use "sass:list"; @use "sass:map"; @use "sass:math"; @use "sass:meta"; +@use "../tools/tools-contains" as *; @use "../settings/settings-breakpoints" as *; -@function contains($list, $item) { - @return list.index($list, $item) != null; -} - @mixin media($breakpoint, $rule: "max", $dimension: "width") { $rules: "max", "min"; $dimensions: "width", "height"; From aa844ab95c733ca8bc0b5caf007e498cb2c4e439 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beatriz=20Sopen=CC=83a=20Merino?= Date: Tue, 22 Oct 2024 14:11:57 +0200 Subject: [PATCH 7/8] refactor(sass): rename and move files from `settings` and `tools` folders to `abstracts` folder Steps: - Rename `settings` folder to `variables`. - Move the `contains` function to `abstracts/functions/` and updated imports to reflect this change. - Move the `media` mixin to `abstracts/mixins/` and updated imports to reflect this change. - Move `variables`, `functions`, and `mixins` to the `abstracts` folder for clearer organization. - Update the main `styles.scss` to import all the necessary partials from the `abstracts` folder using `@forward`. - Align the title of the header comments with the respective folder names for clarity. - Separate the sections of sass variables by comments --- .../_abstracts-functions-contains.scss} | 2 +- .../mixins/_abstracts-mixins-media.scss} | 6 +++--- .../_abstracts-variables-breakpoints.scss} | 2 +- .../variables/_abstracts-variables-colors.scss} | 2 +- .../variables/_abstracts-variables-fonts.scss} | 2 +- src/assets/scss/styles.scss | 17 ++++++++--------- 6 files changed, 15 insertions(+), 16 deletions(-) rename src/assets/scss/{tools/_tools-contains.scss => abstracts/functions/_abstracts-functions-contains.scss} (86%) rename src/assets/scss/{tools/_tools-media.scss => abstracts/mixins/_abstracts-mixins-media.scss} (90%) rename src/assets/scss/{settings/_settings-breakpoints.scss => abstracts/variables/_abstracts-variables-breakpoints.scss} (92%) rename src/assets/scss/{settings/_settings-colors.scss => abstracts/variables/_abstracts-variables-colors.scss} (96%) rename src/assets/scss/{settings/_settings-fonts.scss => abstracts/variables/_abstracts-variables-fonts.scss} (90%) diff --git a/src/assets/scss/tools/_tools-contains.scss b/src/assets/scss/abstracts/functions/_abstracts-functions-contains.scss similarity index 86% rename from src/assets/scss/tools/_tools-contains.scss rename to src/assets/scss/abstracts/functions/_abstracts-functions-contains.scss index 91e9ea89..6d18f3ca 100644 --- a/src/assets/scss/tools/_tools-contains.scss +++ b/src/assets/scss/abstracts/functions/_abstracts-functions-contains.scss @@ -1,4 +1,4 @@ -// TOOLS - FUNCTIONS +// ABSTRACTS - FUNCTIONS // CONTAINS // ================================================= @use "sass:list"; diff --git a/src/assets/scss/tools/_tools-media.scss b/src/assets/scss/abstracts/mixins/_abstracts-mixins-media.scss similarity index 90% rename from src/assets/scss/tools/_tools-media.scss rename to src/assets/scss/abstracts/mixins/_abstracts-mixins-media.scss index 8b693810..a906121e 100644 --- a/src/assets/scss/tools/_tools-media.scss +++ b/src/assets/scss/abstracts/mixins/_abstracts-mixins-media.scss @@ -1,11 +1,11 @@ -// TOOLS - MIXINS +// ABSTRACTS - MIXINS // MEDIA // ================================================= @use "sass:map"; @use "sass:math"; @use "sass:meta"; -@use "../tools/tools-contains" as *; -@use "../settings/settings-breakpoints" as *; +@use "../functions/abstracts-functions-contains" as *; +@use "../variables/abstracts-variables-breakpoints" as *; @mixin media($breakpoint, $rule: "max", $dimension: "width") { $rules: "max", "min"; diff --git a/src/assets/scss/settings/_settings-breakpoints.scss b/src/assets/scss/abstracts/variables/_abstracts-variables-breakpoints.scss similarity index 92% rename from src/assets/scss/settings/_settings-breakpoints.scss rename to src/assets/scss/abstracts/variables/_abstracts-variables-breakpoints.scss index 5fbd8a60..d11f58ea 100644 --- a/src/assets/scss/settings/_settings-breakpoints.scss +++ b/src/assets/scss/abstracts/variables/_abstracts-variables-breakpoints.scss @@ -1,4 +1,4 @@ -// SETTINGS - VARIABLES +// ABSTRACTS - VARIABLES // BREAKPOINTS // ================================================= diff --git a/src/assets/scss/settings/_settings-colors.scss b/src/assets/scss/abstracts/variables/_abstracts-variables-colors.scss similarity index 96% rename from src/assets/scss/settings/_settings-colors.scss rename to src/assets/scss/abstracts/variables/_abstracts-variables-colors.scss index 2745079f..dcf6c1b1 100644 --- a/src/assets/scss/settings/_settings-colors.scss +++ b/src/assets/scss/abstracts/variables/_abstracts-variables-colors.scss @@ -1,4 +1,4 @@ -// SETTINGS - VARIABLES +// ABSTRACTS - VARIABLES // COLORS // ================================================= @use "sass:color"; diff --git a/src/assets/scss/settings/_settings-fonts.scss b/src/assets/scss/abstracts/variables/_abstracts-variables-fonts.scss similarity index 90% rename from src/assets/scss/settings/_settings-fonts.scss rename to src/assets/scss/abstracts/variables/_abstracts-variables-fonts.scss index deba6d14..6484c225 100644 --- a/src/assets/scss/settings/_settings-fonts.scss +++ b/src/assets/scss/abstracts/variables/_abstracts-variables-fonts.scss @@ -1,4 +1,4 @@ -// SETTINGS - VARIABLES +// ABSTRACTS - VARIABLES // FONTS // ================================================= diff --git a/src/assets/scss/styles.scss b/src/assets/scss/styles.scss index 5aaff904..e3e696da 100644 --- a/src/assets/scss/styles.scss +++ b/src/assets/scss/styles.scss @@ -1,13 +1,12 @@ // PARTIALS SCSS // =============================================================================== -// SETTINGS +// ABSTRACTS // ---------------------------------------------------------------------- -@forward "settings/settings-breakpoints"; -@forward "settings/settings-colors"; -@forward "settings/settings-fonts"; - -// TOOLS -// ---------------------------------------------------------------------- -@forward "tools/tools-contains"; -@forward "tools/tools-media"; +@forward "abstracts/functions/abstracts-functions-contains"; +// ------------------- +@forward "abstracts/mixins/abstracts-mixins-media"; +// ------------------- +@forward "abstracts/variables/abstracts-variables-breakpoints"; +@forward "abstracts/variables/abstracts-variables-colors"; +@forward "abstracts/variables/abstracts-variables-fonts"; From 12dd7a5fd1111627c2517dd6f95323cd7c9848a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beatriz=20Sopen=CC=83a=20Merino?= Date: Tue, 22 Oct 2024 16:18:57 +0200 Subject: [PATCH 8/8] style(sass): simplify description comments --- .../_abstracts-variables-breakpoints.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/assets/scss/abstracts/variables/_abstracts-variables-breakpoints.scss b/src/assets/scss/abstracts/variables/_abstracts-variables-breakpoints.scss index d11f58ea..3689b0c8 100644 --- a/src/assets/scss/abstracts/variables/_abstracts-variables-breakpoints.scss +++ b/src/assets/scss/abstracts/variables/_abstracts-variables-breakpoints.scss @@ -2,20 +2,19 @@ // BREAKPOINTS // ================================================= -// xs - mobile -// sm - mobile -// md - iPad portrait -// lg - iPad portrait -// xl - iPad landscape -// xxl - laptop -// xxl - big display - $breakpoints: ( xs: 480px, + // mobile portrait sm: 576px, + // mobile landscape md: 768px, + // tablet portrait lg: 992px, + // tablet portrait xl: 1024px, + // tablet landscape xxl: 1280px, + // laptop xxxl: 1600px, + // desktop ) !default;