**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** CSS Preprocessors: Sass and Less **Topic:** Write and compile Sass to create a structured, maintainable CSS architecture.(Lab topic) **Introduction** In the previous topic, we learned about Sass and how it improves your CSS workflow. Now it's time to dive deeper and learn how to write and compile Sass to create a structured, maintainable CSS architecture. We'll cover the basics of writing Sass, organizing your code, and compiling it to CSS. **Organizing Your Sass Code** To keep your code organized and maintainable, it's essential to follow best practices. Here are some guidelines to get you started: 1. **Create a directory structure**: Create a directory for your Sass files, e.g., `sass` or `scss`. Inside this directory, create separate files for different components of your website, such as `variables.scss`, `mixins.scss`, `typography.scss`, etc. 2. **Use partials**: Break down your code into smaller, reusable pieces by creating partials. A partial is a file that starts with an underscore (`_`) and is not compiled to a separate CSS file. 3. **Import partials**: Import your partials into your main Sass file using the `@import` directive. **Variables** Sass variables are placeholders for values that you can use throughout your code. They make it easy to maintain consistency and make changes to your design. **Example 1: Sass Variables** ```scss // variables.scss $primary-color: #333; $secondary-color: #666; // styles.scss @import 'variables'; body { background-color: $primary-color; color: $secondary-color; } ``` **Mixins** Sass mixins are reusable blocks of code that you can use to apply a set of styles to an element. **Example 2: Sass Mixin** ```scss // mixins.scss @mixin center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } // styles.scss @import 'mixins'; .centered { @include center; } ``` **Functions** Sass functions are reusable blocks of code that return a value. They're great for calculating values or transforming data. **Example 3: Sass Function** ```scss // functions.scss @function calculate-spacing($size) { @return $size * 2; } // styles.scss @import 'functions'; .margin-large { margin: calculate-spacing(10px); } ``` **Compiling Sass to CSS** To compile your Sass code to CSS, you'll need to use a tool like Sass CLI (https://sass-lang.com/documentation/cli) or a build tool like Webpack (https://webpack.js.org/). Here's a basic example of how to compile Sass to CSS using Sass CLI: ```bash sass styles.scss styles.css ``` This will compile your `styles.scss` file to a `styles.css` file in the same directory. **Lab Exercise** For this lab exercise, we'll create a simple Sass project that includes variables, mixins, and functions. **Step 1: Create a new directory for your project** Create a new directory for your project and create a `sass` directory inside it. **Step 2: Create partials** Create partials for variables, mixins, and functions. **Step 3: Import partials** Import your partials into your main Sass file. **Step 4: Write Sass code** Write Sass code that uses variables, mixins, and functions. **Step 5: Compile Sass to CSS** Compile your Sass code to CSS using Sass CLI or a build tool like Webpack. **Conclusion** In this lab exercise, we learned how to write and compile Sass to create a structured, maintainable CSS architecture. We covered the basics of organizing your code, using variables, mixins, and functions, and compiling Sass to CSS. Practice makes perfect! Try experimenting with different Sass features and techniques to improve your skills. **What's Next?** In the next topic, we'll introduce you to CSS frameworks and their benefits. **Have Questions or Need Help?** Leave a comment below with your questions or feedback.