Background top-bar images Zurb Foundation and Flask template inheritance

I am using Flask to develop an application. As a front-end framework, I am using Zurb-Foundation. I have created a layout.html template and I am using template inheritance to extend it.

The layout of the website includes a top-bar with a background image, similar to this one . The relevant code for the layout.html is the following:

<!doctype html>
<html class="no-js" lang="">

<head>
  <!-- More code here -->
</head>    
<body>
  {% block navbar %}
  <header class= {{ headerclass }}>
    <div class="contain-to-grid startup-top-bar">
        <nav class="top-bar" data-topbar>
        ...
        ...
        ...
  <!-- More code here -->

I want to have different top-bar background images for each of the website pages associated with the links on the navigation bar. The top-bar background images depends on <header class= {{ headerclass }}>. In order to have different top-bar background images for each of the website pages, I have parameterized the <header class= {{ headerclass }}>. The parameter {{ headerclass }} is supplied in the following way:

from flask import render_template
from appmodule import app

@app.route("/")
def index():
    return render_template('index.html', headerclass = 'index')

@app.route("/anotherchild")
def anotherchild():
    return render_template('anotherchild.html', headerclass = 'anotherchild')

if __name__ == "__main__" :
    app.run(port=5000, debug=True)

For example, the index.html template that extends layout.html is like this:

{% extends "layout.html" %}

{% block title %}Index{% endblock title %}

{% block content %}
    <h1>Index</h1>
    <p class="important">
      Hello world.
    </p>
{% endblock content %}

Finally, to generate the styles.css I compile some .scss files. The relevant code for the one that defines the style for the class <header class= {{ headerclass }}> is the following _main.scss file:

// Style for the index page
.index {
    background: url('../img/img1.JPG') no-repeat center center fixed;
    background-size: cover;
    .startup-hero {
        padding-top: rem-calc(150px);
        padding-bottom: rem-calc(150px);
        .hero-lead {
            color: darken(#fff, 30%);
        }
    }
  ...
  ...
  // more code here

// Style for the anotherchild page
.anotherchild {
    background: url('../img/img2.JPG') no-repeat center center fixed;
    background-size: cover;
    .startup-hero {
        padding-top: rem-calc(150px);
        padding-bottom: rem-calc(150px);
        .hero-lead {
            color: darken(#fff, 30%);
        }
    }
  ...
  ...
  // more code here

The good news is that everything is working as expected, but as you might have noticed I am breaking the DRY principles in the _main.scss file. My question is: Can I use mixins to solve the issue ? Or what different approach that can be used that is more suitable?

Solution

If the issue you're having is duplication of styles - just extract these styles to a separate class. Something like this:

.header-main {
    background-repeat: no-repeat;
    background-position:  center center;
    background-attachment: fixed;
    background-size: cover;
    .startup-hero {
        padding-top: rem-calc(150px);
        padding-bottom: rem-calc(150px);
        .hero-lead {
            color: darken(#fff, 30%);
        }
    }


.index {
    background-image: url(../img/img1.JPG);
}
.anotherchild {
    background-image: url(../img/img2.JPG);
}

So the markup then simply becomes:

<header class="header-main {{ headerclass }}">

I hope I understood your question correctly.