Lazy_Joker
KPCKevin Powell - Community
•Created by Lazy_Joker on 8/31/2023 in #front-end
Need solution on this sass code.
Hi,
I create this function for root
$colors_variables: (
input_radio_border_color: #fff,
input_radio_inner_bg_box_shadow: #2c263f,
input_radio_outer_bg: #fff,
);
:root {
@each $colors_variables_name, $value in $colors_variables {
--#{$colors_variables_name}: #{$value};
}
}
and I add more variables in the seprate file button.scss like this with using existing root function
$colors_variables: (
btn_color: yellow,
);
@use "./../abstracts/mixins/root.scss" as *;
but the variables not add and don't show on :root. What is the best approach to add more variables using same root function that I made.
1 replies
KPCKevin Powell - Community
•Created by Lazy_Joker on 7/24/2023 in #ui-ux
Need suggestion about LTR to RTL.
What is the better approach when we switching the language and direction LTR to RTL and RTL to LTR in SASS and Next.js
1. Switch file LTR to RTL OR RTL to LTR
2. In SASS what approach
5 replies
KPCKevin Powell - Community
•Created by Lazy_Joker on 7/3/2023 in #front-end
Anyone check my code about Media Quires Mixin in SCSS
I Create this Media Quires Mixin custom. Can anyone check tis code?
$breakpoints: (
"sm_phone": 480px,
"min_phone": 576px,
"phone": 640px,
"tablet": 768px,
"max_tablet": 840px,
"desktop": 992px,
"desktop_max": 1024px,
"widescreen": 1200px,
"xl_widescreen": 1500px,
);
@mixin breakpoint($breakpoint, $direction) {
$media-query: null;
@if map-has-key($breakpoints, $breakpoint) {
$breakpoint-value: map-get($breakpoints, $breakpoint);
@if $direction == "max" {
$media-query: "(max-width: #{($breakpoint-value - 1)})";
} @else if $direction == "min" {
$media-query: "(min-width: #{$breakpoint-value})";
} @else {
$media-query: "(#{$direction}: #{$breakpoint-value})";
}
} @else {
$media-query: "(#{$direction}: #{$breakpoint})";
}
@media #{$media-query} {
@content;
}
}
p {
@include breakpoint(desktop, "min") {
color: red;
}
}
.class {
@include breakpoint(1200px, "min") {
display: block;
}
@include breakpoint(1200px, "max") {
display: block;
}
@include breakpoint(phone, "min") {
@include breakpoint(desktop_max, "max") {
display: none;
}
}
}
5 replies
KPCKevin Powell - Community
•Created by Lazy_Joker on 7/3/2023 in #front-end
Anyone can check my code about Media Quires Mixin In SCSS
I Create this Media Quires Mixin custom. Can anyone check tis code?
$breakpoints: (
"sm_phone": 480px,
"min_phone": 576px,
"phone": 640px,
"tablet": 768px,
"max_tablet": 840px,
"desktop": 992px,
"desktop_max": 1024px,
"widescreen": 1200px,
"xl_widescreen": 1500px,
);
@mixin breakpoint($breakpoint, $direction) {
$media-query: null;
@if map-has-key($breakpoints, $breakpoint) {
$breakpoint-value: map-get($breakpoints, $breakpoint);
@if $direction == "max" {
$media-query: "(max-width: #{($breakpoint-value - 1)})";
} @else if $direction == "min" {
$media-query: "(min-width: #{$breakpoint-value})";
} @else {
$media-query: "(#{$direction}: #{$breakpoint-value})";
}
} @else {
$media-query: "(#{$direction}: #{$breakpoint})";
}
@media #{$media-query} {
@content;
}
}
p {
@include breakpoint(desktop, "min") {
color: red;
}
}
.class {
@include breakpoint(1200px, "min") {
display: block;
}
@include breakpoint(1200px, "max") {
display: block;
}
@include breakpoint(phone, "min") {
@include breakpoint(desktop_max, "max") {
display: none;
}
}
}
1 replies
KPCKevin Powell - Community
•Created by Lazy_Joker on 7/3/2023 in #front-end
Anyone give some Guideline Which Css library is better with Next.js
Material UI
Next UI
Tailwind CSS
Bootstrap 5
2 replies