First time developing with SASS. My main pain point has been to handle media queries. If anyone has feedback to give about my work, or any good resources to train my SASS skills as a beginner, please you're welcome to leave a comment !
Hi Anne-Sophie, Your solution looks great. For handling media queries, I use the following Mixin below. It lets me pass in a parameter corresponding to the screen size I am targeting, and there are $if statements to determine which media query to apply.
@mixin respond($breakpoint) {
@if $breakpoint == big-desktop {
@media (min-width: 1800px) {
@content;
}
}
@if $breakpoint == desktop {
@media (min-width: 1400px) {
@content;
}
}
@if $breakpoint == tab-land {
@media (min-width: 1200px) {
@content;
}
}
@if $breakpoint == tab-port {
@media (min-width: 900px) {
@content;
}
}
@if $breakpoint == phone {
@media (min-width: 600px) {
@content;
}
}
}
and to use it:
.class {
@include respond(tab-port) {
height: 1.5rem;
}
}
Any feedback is welcome. :)
Hey Jesus, Great job on the solution.
I tried the same approach for the JS file where I toggled classes on and off. But I found it was a lot of code.
So I came across a solution where you...
use CSS variables to define the light colors.
Then when the toggle is switched on it adds a data-attribute in the HTML.
and then in the css there is a class for the newly added data-attribute inside which the previous defined CSS variables are redefined with the dark colors.
It made the code cleaner by having to write less lines of code and use less classes.
this is the article i got it from: (https://raoulkramer.de/css-dark-mode-light-mode-rethought/)
I'm still struggling with JavaScript and would like some feedback on my form validation. I watched Florin Pop's video to help guide me with it. This is also my first time using SASS and would appreciate any feedback you could give me on it!
Hi Gabriela, great job on the JavaScript, I noticed a few things,
In my solution to this challenge, I tried not to have any empty elements in the HTML, so if there is an error I created a new element with the error message and appended it to the DOM.
It is hard to describe it in words, but if you look at my JS solution the code is commented.
There are two things that I implemented in my code which I find useful. I used BEM notation, so I could nest selectors in a way that was more readable .
Also I used a Mixin for media queries, which lets me nest the media queries directly inside the CSS declarations instead of having one large media query at the end of the file.
