P3-M 4/28 Introduction to SASS

• What is SASS?
• SCSS vs. CSS
  • What is CSS
    • CSS Example
  • What is SCSS
    • Sass Code Example
    • So which one is better to use?
• Modular SCSS
  • File 1 _variable.scss
  • File 2 style.scss
• Nesting
  • CSS - Lack of Nesting
• Variables
  • Variable Example Syntax
• Operators
  • Operator Example Syntax
• Conditional Statements
• Loops In Sass
  • Some Code Examples of Loops and Lists
• Functions in SASS
  • SASS functions
  • Using Built-in Functions
  • Math Functions
  • Color Functions
  • String Functions
  • Creating Custom Functions
• Mixins
• Inheritance
  • Mixin & Inheritance Code Example
• Hacks & Hack Helper - Calculator & Hack Helper - Stopwatch
  • Part 1: Reflections 0.4 Points
  • Part 2: Sass Demo 0.5+ Points
• Hacks

What is SASS?

Sass is a preprocessor language that's interpreted into CSS. A preprocessor language takes input data and converts it to an output that's used as input by another program. This means when you run Sass code, you're actually converting your code to CSS. That CSS code output is then used directly by a browser. Fun fact CSS stands for Cascading Style Sheets and SASS stands for Syntactically Awesome Style Sheets.

SCSS vs. CSS

Understanding the differences between SCSS and CSS

What is CSS

• CSS is the default technology that most programmers use when styling webpage. It is one of the 3 fundamental web technologies along with HTML and JavaScript. HTML manages the structure, JavaScript makes pages interactive, and CSS changes the style by taking a markup language like HTML and describes how it should be presented to the user.

• However, CSS is not very easy to work with lacking a lot features often making using CSS very confusing and difficult or hard to work with on lengthy projects. This is why there are tools like Bootstrap, Sass, and Tailwind that make styling a lot easier and more efficient. We will be using Sass in this course.

CSS Example

• This is an example of CSS that can be used to change body text of an HTML document
• Hack Question:Can you guess what its changing style of the text to?

body{
color: #0000FF;
font-family: Ariel, sans-serif;
font-size: 16px;
}

What is SCSS

• SCSS is short for Sassy Cascading Style Sheets.
• SCSS very similar to CSS but the difference comes with the fact that SCSS extends the functionality of CSS while also making it simpler. What this allows us to do is it enables us to things like nested styling, functions, mixins, variables, inheritance (more on these later) and so on.

Sass Code Example

$blue: #0000FF;
body{
color: $blue;
font-family: Ariel, sans-serif;
font-size: 16px;
}

• This example is doing the same thing as the other code segment above but the difference being that here we defined the color as $blue which makes it much easier for us to recall later on. In fact, we have done this before, if you have been using the dark mode/midnight theme then go ahead and navigate your your _sass folder and check out the dark-mode.scss and you'll see something similar to the example above

So which one is better to use?

• CSS tends to be better for really simple styling where not many complex or nested styles are required and small projects that doesn't require a lot of customization.
• SCSS on the other hand is very good for more complex styling and working with a project with more than one page where maybe lots of customization is needed. Such as the projects we made last and first trimester.

Modular SCSS

Understanding how to use modular SCSS

• Modular SCSS allows you to break multiple different files and then be able to compile them into a single CSS file
• How do you do this? Well all you need to do is have _filenames.scss so that is compiled into its own file
• Now after adding the to the file name you can import it into you file without the and all the styles will be carried over.
• The benefits of a partial is that it allows you to big websites and allows you to break up the code in multiple components and easily make changes instead of having to go through a huge file.
• All styles in the partial will be added and can be used into the main file as if they were defined in the main file.

File 1 _variable.scss

$primary-button-color: #009494;
$hover-color: black;
$menu-color: #f2f2f2;

File 2 style.scss

• We can see the importing of the .scss file's content into the other main .scss file style.scss

{@import 'variables';
@import "{{ site.theme }}";}
/* "row style" is flexible size and aligns pictures in center */
.row {
    align-items: center;
    display: flex;
  }
  
  /* "column style" is one-third of the width with padding */
  .column {
    flex: 33.33%;
    padding: 5px;
  }

.menu a {
  // float: left;
  display: block;
  color: $menu-color;
  text-align: center;
  // padding: 14px 16px;
  text-decoration: none;
}
.menu a:hover {
  background: $primary-button-color;
    color: $hover-color;
}

