Introduction to Basic SASS

What is SASS?

  • A preprocessor language that’s interpreted into CSS
    • Takes input data and converts it to an output that’s used as input by another program.
    • Basically converting your code to CSS to be run by browser

SCSS vs CSS

  • CSS changes the style of your webpage
    • CSS can be really annoying to use as it lacks features
    • Ex: Layout inconsistency across phones and webpages; lacking nesting (where objects contain other similar objects); creating responsive designs that adapt to different screen sizes; and more
  • SCSS is basically a CSS version on crack. So like much better
    • SCSS just has more features that makes things more convenient
  • CSS better for simple styling in small projects with little customization
  • SCSS better for complex styling and working in projects with multiple pages with lots of customization

SASS benefits

  • Nesting Capabilities: A way of writing CSS styles that mimics the structure of your HTML. Instead of writing separate selectors, you can nest them inside each other.
    • In the example below: In the nested example, the p selector is inside the .container selector. This can make your styles more readable and mirrors the HTML structure. Just be mindful not to over-nest, as it may lead to overly specific and harder-to-maintain styles.
CSS:
.container {
  width: 100%;
}

.container p {
  color: #333;
}


SCSS:
.container {
  width: 100%;

  p {
    color: #333;
  }
}
  • Modular Approach: Split CSS into partial files, enhancing project organization.
  • Use of Variables: Easily update and maintain consistency with defined variables.
    • Ex: in CSS to make something blue you’d have to constantly write “color: #0000FF”. In SCSS you can define “$blue: #0000FF”, and then for the rest of the code just write “color: $blue” to make something blue
  • Mixins for Reusable Code: Create reusable code pieces for elements like buttons and forms.
  • Extend/Inheritance: Share CSS properties between selectors, reducing code redundancy.
  • Control Directives: Use if/else statements and for/each loops in CSS.
  • Built-in Functions: Functions for color manipulation, mathematics, and more.
  • Compatibility: Automatically handles browser prefixing for cross-browser support.

Modular SCSS

  • Organizing your CSS code into smaller pieces
    • better readability, reusability, and maintenance
  • Each piece (module) focuses on a specific part
    • easier to work with, collaborate, and update.
  • Think of it like having separate folders for different types of styles, so your code is more organized and manageable.
  • To use it: Add _ before the filenames (e.g., _filename.scss) to create partials. Import partials into the main SCSS file without the _.
// _header.scss
.header {
  // Styles for header component
}

// _footer.scss
.footer {
  // Styles for footer component
}

// main.scss
@import 'header'; // No need for the underscore
@import 'footer';

// Styles for other components in the main file

Advanced SASS

Operators:

  • Developers use operators to perform dynamic calculations within stylesheets. For example, they can use mathematical operators (+, -, *, /) to dynamically adjust sizes, positions, or other style properties based on certain conditions or user interactions.

Conditional Statements:

  • Conditional statements like @if, @else, and @else if allow developers to apply different styles based on conditions. This is crucial for creating interactive interfaces where styles change dynamically in response to user actions or application state.

Loops:

  • Loops, such as @for and @each, enable developers to iterate through lists of values or apply styles multiple times. This is useful for creating repetitive elements in a dynamic way or for handling dynamic data structures.

Functions:

  • Functions in SASS enable developers to encapsulate complex logic and calculations. This is valuable for creating dynamic styles that respond to various inputs or conditions. For instance, developers can use functions to calculate and set styles based on user preferences or device characteristics.

Built-in Functions:

  • Developers leverage built-in functions for math, color manipulation, and string manipulation to dynamically generate styles. This can be especially useful in creating color schemes, responsive layouts, and other interactive design elements.

Extending & Inheritance:

  • Extending styles with @extend allows developers to share common styles among selectors, reducing redundancy. This is beneficial for creating consistent and easily maintainable styles. In interactive designs, maintaining consistency becomes crucial as styles may change dynamically.

GameLevels Submenu and Sidebar

/// platformer-styles.scss
/// @description This stylesheet is used to style the platformer game.

/// Coding Syles in SCCS (Sass), from code below:
/// @mixin is a block of CSS declarations that can be reused in other classes, see @mixin dark-mode-color below.
/// @include is used to include a mixin in a class, see @include dark-mode-color below.
/// @extend is used to extend a class with another class, see %button below.
/// $variable is used to define a variable, see $spacing-unit, $high-emph, $dark-grey below.
/// #id is used to define an id, see #gameBegin, #gameOver, #settings below.
/// .class is used to define a class, see .sidebar below.
/// & is used to reference the parent selector, see &:hover below.
/// the double slash comments (//) are considered regular comments in Sass.
/// the triple slash comments (///) are considered documentation comments in Sass.
/// comments are not included in the compiled CSS file.
/// @import is used to import other stylesheets, see @import of this file in "_sass/minima/custom-styles.sccs".
/// see https://sass-lang.com/documentation/syntax for more information.

