SCSS Syntax and Structure Fundamentals

// SCSS Syntax (.scss)
$primary-color: #333;

.nav {
  background: $primary-color;
  ul {
    margin: 0;
    li {
      display: inline-block;
    }
  }
}

// Sass Syntax (.sass)
$primary-color: #333

.nav
  background: $primary-color
  ul
    margin: 0
    li
      display: inline-block

// Good: 3 levels, clear structure
.card {
  padding: 1rem;
  
  &__header {
    font-weight: bold;
    
    &:hover {
      color: blue;
    }
  }
  
  @media (min-width: 768px) {
    padding: 2rem;
  }
}

// Bad: Too deep, overly specific
.nav {
  ul {
    li {
      a {
        span {  // 5 levels - avoid!
          color: red;
        }
      }
    }
  }
}

// Pseudo-selectors
.button {
  background: blue;
  
  &:hover { background: darkblue; }
  &:focus { outline: 2px solid blue; }
  &::after { content: '→'; }
}

// BEM Pattern
.card {
  border: 1px solid #ccc;
  
  &__title {
    font-size: 1.5rem;
  }
  
  &--featured {
    border-color: gold;
  }
}

// Context Selector
.sidebar {
  width: 200px;
  
  .mobile & {
    width: 100%;
  }
}

// Compound Classes
.nav-item {
  color: black;
  
  &.active {
    color: blue;
    font-weight: bold;
  }
}

.box {
  font: {
    family: Arial, sans-serif;
    size: 14px;
    weight: 600;
  }
  
  margin: {
    top: 1rem;
    bottom: 1rem;
  }
  
  border: {
    top: 2px solid blue;
    bottom: 1px solid gray;
    radius: 4px;
  }
}

// Output CSS:
// .box {
//   font-family: Arial, sans-serif;
//   font-size: 14px;
//   font-weight: 600;
//   margin-top: 1rem;
//   margin-bottom: 1rem;
//   border-top: 2px solid blue;
//   border-bottom: 1px solid gray;
//   border-radius: 4px;
// }

// This comment won't appear in CSS
// Used for developer notes and explanations

/* This comment will appear in CSS output */
/* Use for section headers and user-facing docs */

/*! 
 * This comment is ALWAYS preserved
 * Copyright 2025 - Company Name
 */

$version: '2.1.0';

/* Project Version: #{$version} */

// =========================
// Component: Navigation Bar
// =========================
.navbar {
  /* Navigation bar styles */
  background: #333;
  
  // TODO: Add responsive breakpoints
  // FIXME: z-index conflict with modal
}

// Compressed output will remove /* */ but keep /*! */

// File structure:
// styles/
//   ├── main.scss          (entry point)
//   ├── _variables.scss    (partial)
//   ├── _mixins.scss       (partial)
//   └── components/
//       ├── _button.scss   (partial)
//       └── _card.scss     (partial)

// main.scss (compiled to main.css)
@import 'variables';
@import 'mixins';
@import 'components/button';
@import 'components/card';

// Modern approach with @use
@use 'variables' as vars;
@use 'mixins' as mx;
@use 'components/button';

// Partial file naming: _variables.scss
// Underscore prevents direct compilation
// Import without underscore or extension
@import 'variables';  // finds _variables.scss