Last Updated: November 21, 2025
Variables
// Variables
$primary-color: #3498db;
$font-stack: Arial, sans-serif;
body {
color: $primary-color;
font-family: $font-stack;
}Nesting
nav {
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
a {
text-decoration: none;
&:hover {
color: blue;
}
}
}Mixins
@mixin border-radius($radius) {
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
💡 Pro Tip:
Use @import to split your styles into multiple files!