/// Score for the game  
/// @description This ID is used to style the score for the game, key style is to ensure it is on top of other elements.
#score { 
  position: relative; 
  z-index: 2; // z-index position ensures these buttons are on top.
  padding: 5px;
  color: $dt-red !important; // use the high-emphasis color for the text
}

/// Game Begin, Game Over, Settings IDs
/// @description These IDs correspond to buttons in game screen. Key styling is to ensure they are on top of other elements. 
#gameBegin, #gameOver, #settings, #leaderboard {
  position: relative;
  z-index: 2; // z-index position ensures these buttons are on top.
}

/// Color mixin 
/// @description This mixin is defined to share colors with classes in this stylesheet.
@mixin dark-mode-color {
  color: $high-emph !important; // use the high-emphasis color for the text
  background-color: $dark-grey !important; // use the dark grey color for the background
  border: 1px solid $dt-blue; // from dracula-highlight.scss
}

/// Horizontal Submenu
/// @description This class styles the horizontal submenu for score and buttons in the game. It has many style elements (e.g. placing submenu below header).
.submenu {
  @include dark-mode-color; // use the dark mode color scheme
  border: none; // remove setting as submenu 
  position: fixed;
  z-index: 3; // Position on Top of other elements, as well as ID buttons above
  top: $spacing-unit * 1.865;  // matches minima ".site-header min-height height", reference: https://github.com/jekyll/minima/blob/master/_sass/minima/_layout.scss

  // Styles for the score and buttons
  #score, #gameBegin, #gameOver, #settings, #leaderboard {
    display: inline-block; // Make the score and buttons inline
    margin-right: $spacing-unit; // Add some margin to the right of each item
  }
}

/// Sidebar class
/// @description This class styles the sidebar for settings in the game. It has many style elements (e.g. placing sidebar below header).
.sidebar {
  @include dark-mode-color; // use the dark mode color scheme
  border: none; // remove setting as sidebar collapse leaves residue line
  position: fixed;
  z-index: 3; // Position on Top of other elements, as well as ID buttons above
  // left: 0; // set the sidebar to be on the left side of the page
  top: 0; // calculated to be below the header and submenu 
  padding-top: 5px; 
  padding-bottom: 5px;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5-second transition effect to slide in the sidebar */
  // following are changed by JavaScript
  width: 0px;
  padding-left: 0px; 
  padding-right: 0px; 
}

/// Table class
/// @description Key style is to present game levels and make it responsive with hover highlighting.
.table.levels {
  tr {
    cursor: pointer; // Change the cursor to a pointer when it hovers over a row
    td {
      border: 1px solid $dt-blue; // from dracula-highlight.scss
    }
    &:hover { // Change the background when a row is hovered over
      background-color: $dt-blue; // from dracula-highlight.scss

      td {
        background-color: inherit; // Make the background color of the td elements the same as the tr element
      }
    }
  }
}

/// Input mixin
/// @description This mixin sets some common styles (e.g. color, height) for the input fields, avoiding duplication of common styles in each input class.
/// @param {Number} width - The width of the input field, how wide it is.
/// @param {Number} height - The height of the input field, how tall it is.
/// @param {Color} border - The border color of the input field, the outline color.
/// @param {Number} border-radius - The border radius of the input field, rounded corners.
/// @param {Number} padding - The padding inside the input field, space between the border and the text.
/// @param {String} text-align - The text alignment inside the input field, left, right, or center.
@mixin input {
  @include dark-mode-color; // use the dark mode color scheme
  height: 30px;
  border-radius: 5px;
  padding: 5px;
}

/// Input class
/// @description This class styles the userID input field, key style is to make it wider.
.input.userID {
  @include input;
  width: 100px;  // customize width of the input field
}

/// Input class
/// @description This class styles the gameSpeed and gravity input fields, key style is to right-align the text.
.input.gameSpeed, .input.gravity {
  @include input;
  width: 40px;  // customize width of the input field
  text-align: right; // right-align input for numbers
}

How does this HTML code use SASS?

  • There are different variables included within the code using variables such as ($spacing-unit) and ($high-emph)

How do submenus and sidebars show up?

  • To make these show up they use a specfic class and they all start with “.” or “#” but to make spefic things such as a submenu or a side bar you would have to start the code with (#submenu) or (.sidebar) in order for those to work and it should work for other things such as table levels. The action would just need to begin with a . or #.

How does it look?

Button Example 
Example SCSS Code:

// button styling
$primary-color: #3498db;
$secondary-color: #2ecc71;

@mixin button-styles($bg-color, $hover-color) {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: $bg-color;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: $hover-color;
  }
}

.button-primary {
  @include button-styles($primary-color, darken($primary-color, 10%));
}

.button-secondary {
  @include button-styles($secondary-color, darken($secondary-color, 10%));
}
// responsive styling
//changes hover colors when width of window is less than 1024px
@media screen and (max-width: 1024px) {
  //changes hover colors when width of window is less than 1024px
  .button-primary {
    @include button-styles($primary-color, lighten($primary-color, 20%));
  }
  
  .button-secondary {
    @include button-styles($secondary-color, lighten($secondary-color, 20%));
  }
}