- SASS I
- What is SASS?
- Nesting : The capability to nest selectors within one another, allowing for a more concise and organized style sheet.
- Variables : The ability to assign a value to a name that begins with
$, which can then be referred to elsewhere in the style sheet. - Mixins : A way to make groups of CSS declarations that you want to reuse throughout your site.
- Extend/Inheritance : A way to share styles between selectors.
- Functions in SASS : Functions in SASS are used to perform operations on variables and return a value.
- Media Queries Inside Mixins : Media queries are a powerful tool in CSS that allow you to apply styles based on the characteristics of the device or viewport.
SASS (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor that extends the capabilities of CSS with features like variables, nesting, and mixins. This section will cover the basics of SASS and how it can help you write more maintainable and efficient stylesheets.
In this module, you will learn about:
- What is SASS?: An introduction to SASS, its benefits, and how it can improve your workflow.
- Nesting: Learn how to nest your CSS selectors in a way that mirrors the HTML structure, making your stylesheets easier to read and maintain.
- Variables: Discover how to use variables to store values that you use repeatedly in your stylesheets, such as colors, fonts, or any CSS value.
- Mixins: Understand how to create reusable chunks of code with mixins, allowing you to avoid repetition and keep your styles DRY (Don't Repeat Yourself).
- Extend/Inheritance: Explore how to share a set of CSS properties from one selector to another using the
@extenddirective, promoting code reuse and reducing redundancy. - Functions in SASS: Learn how to create custom functions in SASS to perform calculations, manipulate values, and generate dynamic styles.