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
• 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
    • 2nd Hack

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? - It is changing the font color to blue, the font type, and the font size to 16 pixels.

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

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

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 💖

</tr> </tbody> </table> </div> </div> </div>

2nd Hack

https://github.com/dolphinalt/scss_Hacks

Located in scss.scss

</div>

Feature	SASS	CSS
Modular Design	Allows to split features between multiple files, leading to better organization of the workflow of a project. This allows for easy importing and exporting between code, which is much more difficult in CSS, where there needs to be an import of every single file or variable separately.	In CSS, you can import individual files and variables with @import, however this takes up more time and code than SASS, making it more inefficient.
Nesting	This allows for many tags and elements to be organized under certain names and groups, allowing for more organized code. This prevents repetitive code, eliminating useless code. It also allows code to be read better, leading to more	Can assign different stylings to different groups and names, but, must repeat the group name for each individual tag and element.
Variabes	Easier syntax to use when defining variables. Defined in bash-style "$" format.</td>	More convoluded syntax, using the var() function to declare any variables and values.
Operators	SASS operators are similar to those of Python. They allow for operations to be performed, allowing for more diversity in what can be done with styling in SASS. Instead of using Javascript to change styling, it can directly be done in SASS.	CSS doesn't use operators, meaning that it needs to be manipulated with Javascript if needed. This becomes more difficult and inefficient because variables need to be be created twice and imported and exported multiple times in one program to translate between languages.
Conditionals	SASS can use conditionals in order to perform actions based on certain conditions. This can all be done within SASS rather than in CSS, where there is a need to export and import between languages in order to change the properties of a style	CSS can not use conditionals, as it needs to rely on Javascript to complete any actions. This is something that adds complexity to the project, which is completely unnecessary as it should all be done locally like in SASS rather than in CSS and Javascript.
Loops	Loops allow to change a large amount of data with a list that is pre-defined. This can save time when one is writing code that changes a large amount of data with certain conditions being met. Variables can be changed with certain conditions and then applied from a list quickly through the use of loops.	CSS doesn't use loops and therefore doesn't have the same functionality as SASS. Variables can only be set once and cannot be changed in the future. It is only possible to change them with the use of Javascript, which add unnecessary steps in code.
Functions	SASS allows for declaration of functions taking variable arguments. Defined using the @function keyword. Allows for dynamically generating content on a webpage. There are also default functions like math, color, and string.	CSS does not have dynamically defined functions, however there are builtin CSS functions such as calc() and attr()
Mixin	Blocks of reusable CSS that could be used anywhere, anyplace. Allows for the creation of blueprints and templates for additional CSS refinement. Can be declared with @mixin and be called with @include.	Does not exist in CSS.
Inheritance	Can create a main class or assortment of CSS options, and then have a child class inherit the default options and then make appropriate additions or changes. Called with @extend	Also exists within regular CSS, properties are passed down from parent elements to child elements.