Day #2 of learning & posting

Today I learned about pseudo classes & calc() in sass --

Sass allows you to work with pseudo-classes just like you would in regular CSS. You can use pseudo-classes in Sass to apply styles to elements that meet specific conditions. Here's an explanation of how you can use pseudo-classes in Sass:

Child and Sibling Pseudo-classes: You can also use pseudo-classes like :first-child, :last-child, :nth-child(), :nth-of-type(), and so on to target specific child or sibling elements.

li:first-child {
  font-weight: bold;
}        

This code will make the first list item within its parent element bold.

In Sass, the calc() function is used to perform mathematical calculations within CSS property values. It allows you to perform arithmetic operations like addition, subtraction, multiplication, and division, which can be useful when setting dynamic values for CSS properties. The calc() function in Sass works similarly to how it works in regular CSS.

Here's how you can use the calc() function in Sass:

In this example:

1. We define a variable $sidebar-width with a value of 250px.
2. We use the calc() function to calculate the value of $content-width by subtracting $sidebar-width from 100%. The #{$variable} syntax is used to interpolate the variable's value within the calc() function.
3. We then use these calculated values to set the width of the .sidebar and .content elements.

$sidebar-width: 250px;
$content-width: 100% - #{$sidebar-width};

.sidebar {
  width: $sidebar-width;
}

.content {
  width: $content-width;
}