You've probably seen CSS rules which start with the at-sign such as @font-face for custom fonts or @media used for responsive styling based on screen size. Maybe you've even used @keyframes for CSS animations. These so-called at-rules can go around normal CSS rules (normally a rule would simply be one or more selectors followed by lines of rules within curly braces).
But the @-rules are rarely sprinkled throughout a stylesheet.
In preprocessed CSS like Sass, many new at-rules are possible. Here we're using Sass/SCSS.
What's SCSS? It's...