Nesting

What is nesting? Where did the birds come from?

• Nesting is a way to organize your code and make it easier to read. It also helps keep your code DRY (Don't Repeat Yourself).
• Nesting is when you put one selector inside another selector. This is a great way to keep your code organized and make it easier to read.
• When we make HTML we often nest different elements within each other and have a clear structure when we look at it.
• The problem is that in regular CSS we don't have that so we need to use SASS to help us organize our code.

• Warning:Don't nest too much as when the CSS is processed it can make overqualified selectors which can be hard to read and maintain. Which means that it would only target that specific element type and not any other elements that have the same class name. ## Sass Nesting
• Through nesting the ul, li, and a selectors within the nav selector makes your CSS better and increases its readability overall.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS - Lack of Nesting

• We can see that through the lack of nesting the CSS is not as organized and needs extra information to be able to make it more clear exactly what is being targeted.

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Variables

What is a variable?

• A variable is a container that stores information so for instance when you multiple places that refer to one value you can just use the variable name instead of the value.
• This is valuable in SASS because it allows you to reuse that value in multiple places throughout you stylesheet.
• Variables in CSS preprocessors such as Sass allow you to store information that you can reuse in your stylesheet, such as font stacks, colors, or any other CSS value you anticipate needing. The $ symbol is used in Sass to designate a variable.

Pro Tip:The reason SASS variables are better than variables in regular CSS is that they are more consider and easier to read with a much simpler syntax. Fun Fact: Variables in SASS came before CSS and often SASS has features long before they are actually added to CSS as a whole.

Variable Example Syntax

• $variable-name: value;
• Once the sass is processed the variable name is replaced with the value throughout the program.

$main-font: Calibri, sans-serif;
$main-color: #000;
$main-color-hover: #000;

Operators

• Operators are used to perform operations on variables and other aspects of the language like in python we can use operators to see if values are equal, add, divide, subtract, multiply, etc.
• SASS has a lot of operators that can be used to perform operations on variables and other aspects of the language as well. They can include
  • == to check if two values are equal and != to check if two values are not equal
  • + to add two values together
  • - to subtract two values
  • * to multiply two values
  • / to divide two values
  • % to find the remainder of two values
  • < to check if one value is less than another
  • > to check if one value is greater than another
  • <= to check if one value is less than or equal to another
  • >= to check if one value is greater than or equal to another
  • Also there is and, or, & not to be able to use boolean operations

Operator Example Syntax

• Operators are used in this example to perform string concatenation

// Html
<p id="testing">original text and</p>

// SASS
#testing:after{
  content: " some" + " more" + " text";
}

// Output
original text and some more text

Conditional Statements

• There are conditional statements in SASS just like in Python and JavaScript they work the same way as well.
• Conditional statements are used to perform different actions based on different conditions. Such as if a certain condition is true then do this, if it is false then do that and so on.
• SASS has @if which allows for different styles based on if a boolean expression was true or false.
• SASS has @else which allows for different set of styles if the if condition was not met or false.
• SASS has @else if which allows for an alternative conditions to be run if the first is not met.

$color: red;

button {
  @if $color == red {
    background-color: $color;
  }
}
// @else: allows you to provide an alternative set of styles to apply if the condition in the @if statement isn't met
$color: blue;

button {
  @if $color == red {
    background-color: red;
  } @else {
    background-color: $color;
  }
}
// @else if: allows you to provide multiple alternative conditions to test
$color: green;

button {
  @if $color == red {
    background-color: red;
  } @else if $color == blue {
    background-color: blue;
  } @else {
    background-color: $color;
  }
}

Loops In Sass

• Loops are present in SASS through the @for and @while decorators, along with @each.

• Loops are used to repeat a block of code a certain number of times or until a certain condition is met just like in any other programming language.

  • For Loops: Are used to iterate through a value like a list or a range of numbers
  • While Loops: Are used to iterate through a block of code until a certain condition is met such as a value is being equal to a certain value through an incrementing or decrementing a variable or any other condition that is met.

• When using while loops they can be necessary but it is better to use @each and @for as it will make it clear and be able to compile faster.

• Side Note: In SASS lists care a any group of values that are separated by a comma or a space there is no special brackets used like in python or javascript. Lists can be searched for values however they are immutable meaning that they cannot be changed once they are created.

Some Code Examples of Loops and Lists

