Part 1: Reflections 0.4 Points

  • Write a short description of each key feature of Sass and compare it to how it to CSS and how using Sass makes your life easier when using all the features. Include examples of how it would have made prior features from past projects simpler to implement. Also answer the questions indicated as hack questions.

Modular SCSS - Lydia

SCSS is better than CSS because it allows for more complex styling

  • SCSS is better for projects with more than one page where more customization/design is necessary
  • One example is our CPT projects as they have multiple features and pages

Modular SCSS allows one to divide different files to then be compiled into one

  • Using _filenames.scss allows the multiple files to be compiled into one

Modular CSS is better with big websites as it allows the code in different files to be broken up for more specific changes

  • This allows editing to be much easier as well as troubleshooting and design as smaller files are easier to work with

Nesting - Jake

  • Nesting organizes your code and makes it much simpler by combining different sectors of CSS into one sector.
    • Lets you next CSS like HTML
  • Combines different rules
  • It makes your life easier because it requires less code and puts all of your work into one place
    • You don’t have to use all of the different features separately but you can combine them.
  • It would have made one of my past assignments easier by allowing me to combine all of sectors of my CPT project into one section

Variables - Lydia

Variables store information in a container that can then be accessed through the variable name

  • In SASS, it allows one to store information to be reused in stylesheets (EX; fonts, colors and other CSS values)

  • Note: $ is used in the defining of the variables

  • Variables are used all the time in SASS as well as in almost every aspect of our class. Variables in SASS make our lives easier as we're able to access the same information we stored multiple times instead of writing it out over and over.

  • SASS variables are better than regular CSS variables because they are easier to read and have a simpler syntax

Operators - Lydia

Operators perform operations on variables in SASS as well as other languages. These symbols allow us to perform operations such addition, subtraction, inequalities and more.

  • Operators make our lives easier as they allow for simpler code (EX; % is used to find the remainder instead of creating a whole function or operation to find it)

Conditional Statements - Jake

  • Are “if” statements like in python
    • Used to make an output based on certain conditions
    • You can change style based on certain conditions which could make your life easier
  • These can make your life easier because it allows you to change the way your website looks based on inputs and conditions
  • I could have used this in my CPT project so when the user input a certain thing It would pop up images and paragraphs in the SASS style which would make my website look better overall.

Loops in SASS - Sarah

Loops in SASS are a powerful feature that allows the repetition of CSS code with different values. There are two types of loops in SASS: @for and @each. The @for loop is used to generate a set of CSS rules based on a range of numbers or a list. The @each loop, on the other hand, is used to loop through a list or a map. Loops in SASS can be used to generate a series of CSS rules based on different conditions or to create a set of variations on a specific style. They can also be used to simplify code and reduce repetition.

Functions - Sarah

Functions in SASS are a way to encapsulate a piece of code that can be reused throughout a SASS stylesheet. SASS has many built-in functions, such as color manipulation functions, mathematical functions, string functions, and list functions. Functions can be called using the function name and passing in any required arguments. The returned value can be assigned to a variable or used directly in a property value. They can be useful in many scenarios, such as calculating complex values, generating CSS values based on input, or simplifying repetitive code. They can also be combined with other SASS features, such as mixins and control directives, to create more powerful and flexible code.

Mix-Ins - Lina

  • Mix-ins are a key feature in Sass that can group the code to create a reusable feature.
    • It acts as a template and saves time in place of rewriting code.
  • Using Sass will make your life because it prevents rewriting code and overall creates a more organized and easier-to-read code.
  • Mix-ins could be implemented into my past projects to make my process simpler
    • My CPT group could have grouped the code and used @mixin and @include to reuse the code without repetition.

Inheritance - Lina

  • Inheritance is a Sass feature with a similar purpose to mix ins in terms of reusability
  • There is a child class that inherits code from a parent class
    • This child class has the option to have modified code and not an exact copy
  • This make our lives easier because we can use the code in multiple ways and even change it slightly
  • All the changes are easily manipulated and it is very efficient
  • I would use this in my past projects because when I was creating the front end of my CPT, there was a lot of code I could have reused in a modified way
    • I would have used @extend .name-of-class to add more styles and use this inheritance