SASS Buttons Grammar

1. Reference Guide

Use this reference table to choose the correct semantic tag and OCS SASS utility class for each button type on your school page:

UI Role	Semantic Tag	OCS SASS Utility Classes	Purpose / Example
Primary Action	`<button>`	`ocs__btn fill`	Main action on a page (e.g., “Submit Assignment”)
Secondary Action	`<button>`	`ocs__btn outline`	Alternative option (e.g., “Save Draft”)
Page Link	`<a>`	`ocs__btn outline`	Navigating to another page (e.g., “View Grades ↗”)
Success / Green	`<button>` / `<a>`	`ocs__btn alert-green fill`	Affirmative or success actions (e.g., “Turn In Homework”)
Caution / Yellow	`<button>` / `<a>`	`ocs__btn alert-yellow outline`	Pending or warning states (e.g., “Request Extension”)
Danger / Red	`<button>` / `<a>`	`ocs__btn alert-red fill`	Destructive actions (e.g., “Drop Class”)
Small Variant	`<button>` / `<a>`	`ocs__btn small`	Compact buttons inside tables or card headers

2. LxD Cycle Process

2.1 Empathize

When students build interfaces, they frequently rely on raw, unorganized CSS. This approach leads to messy stylesheets, inconsistent styling rules, and duplicated code (Coyne & Nielsen, 2019).

2.2 Define

Point of View (POV) Statement: CSP students need a structured method for designing user interface components because unorganized raw CSS creates redundant code, and inconsistent experiences
Learning Goals:
1. Understand how SASS variables eliminate hardcoded style values and ensure global visual consistency.
2. Implement SASS parent selectors (&) and nesting to group button states (:hover, :active) cleanly inside single class definitions.
3. Create reusable SASS mixins with parameters to standardize button variations (sizes, primary/secondary states) without duplicating code.

2.3 Ideate

To fix messy stylesheets and inconsistent designs, we ask: How Might We use SASS features to turn disorganized CSS buttons into a clean, reusable system?

Ideation Strategies:
- Central Theme Variables: Create base variables like $primary-color and $btn-radius so every button looks consistent across the app.
- Reusable Mixins: Create a single button template (@mixin) that generates primary, secondary, and disabled buttons without repeating code.

2.4 Prototype & Test

Prototype

Interactive Lesson Artifacts: A reference guide, runnable SASS/SCSS examples, personalized variable practice, an interactive state challenge, and a scaffolded grading rubric.
Iterative Learning Loop: Students revise SASS variable declarations, nesting rules, and mixin arguments after observing live preview rendering or compiler feedback.
Mastery Criteria: Excellence means explaining why each SASS feature (variables, nesting, mixins) fits the UI component, applying parent selectors (&) appropriately, and refining initial stylesheet attempts rather than simply producing matching styles.

Test

Ask peers during peer review to complete the SASS button and card challenges
Compare your SASS lesson structure and interactive code runner setup with another posted group lesson.
Upon submission, collect evidence from live runner output, Popcorn Hack completions, self/peer grading, and student technical explanations.
After teaching, grading, and analyzing student performance, return to revise the notebook content to complete the LXD cycle for continuous improvement.

3. College Board Requirements

3.1 AP CSP Alignment & Pseudo Code

This lesson connects to AP CSP Big Idea 3 (Algorithms & Programming). Quoted from the AP Computer Science Principles Course and Exam Description (College Board, 2024):

AAP-2.A.1: “A procedure is a named group of programming instructions that may have parameters and return values.”
AAP-2.C.1: “Selection uses a conditional statement to determine which part of an algorithm is executed based on a Boolean condition.”
AAP-3.A.1: “Using procedures allowed developers to write code that is reusable, easier to read, and easier to maintain.”

Just like a procedure takes inputs to run code, a SASS mixin takes parameters (like color or size) to generate UI styles dynamically.

Here is the logic for how a button changes states when a user interacts with it:

PROCEDURE handleButtonInteraction(buttonElement, isHovered, isClicked)
{
    IF (isClicked)
    {
        SET buttonElement.class TO "ocs__btn active"
    }
    ELSE
    {
        IF (isHovered)
        {
            SET buttonElement.class TO "ocs__btn hover"
        }
        ELSE
        {
            SET buttonElement.class TO "ocs__btn default"
        }
    }
}

4. Lesson Plan & Tech Talk

4.1 Lesson Overview

This lesson teaches how to fix messy CSS using clean, organized SASS buttons:

Tech Talk: Quick guide on SASS vs. raw CSS.
Code Practice: Try interactive code runners.
Hacks & Wrap-Up: In-class practice and homework setup.

4.2 Learning Levels