// A for each loop is used to interact with a group of sizes changing 
// the size of the element for each item in the list

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}


// @each: allows you to loop over a list of values and generate styles
$colors: red, green, blue;

@each $color in $colors {
  .color-#{$color} {
    background-color: $color;
  }
}

@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null

@use "sass:math";

/// Divides `$value` by `$ratio` until it's below `$base`.
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
sup {
  font-size: scale-below(20px, 16px);
}

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

// @for:  allows you to loop over a range of values and generate styles

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

Functions in SASS

What is a function?

• A function is a block of code that performs a specific task. This is a great method to be able to reuse code and processes in a manner that is more efficient and allows for the reuse of code. We do this all the time in programming languages such as JavaScript and Python.

SASS functions

• Sass Functions allow you to define complex calculations and transformations that can be used throughout your stylesheet and allow you to perform complex operations on values, manipulate data, plus you can generate content dynamically.

• There a are built in functions and ones you can make on your own like languages such as JavaScript and Python.

• SASS functions can be used to perform arithmetic operations, manipulate colors, work with strings, and more.

• Functions in SASS are similar to functions in programming languages, but they can be used within SASS stylesheets to generate CSS code dynamically.

Using Built-in Functions

• Like Python and Javascript SASS provides a variety of built-in functions for math, color manipulation, string manipulation, and more.

Math Functions

• SASS has many functions that allow you to be able to perform wide range of math operations similar to the ones present in python including more complex operations.

.round(1.2);          // returns 1
.ceil(1.2);           // returns 2
.floor(1.2);          // returns 1
.abs(-1.2);           // returns 1.2
.min(1, 2, 3);        // returns 1
.max(1, 2, 3);        // returns 3
.random(1, 100);      // returns a random number between 1 and 100

Color Functions

• Color is an important component of any website and SASS provides a wide range of functions that allow you to manipulate colors in a variety of ways.

