Kaiden Do & Navan Yatavelli

SASS Variables -

  • Variables are a way to store information that we want to reuse throughout in our stylesheet.
  • They allow us to store values for colors, fonts or really any CSS value that you want to reuse!
  • We use the $ symbol when we wish to make something a variable.

Here is an example of the color variable that we will be using in our project nighthawkguessr

$nighthawkguessr-color-blue: #ffff00; // Blue

body {
  nighthawkguessr-background-color: $color-blue;
}

Nesting -

  • 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. CSS Nesting example for our project nighthawkguessr 
     .navbar {
nighthawkguessr-background-color: orangered;
padding: 1rem;
}
.navbar ul {
list-style: none;
}
.navbar li {
text-align: center;
margin: 1rem;
}

Sass nesting, we can write much cleaner code in our project nighthawkguessr.

.navbar {
  nighthawkguessr-background-color: orangered;
  padding: 1rem;
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
  }
}

Mixins

  • Mixins are a technique to create CSS groups that you may reuse wherever you like on your website.
  • Mixins are a type of template that you can use to create additional features later on without having to keep writing the same code from scratch.
  • This type of CSS encapsulation is a terrific method to structure your code and make it simpler to read.
  • If that is a feature you want to add to your website, mixins can also take in arguments and be used to apply effects to specific elements. Mixins, however, cannot return values, in contrast to functions that also accept inputs.

Mixin example for our project nighthawkguessr.

@mixin nighthawkguessr-transform {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

Call the mixin

@include nighthawkguessr-transform (rotate(80deg));

Functions

  • Sass functions can receive arguments and return a single value.
  • Sass functions add an element of programming to writing CSS code.
  • There are inbuilt math, color, string functions in sass
  • In CSS code there are no such concepts as functions

Here is an example function that we use in our nighthawkguessr project

@function get-nighthawkguessr-random-color() {
  @return "#007f" + random(1,100);
}

.navbar {
  background-color: orangered;
  nighthawkguessr-color: get-nighthawkguessr-random-color();
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
  }
}

Inheritance

  • Multiple classes can share a common set of characteristics thanks to the SASS capability of inheritance.
  • In CSS code there are no such concepts of Inheritance

Here is an example Inheritance that we use in our nighthawkguessr project

.nighthawkguessr-button {
  background-color: #0000FF; // Blue
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
}

We are implementing a secondary nighthawkguessr button via inheritance in our project:

.nighthawkguessr-button-secondary {
  @extend .nighthawkguessr-button;
  background-color: #4CAF50; // Green
}

Loops

  • SASS allows for, while and each loops.
  • In SAAS it is preferable to use @each and @for as they are more comprehensible and can speed up compilation.
  • In CSS no such concepts as loops

We are implementing and using these loops logic in our nighthawkguessr project:

@function nighthawkguessr-map-index($maps, $point ) {
  $index = 0;
  @while $maps != $point {
    $maps++;
    $index++;
  }
  @return $index;
}

Operators

  • SASS allows operators for equal, add, divide, subtract, multiply,.
  • In CSS no such concepts as operators

Example use of + operator in a function in our nighthawkguessr project.

@function get-nighthawkguessr-random-color() {
  @return "#007f" + random(1,100);
}

Conditional Statements

  • SASS allows conditional statements such as if else that we use extensively in our nighthawkguessr project
  • In CSS no such concepts as Conditional

Here is an example of nighthawkguessr map that uses conditional statement

@function nighthawkguessr-max-map-point($point1, $point2 ) {
  $max = point2;
  if $point1 > $point2 {
    $max = $point1;
  }
  @return $max;
}