Variables: Developers can define commonly used variables such as colors or font and have that change be applied everywhere. For example if a webpage had many buttons and the developer wanted to change the color of all the buttons to a single color, instead of finding every instance of a button being used and changeing the color there the developer can change the variable and have it applied everywhere, which saved a lot of time.
Nesting: It makes the code easier to understand and read since it groups CSS selectors together based on their hierarchy allowing for developers to only change a specific element
Mixins: It helps developers save time because these are blocks of code that can be used to apply a set of styles to multiple elements making the code less repetative and easier to change. If a developer was making a website with multiple pages mixins could be used since they would apply the same style to all pages.
Functions: These are really similar to mixins but the main difference is that these allow you to do calculations and return values and this mainly helps with writing flexable and reuseable code
Inheritance This allows for styles to be reused but still be modified without changing the parent code
Allowed the background color of the color picker div to be changed. By setting the background color as the variable $selected-color, the variable can be referenced in other parts of the code. Would not be possible to do in CSS without SASS, since div stylings can't be changed without script. Some other variables were used to set a default color for a background or a button color -- used to make code more organized and readable
2) For loops:
The grid is created through SASS for loops. This allows each cell to be created in much less code than would be required if they had to be created individually. Would be possible without SASS but it would be MUCH more tedious. Having different variables within for loops also makes changing the size of the grid easier, which makes the code more dynamic
3) Operator:
Used to set the input of the color-picker to the background color of the color-box div. Also would not be possible without SASS (if only using CSS).
CONTRIBUTORS: Ishi and Ekam
Part 1: Reflections
Variables: Developers can define commonly used variables such as colors or font and have that change be applied everywhere. For example if a webpage had many buttons and the developer wanted to change the color of all the buttons to a single color, instead of finding every instance of a button being used and changeing the color there the developer can change the variable and have it applied everywhere, which saved a lot of time.
Nesting: It makes the code easier to understand and read since it groups CSS selectors together based on their hierarchy allowing for developers to only change a specific element
Mixins: It helps developers save time because these are blocks of code that can be used to apply a set of styles to multiple elements making the code less repetative and easier to change. If a developer was making a website with multiple pages mixins could be used since they would apply the same style to all pages.
Functions: These are really similar to mixins but the main difference is that these allow you to do calculations and return values and this mainly helps with writing flexable and reuseable code
Inheritance This allows for styles to be reused but still be modified without changing the parent code
Part 2: Sass Demo
LINK TO REPO: https://github.com/Random-IGN/SCSS-Hacks PROJECT: pixel art
https://user-images.githubusercontent.com/111466888/234775853-01121f78-49f1-45ea-b053-15b578ced8aa.mov
REFLECTION w/ 3 SASS features used:
1) Variables:
Allowed the background color of the color picker div to be changed. By setting the background color as the variable $selected-color, the variable can be referenced in other parts of the code. Would not be possible to do in CSS without SASS, since div stylings can't be changed without script. Some other variables were used to set a default color for a background or a button color -- used to make code more organized and readable
2) For loops:
The grid is created through SASS for loops. This allows each cell to be created in much less code than would be required if they had to be created individually. Would be possible without SASS but it would be MUCH more tedious. Having different variables within for loops also makes changing the size of the grid easier, which makes the code more dynamic
3) Operator:
Used to set the input of the color-picker to the background color of the color-box div. Also would not be possible without SASS (if only using CSS).