I need help! I’m following a SASS course and I created a variables tab for all my $variables to use in my main SASS file. While creating a $mobile variable to create a default width size my :hover pink stopped working! Any reason why? i’ve gone back twice with no help.
Post the entire code here. We cannot assume what can be an issue, relaying only to the text description of it.
@import './resets';
@import './variables';
/*functions used to return values and compute values */
@function weight($weight-name) {
@return map-get($font-weights , $weight-name );
}
/*mixin for defining styles */
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
}
@mixin theme($light-theme: true) {
@if $light-theme {
background: lighten($primary-color, 100%);
color: darken($text-color, 100%);
}
}
@mixin mobile {
@media (max-width: $mobile) {
@content;
}
}
body {
background-color: $primary-color;
color: $text-color;
}
.main {
@include flexCenter(column);
width: 80%;
margin: 0 auto;
/* When you don't want to repeat the same word use a & */
/* To keep nested use interpolation #{&}*/
#{&}_paragraph1 {
font-weight: weight(bold);
&:hover {
color: pink;
}
}
#{&}_paragraph2 {
@extend .main_paragraph1;
&:hover {
color: $accent-color;
}
}
@include mobile {
flex-direction: column;
}
}
.light {
@include theme($light-theme: true);
}
$primary-color: #272727;
$accent-color: #ff652f;
$text-color: #fff;
$font-weights: (
"regular": 400,
"medium": 500,
"bold": 700
);
$mobile: 800px;
The variables file is unsaved in the images you posted.
Lol woww. Thanks it worked.
1 Like
Don’t worry we have all been there.
In fact, in time your muscle memory for saving will be so strong it will happen all by itself, constantly, everywhere. It can actually be a little painful just how badly you want to press Ctrl + S all the time.
hahaha, i can’t wait till i’m strong like u programmer Goku-senpai