**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** CSS Preprocessors: Sass and Less **Topic:** Using Sass features: variables, nesting, partials, and mixins **Objective:** In this topic, you'll learn about the fundamental features of Sass that can enhance your CSS development experience. By the end of this topic, you'll be able to use Sass variables, nesting, partials, and mixins to write more efficient and modular CSS code. **Sass Variables** Sass variables are a way to store values that you can reuse throughout your stylesheet. They're particularly useful for colors, typography, and spacing. To define a variable in Sass, you use the `$` symbol followed by the variable name and the value. ```scss $primary-color: #333; .body { background-color: $primary-color; } ``` In this example, `$primary-color` is set to `#333`, which is then used as the background color for the `.body` class. This way, you can easily update the primary color across your entire stylesheet by modifying the value of the `$primary-color` variable. **Nesting** Sass allows you to nest selectors, which can help improve the organization and readability of your code. When you nest selectors, Sass automatically combines the parent and child selectors. ```scss .navigation { list-style: none; .navigation-item { display: inline-block; a { text-decoration: none; } } } ``` This code would compile to the following CSS: ```css .navigation { list-style: none; } .navigation .navigation-item { display: inline-block; } .navigation .navigation-item a { text-decoration: none; } ``` Nesting selectors can also be used to apply styles to pseudo-classes and pseudo-elements. ```scss .button { background-color: #f2f2f2; &:hover { background-color: #e2e2e2; } &:before { content: ""; display: block; background-color: #cccccc; } } ``` **Partials** Partials are small Sass files that contain a chunk of CSS code. They're used to organize your code into smaller, reusable files that can be imported into other files. To import a partial, you use the `@import` directive followed by the filename without the extension. ```scss // _variables.scss $primary-color: #333; // main.scss @import "variables"; .body { background-color: $primary-color; } ``` In this example, the `_variables.scss` file contains a single variable that's imported into the `main.scss` file using the `@import` directive. **Mixins** Mixins are reusable blocks of code that can be used to apply styles to multiple selectors. They're particularly useful for vendor prefixes and common styles. ```scss @mixin transition($property, $duration) { -webkit-transition: $property $duration; -moz-transition: $property $duration; -o-transition: $property $duration; transition: $property $duration; } .button { @include transition(color, 0.5s); } ``` In this example, the `transition` mixin applies the necessary vendor prefixes to create a smooth transition effect. **Conclusion** In this topic, you learned about the fundamental features of Sass that can enhance your CSS development experience. You can use Sass variables to store reusable values, nesting to organize your selectors, partials to break down your code into smaller files, and mixins to apply common styles. **Practice** To reinforce your understanding of Sass variables, nesting, partials, and mixins, try the following exercises: 1. Create a new Sass file and define a variable for your primary color. Use the variable to style multiple selectors. 2. Create a new Sass file and nest selectors to style a navigation menu. 3. Create a new Sass file and import a partial that contains a variable for your primary color. Use the variable to style a selector. 4. Create a new Sass file and define a mixin for the `transition` property. Use the mixin to style multiple selectors. **Further Reading** To learn more about Sass and its features, visit the official Sass documentation: [https://sass-lang.com/documentation](https://sass-lang.com/documentation) **Leave a comment or ask for help** If you have any questions or need further clarification on any of the topics covered in this course, leave a comment below and I'll do my best to help. In the next topic, you'll learn about compiling Sass to CSS and organizing large CSS codebases.