Level A (Simple - Variables): Store reusable colors and sizes in SASS variables ($btn-primary: #3b82f6;) to remove hardcoded values.
Level B (Intermediate - Nesting): Keep hover and active states (&:hover, &:active) inside the main button class so styles aren’t scattered.
Level C (Complex - Mixins): Build reusable templates (@mixin) that generate primary, secondary, and sized buttons instantly.

5. Code Examples & Content

Here we will learn the three core SASS features that help reduce messy CSS and keep UI designs clean for a specific project like My Good Brain, targeting mental health interfaces.

5.1 SASS Variables: Centralizing Theme Values

Instead of repeating so many values and colors across multiple CSS rules, SASS variables allow you to store values in one place using the $ symbol.

Why Use Variables?

Global Consistency: Change a color once in $primary-color, and every button using it updates automatically.
Readable Code: $calm-green is much easier to read and remember than #0d9488.

Example: SASS Variables in Action

Here is how we declare a theme color variable and apply it to, for example, a mental health resource button:

// 1. Declare variables storing theme values
$mental-health-teal: #0d9488;
$button-radius: 8px;

// 2. Use the variables inside the class
.btn-resource-directory {
  background-color: $mental-health-teal;
  border-radius: $button-radius;
  color: white;
}

Popcorn Hack #1: Variable Customization

Challenge

Task: Change the theme color variable ($mental-health-teal) from #0d9488 to a warm blue (#0284c7), and change the border radius variable ($button-radius) to 20px. Press Run to see your variables update the button automatically!

Lines: 1 Characters: 0

UI Output

5.2 SASS Nesting & Parent Selectors (`&`)

SASS nesting lets you put interaction styles like hover and click states directly inside the main class block instead of writing separate CSS selectors.

Keywords

Nesting: Placing CSS rules inside other CSS rules to mirror HTML structure.
Parent Selector (&): A special SASS operator that references the outer class name (e.g., &:hover becomes .btn-mood-log:hover).
Hover State (:hover): Styles that trigger when the user hovers their mouse over an element.

Example Code Structure

Here is how nesting keeps hover and active rules contained inside one block for a My Good Brain mood logging action:

// Theme Variable for Mental Health Portal
$calm-teal: #0d9488;

// Main Button Class
.btn-mood-log {
  background-color: $calm-teal;
  color: white;
  padding: 10px 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;

  // Nested Hover State (& replaces .btn-mood-log)
  &:hover {
    background-color: #0f766e;
  }

  // Nested Active State (&:active)
  &:active {
    transform: scale(0.96);
  }
}

Popcorn Hack #2: Nesting & Interactive States Runner

Challenge

Task: 1. Change the base button color ($calm-teal) from #0d9488 to #0284c7. 2. Update the hover state color (#0f766e) to #0369a1. 3. Add a border-radius of 12px to round the button edges. Press Run to see your changes!

Lines: 1 Characters: 0

UI Output

5.3 SASS Mixins (`@mixin` and `@include`)

SASS Mixins let you create reusable blocks of CSS styles that you can include anywhere in your stylesheet, helping avoid repetitive code across components.

Keywords

Mixin (@mixin): A SASS feature that defines a reusable block of styles (like a function in programming).
Include (@include): The directive used to apply a defined mixin inside a CSS selector.
Arguments: Optional variables passed into a mixin to customize its properties dynamically.

Example Code Structure

Here is how a mixin creates a reusable card layout for My Good Brain mental health resource cards:

// Define a Reusable Card Mixin
@mixin card-layout($bg-color,$border-color) {
  background-color: $bg-color;
  border: 2px solid $border-color;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

// Apply Mixin to Daily Mindfulness Tip Card
.mindfulness-card {
  @include card-layout(#f0fdf4, #86efac);
  color: #166534;
  max-width: 300px;
}

Popcorn Hack #3: Mixin Customization & Card Theme

Challenge

Task: 1. Update the background color passed into the card-layout mixin (#f0fdf4) to a soft lavender blue (#f0f9ff). 2. Change the border color (#86efac) to a calming teal border (#38bdf8). 3. Change the card status text inside the button to "Daily Check-In Complete". Press Run to see your reusable card layout adapt!

Lines: 1 Characters: 0

UI Output

6. Hacks & Practice Tasks

Prepare Your Submission IPYNB

To complete and submit your work for this lesson, create a dedicated Jupyter Notebook (.ipynb) in your portfolio repository following these steps:

Create a notebook in your portfolio homework area: _notebooks/homework.
Add a markdown cell with the frontmatter below.
Add code cells for the Popcorn Hack and Homework Hack.
Keep %%html and the UI_RUNNER comment in each code cell.
Run each cell and verify the rendered result before submitting.

---
layout: post
title: SASS Button Grammar HW
categories: [SASS]
lesson_language: SASS
lesson_topic: Buttons HW
lesson_part: interactive
lesson_type: lesson
permalink: /sass/buttons-hw/
author: githubID
---

Submission Safety Rules (Read First):

Keep %%html and the  line intact at the top of your notebook cell.

Remove all inline style="..." attributes and custom non-OCS classes.

Use only semantic tags (<button>, <a>) paired with OCS SASS classes (ocs__btn, fill, outline, small, alert-green, alert-yellow, alert-red).

Add code cells for the Popcorn Hack and the Homework Hack. Make sure every cell runs with visible output.
Submit the link to your published page at the bottom of this page

Homework Hacks

Below is starter SASS code for your assignment. Copy this code blocks directly into your notebook .ipynb cells (or inside <style lang="scss"> tags) and modify it according to the challenge’s instruction.

Hack 1: Adaptive Resource Badge (Variables & Logic)

Goal: Create a color-coded status badge for different mental health resource categories (e.g., Urgent Help, Self-Care, Community).

Copy the starter SASS code below into your notebook.
Define three custom color variables for three distinct urgency levels: $badge-urgent, $badge-care, and $badge-community.
Apply these variables to .mgb-badge--urgent, .mgb-badge--care, and .mgb-badge--community modifier classes.

// Starter Code — Copy to Notebook
// TODO: Define your 3 theme variables here
$badge-urgent: #e11d48; // Example: Warm Red
$badge-care: #0d9488;   // Example: Teal
$badge-community: #8b5cf6; // Example: Lavender

.mgb-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  
  // TODO: Use your variables inside these specific modifier classes
  &--urgent {
    background-color: $badge-urgent;
  }
  &--care {
    background-color: $badge-care;
  }
  &--community {
    background-color: $badge-community;
  }
}

Hack 2: Interactive Mindful Journal Card (Nesting & States)

Goal: Build a card component for a daily reflection entry that dynamically responds to focus and click interactions using SASS nesting.

Copy the starter SASS code block below into your notebook.
Complete the nested pseudo-selectors (&:hover, &:focus-within, and &:active).
Add a soft box-shadow and vertical translation (transform: translateY(...)) on hover.
Style a nested .journal-input textarea element that updates its border color when focused (&:focus).

// Starter Code — Copy to Notebook
$card-bg: #f8fafc;
$card-border: #cbd5e1;
$active-glow: #0284c7;

.mgb-journal-card {
  background-color: $card-bg;
  border: 2px solid $card-border;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.25s ease-in-out;

  // TODO: Add nested hover state using parent selector (&)
  &:hover {
    border-color: $active-glow;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(2, 132, 199, 0.12);
  }

  // TODO: Style nested textarea element and its focus state
  .journal-input {
    width: 100%;
    border: 1px solid $card-border;
    border-radius: 6px;
    padding: 8px;
    
    // TODO: Use parent selector for focus state
    &:focus {
      outline: none;
      border-color: $active-glow;
    }
  }
}

Grading Plan (1 Point Total)

Part	Points	What earns the points
Popcorn Hacks (1–3)	0.30	Completes all 3 interactive Popcorn Hacks (Variables, Nesting, and Mixins) in code runners with active cell executions (0.10 pts each).
Homework Hack 1: Adaptive Resource Badges	0.35	Correctly declares 3 SASS variables and applies them to urgency modifier classes (`--urgent`, `--care`, `--community`).
Homework Hack 2: Mindful Journal Card	0.35	Implements nested hover and focus states using SASS parent selectors (`&`) and styles the nested `.journal-input` textarea.
Total	1.0

7. Lesson Revisions

What we changed based on feedback.

Made homework simpler by providing copy-paste SASS templates focused on My Good Brain components.Also added interactive code runners so students get instant feedback when changing variables and hover rules.

8. Feedback Evidence

Our peers mentioned that our lesson wasn’t as interactive as before, so we implemented more popcorn hacks and code runners. We also included more examples as they mentioned it was a bit hard to understand at first

9. References

College Board. (2024). AP Computer Science Principles course and exam description. https://apcentral.collegeboard.org/media/pdf/ap-computer-science-principles-course-and-exam-description.pdf

Sass Documentation. (n.d.). Sass basics: Variables, nesting, and mixins. https://sass-lang.com/guide

Coyne, K., & Nielsen, J. (2019). Web Usability and Component Design Patterns. Nielsen Norman Group.

Submit Assignment

Need to update a submission later? Open the submissions dashboard.

Create Microblog Post

Reply to Post

1. Reference Guide

2. LxD Cycle Process

2.1 Empathize

2.2 Define

2.3 Ideate

2.4 Prototype & Test

Prototype

Test

3. College Board Requirements

3.1 AP CSP Alignment & Pseudo Code

4. Lesson Plan & Tech Talk

4.1 Lesson Overview

4.2 Learning Levels

5. Code Examples & Content

5.1 SASS Variables: Centralizing Theme Values

Why Use Variables?

Example: SASS Variables in Action

Popcorn Hack #1: Variable Customization

Challenge

5.2 SASS Nesting & Parent Selectors (&)

Keywords

Example Code Structure

Popcorn Hack #2: Nesting & Interactive States Runner

Challenge

5.3 SASS Mixins (@mixin and @include)

Keywords

Example Code Structure

Popcorn Hack #3: Mixin Customization & Card Theme

Challenge

6. Hacks & Practice Tasks

Prepare Your Submission IPYNB

Submission Safety Rules (Read First):

Homework Hacks

Hack 1: Adaptive Resource Badge (Variables & Logic)

Hack 2: Interactive Mindful Journal Card (Nesting & States)

Grading Plan (1 Point Total)

7. Lesson Revisions

8. Feedback Evidence

9. References

Submit Assignment

5.2 SASS Nesting & Parent Selectors (`&`)

5.3 SASS Mixins (`@mixin` and `@include`)