.lighten(#007fff, 20%);       // returns a lighter shade of blue
.darken(#007fff, 20%);        // returns a darker shade of blue
.opacify(#007fff, 0.2);       // makes the color more opaque
.transparentize(#007fff, 0.2); // makes the color more transparent
.mix(#007fff, #ff0000, 50%);  // returns a mix of two colors

String Functions

• SASS provides a variety of string functions that allow you to manipulate strings. Here are some examples:

.to-upper-case("hello world");  // returns "HELLO WORLD"
.to-lower-case("HELLO WORLD");  // returns "hello world"
.str-index("hello world", "world"); // returns the index of the first occurrence of "world"
.str-insert("hello", " world", 5);  // inserts " world" into "hello" at position 5

Creating Custom Functions

• In addition to using built-in functions, you can also create your own functions in SASS using the @function name(arguments){}
• @return is similar to the return statement in JavaScript and Python. It returns a value from a function.
• Functions take input values, perform calculations, and return a result. Here's an example of a simple function that calculates the area of a rectangle:

@function rectangle-area($width, $height) {
  @return $width * $height;
}

// Usage:
$area: rectangle-area(10px, 20px); // Returns 200px

• Or you can also make a different kind of function that increases the font size to the factorial of a inputted number.

@function factorial($number){
  $calculated: 1;
  @for $_ from 1 through $number {
    $calculated: $calculated*$number;
  }
  @return $calculated;
}

#testing {
  font-size: factorial(3);
}

//Combining functions and loops to achieve different sass effects

@function sum($numList){
  $sum: 0;
  @each $num in $numList {
    $sum: $sum+$num;
  }
  @return $num;
}

@function tri($num){
  $sum: 0;
  @for $i from 1 through $num {
    $sum: $sum+$num;
  }
  @return $sum;
}

@function max($nums){
  $i:0;
  $value:0px;
  @while $i<length($nums){
    @if $value<list.nth($nums,$i){
      $value:list.nth($nums,$i);
    }
  }
}

• Custom functions are very powerful, and can be used to create reusable pieces of code that can be used throughout your stylesheets.

• SASS functions are a powerful feature that allow you to perform complex operations on values, manipulate data, and generate content dynamically. By using built-in functions and creating your own custom functions, you can greatly extend the capabilities of your SASS stylesheets.

Mixins

Mixin what is a mix in what are we mixing in?

• Mixins are a way to make groups of CSS that you want to reuse throughout your site anywhere you please.
• Mixins are a form of template and that you can use to build on top of to make different features later on this prevents you from having to write the same code over and over again.
• This is a form of encapsulation in your CSS and is a great way to make your code more organized and easier to read.
• Mixins can also take in arguments and be able to be used to apply effects on certain elements if that is a feature you want to add to your site. However unlike functions which also take arguments mixins cannot return values.
• To use a mixin declare it with @mixin and then incorporate with @include.

Inheritance

What is inheritance?

• In general programming concept where the child class can inherit properties from the parent class. These properties can be changed and modified in the child class. This prevents code from being repeated and makes the code more usable and flexible.
• In SASS we have a similar concept that can be used as well we can create base styles and then have other styles inherit from them and then we can change them as we please.
• We can do that by through using @extend .name-of-class and then we can add more styles to it as we please. Simple as that

Mixin & Inheritance Code Example

// example of @mixin
@mixin button {
  width: auto;
  height: auto;
  border-radius: 10px;
  background-color: #21807c;
  border: 3px solid black;
  font-size: 1.5em;

  display: flex;
  justify-content: center;
  align-items: center;

  grid-column: span 1;
  grid-row: span 1;

  // creates smooth animation effect
  transition: all 0.5s; 
}

// default button theme for calculator and stopwatch buttons. Both will follow the same button format
.button {
    // uses the scss from the @mixin
  @include button;
}

/* styling for the calculator clear button */
.calculator-button-clear {
    // @extend inherits .button and then changes the background color from .button
  @extend .button;
  background-color: #e68b1c;
}

/* styling for the calculator equals button */
.calculator-button-equals {
    // another @extend inherits .button and then changes the background color from .button
  @extend .button;
  background-color: #e70f0f;
}

Hacks & Hack Helper - Calculator & Hack Helper - Stopwatch

• All hacks are pair/trio hacks, individual hacks are not recommended and will not be accepted unless a valid reason is given. We will respond in the appropriate slack channel if we have any questions. Hacks are due by 11:59pm on Wednesday 4/26/2023 at 11:59 p.m. PST. Any late submission will have a deduction of 0.1 points from their total grade.

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.

Part 2: Sass Demo 0.5+ Points

• Using at least 3 or more sass features create a UI demo that may be used for future or current projects and reflect on how this was more effective than doing the same task using only regular features of CSS. Extra points will be awarded based on creativity and extra addition of features from SASS.

Credits: Team Mortalicously Sassy 💖

Hacks

• Part 1:
• Sass (Syntactically Awesome Style Sheets) is a powerful preprocessor scripting language that extends the functionality of CSS. Here are some key features of Sass and how they differ from CSS:
• Variables: Sass allows you to define variables that can be used throughout your stylesheet, making it easy to reuse values and avoid repetition. For example, instead of hardcoding the same color value multiple times, you can define a variable and use it throughout your stylesheet
• Nesting: Sass allows you to nest CSS rules inside other rules, making it easier to organize your stylesheet and reduce repetition.
• Using Sass makes your life easier when using all these features because it allows you to write cleaner, more efficient code that is easier to maintain and update. For example, if you need to update the color of a button across your site, you can simply update the variable in your Sass file and it will be reflected across your entire site.

Hack question: What are some potential downsides or limitations of using Sass? While Sass offers many benefits, there are also some potential downsides or limitations to consider. One downside is that Sass requires an additional step in the development process, as it must be compiled into CSS before it can be used on the web. This can slow down the development process and create additional complexity. Additionally, because Sass offers so many features and options, it can be overwhelming for beginners or developers who are not familiar with the language. Finally, because Sass is not natively supported by browsers, it may require additional configuration or tools

@mixin responsive-layout {
  display: flex;
  flex-direction: column;
  
  @media screen and (min-width: 768px) {
    flex-direction: row;
    
    & > * {
      flex: 1;
    }
    
    &__image {
      margin-right: $padding;
    }
  }
}

.card {
  @include responsive-layout;
}

$primary-color: #0080ff;
$secondary-color: #eee;
$padding: 1em;

.card {
  background-color: $secondary-color;
  border-radius: 4px;
  overflow: hidden;
  
  &__header {
    background-color: $primary-color;
    color: #fff;
    padding: $padding;
    font-weight: bold;
  }
  
  &__image {
    img {
      max-width: 100%;
      height: auto;
    }
  }
  
  &__body {
    padding: $padding;
  }
}