Tutorial To SASS Part 2

Right now, we are introducing SASS, and finding a way to switch between different CSS themes with a click of a button on github page. below is intro to css as this helps us review sass

Here's an example of how you can use Sass to define a set of variables for colors:

// Define some color variables
$primary-color: #007bff;
$secondary-color: #6c757d;

// Use the variables in your styles
body {
  background-color: $secondary-color;
}

h1 {
  color: $primary-color;
}

Variables are defined in sass with the symbol $. In the code above, the variables $primary-color and $secondary-color are defined. We then use these variables to define the background color of the body element and the color of the h1 element.

Sass also allows you to nest CSS selectors, which can make your code more readable and easier to maintain:

// Nesting selectors
nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;

      a {
        color: $primary-color;
        text-decoration: none;
        padding: 0.5rem;

        &:hover {
          background-color: $secondary-color;
        }
      }
    }
  }
}

In the code above, we define the styles for a navigation menu. We use nested selectors to apply styles to the ul, li, and a elements. We also use the & operator to define styles for the a:hover state.

Sass also provides a feature called mixins, which allow you to define a set of styles that can be reused across your codebase, similar to def in python:

// Define a mixin for button styles
@mixin button-styles {
  display: inline-block;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 0.25rem;
  color: white;
  background-color: $primary-color;

  &:hover {
    background-color: $secondary-color;
  }
}

// Use the mixin to style a button
button {
  @include button-styles;
}

In the code above, we define a mixin called button-styles that contains a set of styles for a button element. We then use the @include directive to apply the mixin to a button element. These are just a few examples of the many features that Sass provides. If you are interested, you can look in w3schools or the lesson in [APCSP]for more information