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.

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;
}

Answer

  • the text in the body element will be displayed in blue color (#0000FF), using the Arial font family or a fallback of sans-serif if Arial is unavailable, and the font size will be 16px.

Popcorn Hacks

  • The fontfamily is ariel and sanserif meaning everythign is ristricted into the two family fonts into the size of 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.

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 _filename.scss so that it is compiled into its own file.

Now, after adding the _ to the file name, you can import it into your file without the _, and all the styles will be carried over.

The benefits of a partial are that it allows you to build larger websites and break up the code into multiple components, making it easier to maintain and make changes without navigating through a huge file.

All styles in the partial will be added and can be used in the main file as if they were defined directly 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 "cayman";}
/* "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

Nesting

What is nesting?

  • Nesting is a way to organize your code and make it easier to read. It also helps keep your code structured.
  • 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 target specific elements within their parent elements.
  • When we make HTML we often nest different HTML elements or tags 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 make your CSS better and increase 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 data so for instance when you have 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 data in multiple places throughout your stylesheet.
  • 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 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. Similar to python syntax, 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 in 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.

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.

  • 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. 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? > Answer here (hack question): A mixin is a Sass feature used to group together a set of CSS declarations that you want to reuse throughout your stylesheets. It acts as a template that can be included in various selectors, allowing you to avoid repetitive code. Mixins encapsulate styles, enhancing the organization and readability of your codebase by centralizing common styles in one place. They can accept arguments, enabling dynamic application of styles based on specific parameters. Unlike functions, mixins cannot return values. To create a mixin in Sass, you use the @mixin directive followed by a name for the mixin. To use a mixin within a selector, you include it using @include.

  • 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? > Answer here (hack question):Inheritence is a way to use parent and child classes in order to call styles from a set class similar to the idea of child and parent and inheritence in java 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, where we can create base styles, and then other styles can inherit from them, allowing us to modify them as needed.

We can do that by 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;
}

Compiling SASS to CSS

SASS can’t be directly input to an HTML file, it first must be compiled to CSS. The easiest way to do this is in your terminal. Change the name of your input and output file to whatever you would like to run the conversion a single time.

sass input.scss output.css

If you want to automatically change your CSS file whenever you update the SASS file, you can instead run:

sass --watch input.scss output.css

This will update whenever you save a change in your SASS file. If you’re actively working on a project and changing the SASS this is probably the better option for you.

Hacks

  • Hacks are due by Monday 12/11/2023 at 11:59 p.m. PST. Any late submission will have a deduction of 0.1 Indicators from their total grade.

Hack Questions .1 Indicators

  • Answer the hack questions throughout the lesson.

Sass Demo 0.5+ Indicators

  • Using at least 3 sass features (variables, nesting, mixins, etc.) create a UI demo that may be used for future or current projects. Extra Indicators will be awarded based on creativity and extra addition of features from SASS.

Reflection .3 Indicators

  • Reflect on each feature you decided to use for your UI demo. Explain how this feature was utilized and why it was more effective than accomplishing the same task without SASS

Credits: Team

Player Card Creation Saas Demo

Certainly! Let’s expand on each point to highlight why using SASS for these features is beneficial compared to traditional CSS:

1. Variables Usage:

SASS variables go beyond mere convenience; they introduce a level of abstraction that simplifies style management. Imagine a scenario where you’re theming your application, and you need to change the primary color. In SASS, a single modification to the variable updates the entire theme consistently. This not only saves time but also minimizes the risk of overlooking individual instances of a value when making widespread changes. In contrast, without variables in traditional CSS, a global color change would involve manually tracking down and updating each occurrence, prone to errors and oversight.

// SASS
$primary-color: #3498db;
$secondary-color: #2ecc71;
$border-radius: 8px;

.card {
  background-color: $primary-color;
  border-radius: $border-radius;
}

// CSS (without variables)
.card {
  background-color: #3498db;
  border-radius: 8px;
}

2. Reusable Styles (Mixins):

Mixins in SASS enable the creation of reusable blocks of styles, promoting a DRY (Don’t Repeat Yourself) coding philosophy. This is especially beneficial when dealing with complex styling scenarios. For instance, consider a box-shadow effect commonly used throughout your project. With a SASS mixin, you define it once and reuse it wherever needed. This not only reduces redundancy but also facilitates easier updates and maintenance. In CSS, achieving the same level of reusability often involves duplicating code or resorting to less elegant solutions, leading to a more cumbersome and error-prone codebase.

// SASS
@mixin card-box-shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  @include card-box-shadow;
}

.centered-element {
  @include flex-center;
}

// CSS (without mixins)
.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.centered-element {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. Nesting:

Nesting in SASS mirrors the HTML structure, resulting in more intuitive and readable styles. This structure not only makes the stylesheet more closely resemble the document structure but also reduces the need for repetitive and verbose selector names. In traditional CSS, achieving the same level of hierarchy and organization requires longer selectors and increased potential for naming conflicts. The SASS nesting approach promotes a clear visual hierarchy, making it easier to understand the relationship between different elements and their styling. This is especially crucial when dealing with complex components or deeply nested structures.

// SASS
.player-card {
  header {
    // styles for header
  }

  .information {
    // styles for information section
  }

  .button {
    // styles for button
  }
}

// CSS (without nesting)
.player-card header {
  // styles for header
}

.player-card .information {
  // styles for information section
}

.player-card .button {
  // styles for button
}

In summary, SASS provides a higher level of abstraction, promotes code reusability, and enhances readability and maintainability. While CSS can achieve similar outcomes, SASS streamlines these processes, making it an invaluable tool for developers working on projects of varying sizes and complexities. Embracing SASS empowers developers to write cleaner, more modular stylesheets, ultimately leading to more efficient and scalable web development projects.