Transitioning from CSS to SCSS is my current project. I decided to make the switch because of SCSS's nesting capabilities, which I find more convenient for coding. However, I'm facing some challenges getting it to work properly. In my regular CSS, I used the > sign to target specific classes. I assumed that this syntax might not be necessary in SCSS.
Here are snippets of my original CSS code:
/*** External CSS ***/
@import "normalize.css";
/*** Page ***/
html, body {
margin: 0;
}
/*** Navigation ***/
.navbar {
background-color: #ecf0f1;
text-transform: uppercase;
border-top: 5px solid #d1d064;
letter-spacing: 3px;
.navbar::after {
content: '';
clear: both;
display: block;
}
.navbar > .main-nav > ul,
li {
/* styles */
}
}
/* More CSS code goes here... */
Below is what I've attempted to translate into SCSS, acknowledging the need to use & followed by the >:
/*** External CSS ***/
@import "normalize.css";
/*** Page ***/
body,
html {
margin: 0;
}
/*** Navigation Bar ***/
.navbar {
background-color: #ecf0f1;
text-transform: uppercase;
border-top: 5px solid #d1d064;
letter-spacing: 3px;
&::after {
content: '';
clear: both;
display: block;
}
& > .main-nav {
max-width: 1480px;
margin: 0 auto;
text-align: center;
/* Nested styles using '&' and '>' as expected */
}
}
.fill {
ul li a {
/* Styles */
}
/* More nested styling */
}
@-webkit-keyframes fill {
/* Keyframe animation properties */
}Even after making adjustments following proper nesting rules, my code is still not functioning correctly. Any insights on what I might be doing wrong?
Thank you.
Solution Found For those new to SCSS like myself, note that you should not include SCSS code directly in your HTML file. Instead, use the compiled CSS file!