CSS:
.container {
  width: 100%;
}

.container p {
  color: #333;
}


SCSS:
.container {
  width: 100%;

  p {
    color: #333;
  }
}

// _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

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

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