CodingBowl

Summary

Using SCSS (Sassy CSS) with Django and Bootstrap provides full control over Bootstrap’s design system. It enables you to customize, override, and optimize styles tailored to your project needs.

Prerequisites

Overview: Install Bootstrap + Sass

Create a package.json file and run npm install:

{
  "name": "project_name",
  "version": "1.0.0",
  "description": "Django + Bootstrap + Sass project",
  "scripts": {
    "build:sass": "bash scripts/sass/build_sass.sh"
  },
  "devDependencies": {
    "bootstrap": "^5.3.6",
    "sass": "^1.63.6"
  }
}
  

1. Install Bootstrap

npm install -g bootstrap@5.3.6

2. Install Sass

Note: Bootstrap 5.3.6 is compatible with Dart Sass v1.32.0+, but deprecated functions such as green() or adjust() may cause warnings in Sass v1.70+. Sass v1.63.6 is a stable version that avoids these issues.

npm install -g sass@1.63.6

Script Commands

To compile SCSS themes:

scripts/sass/build_sass.sh

Contents of build_sass.sh

#!/bin/bash

NUM_THEMES=2
themes=()
for ((i=1; i<=NUM_THEMES; i++)); do
  themes+=("theme-$i")
done

INPUT_DIR="static/scss"
OUTPUT_DIR="static/css"

mkdir -p "$OUTPUT_DIR"

for theme in "${themes[@]}"; do
  INPUT_FILE="$INPUT_DIR/$theme.scss"
  EXT_OUTPUT="$OUTPUT_DIR/$theme.css"
  COMP_OUTPUT="$OUTPUT_DIR/$theme.min.css"

  if [ -f "$INPUT_FILE" ]; then
    echo "Compiling $theme (expanded)..."
    sass --style=expanded "$INPUT_FILE" "$EXT_OUTPUT"

    echo "Compiling $theme (compressed)..."
    sass --style=compressed "$INPUT_FILE" "$COMP_OUTPUT"

    echo "$theme compiled successfully."
  else
    echo "Warning: $INPUT_FILE not found. Skipping..."
  fi
done

echo "All themes processed."
  

Managing the Base Theme

1. View static/scss/theme/styles.scss to see included SCSS files.
2. Place custom styles in relevant files, e.g., use _modal.scss for modal-specific styles.
3. For app-specific styles, create _appname.scss and import it into styles.scss.
4. Recompile themes using:

   scripts/sass/build_sass.sh

Creating a New Theme

1. Create a folder: static/scss/theme-3
2. Use bootstrap.build to generate colors and theme customizations.
3. Download and place:
   • _variables.scss
   • Rename custom.sass to custom.scss

   Place both in the theme folder, e.g., static/scss/theme-3/

4. Create an SCSS entry file: static/scss/theme-3.scss
5. Update NUM_THEMES in build_sass.sh to 3.
6. Recompile using:

   scripts/sass/build_sass.sh

7. Update the base template:

   <link id="theme-style" rel="stylesheet" href="{% static 'css/theme-3.min.css' %}">

Responsive Styling

Add responsive styles to static/scss/theme/_responsive.scss.

Ensure it's imported in styles.scss using:

@import "responsive";