1. Variables:
Variables in Sass start with $ and are used to store values for reuse in multiple places.
$primary-color: #007BFF;
body {
color: $primary-color;
}2. Nested Rules:
Sass allows CSS rules to be nested within related rules, making the code neater.
nav {
ul {
margin: 0;
padding: 0;
li {
display: inline-block;
}
}
}Compiled CSS:
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
}3. Mixins:
Mixins are used to create reusable code blocks that can accept parameters.
@mixin button-style($color) {
background: $color;
border-radius: 4px;
padding: 10px 20px;
}
.primary-btn {
@include button-style($primary-color);
}
.secondary-btn {
@include button-style(#6C757D);
}4. Inheritance:
Using the @extend keyword allows a selector to inherit the style of another selector.
.btn {
font-size: 16px;
text-decoration: none;
}
.primary-btn {
@extend .btn;
background: $primary-color;
}5. Lists:
Lists are used to store multiple values, which can be comma-separated or space-separated.
$grid-columns: 12;
$gutter-width: 20px;
.container {
width: calc((100% / $grid-columns) - ($gutter-width * ($grid-columns - 1)));
}6. Maps:
Maps are used to store key-value pairs, similar to JavaScript objects.
$breakpoints: (
small: 480px,
medium: 768px,
large: 1024px
);
@each $breakpoint, $width in $breakpoints {
@media (min-width: $width) {
.container {
max-width: $width;
}
}
}7. Functions:
Custom functions can process values and return results.
@function calculate-size($ratio, $base-size) {
@return $base-size * $ratio;
}
.element {
width: calculate-size(0.5, 100px);
height: calculate-size(0.75, 100px);
}8. Import (@import):
Use @import to import other Sass files.
// variables.scss
$primary-color: #007BFF;
// mixins.scss
@mixin button-style($color) {
/* ... */
}
// styles.scss
@import 'variables';
@import 'mixins';
.primary-btn {
@include button-style($primary-color);
}9. Selector Nesting:
CSS selectors can be combined and simplified through selector nesting.
.parent-class {
&__child-class {
/* ... */
}
}10. Comments:
Sass supports two types of comments, single-line // and multi-line /* … */, where multi-line comments are retained after compilation.
11. Conditional Statements:
Sass provides @if, @else if, and @else to implement conditional logic.
$is-mobile: false;
.content {
@if $is-mobile {
font-size: 14px;
} @else {
font-size: 18px;
}
}12. Loops:
Use @for, @each, and @while to iterate and repeat code.
// Using the @for loop to generate CSS sequences
@for $i from 1 through 5 {
.item-#{$i} {
width: 100px * $i;
}
}
// Iterating over a list using @each
$fonts: Arial, sans-serif, Georgia, serif;
@each $font in $fonts {
body {
font-family: $font, #{$font + ', '};
}
}
// Using @while loop
$count: 5;
@while $count > 0 {
.loop-#{$count} {
content: "Count: #{$count}";
}
$count: $count - 1;
}13. Nested Media Queries:
Similar to CSS rules, Sass allows nested media queries to make the code cleaner.
.element {
color: black;
@media (min-width: 600px) {
color: white;
}
}14. More advanced usage of Extend:
Use @extend to create more complex inheritance relationships, such as combining with pseudo-classes and pseudo-elements.
%hover-state {
&:hover {
background: darken($primary-color, 10%);
}
}
.primary-btn {
@extend %hover-state;
background: $primary-color;
}15. Modularization and BEM methodology:
Combined with Sass features, such as nested rules and variables, the BEM (Block Element Modifier) methodology can be implemented to improve the maintainability of the code.
.button {
&__text {
font-weight: bold;
}
&--primary {
background: $primary-color;
}
&--secondary {
background: $secondary-color;
}
}16. Notes on nested selectors:
Although nested selectors make the code more readable, excessive nesting can cause the CSS to be too large and affect performance. Try to keep selectors concise and avoid too deep nesting.
17. Sass versions and compatibility:
Note that there are two main versions of Sass: SCSS (Sassy CSS) and indented syntax (Sass). SCSS is more modern and closer to CSS syntax, while indented syntax uses indentation to indicate nesting. Most modern projects use SCSS.
18. Automation tools:
Combining automation tools (such as Webpack, Gulp, or Grunt) with a build system can automate the Sass compilation and optimization process to ensure that the CSS in the production environment is optimal.
19. Responsive design and media queries:
Using Sass’s nested media queries, you can more easily write responsive CSS.
.container {
width: 100%;
@media (min-width: 768px) {
width: 80%;
float: left;
}
}20. Custom Functions:
Define custom functions to handle complex calculations or logic.
@function calculate-spacing($size, $multiplier: 2) {
@return $size * $multiplier;
}
.element {
padding: calculate-spacing(10px);
}21. Operators:
Sass supports arithmetic, comparison, and logical operators, making calculations in CSS more convenient.
.box {
width: 100px + 50px;
height: 200px - 50px;
margin: 5px * 2;
opacity: 0.5 / 2;
}22. Limitations of nested selectors:
While nested selectors are useful, over-nesting can make CSS difficult to understand and maintain. Try to keep selectors no more than 3 levels deep to prevent over-complexity.
23. Error handling in Sass:
When Sass encounters a syntax error, it generates an error message to help you find the problem. Understanding these error messages can help you debug your code faster.
24. Debugging in Sass:
Using the @debug statement can output information about variables and expressions during compilation to help with debugging.
$value: 10px;
@debug "Value is: #{$value}";25. Sass Source Maps:
Enabling source maps during development allows browser developer tools to display the original Sass code instead of the compiled CSS when editing Sass source files.
26. Sass @use and @mixin rules:
The new version of Sass (Sass 7.0+) introduces the @use rule to replace @import, and advocates the use of @mixin instead of @extend to improve the maintainability and performance of CSS.
27. Sass module system:
Using the @use rule, you can organize your code into modules, each module has its own scope, to avoid conflicts between variables and selectors.
// _variables.scss
$primary-color: #007BFF;
// _buttons.scss
@use 'variables';
.button {
background: variables.$primary-color;
}28. Keep Sass code concise:
As with any code, keep Sass concise, clear and modular, follow the DRY (Don’t Repeat Yourself) principle, and avoid redundant code.
