【发布时间】：2019-08-28 23:06:30
【问题描述】：
我正在使用Flask 开发应用程序。作为前端框架，我使用的是Zurb-Foundation。我创建了一个layout.html 模板，我正在使用template inheritance 对其进行扩展。
网站的布局包括一个带有背景图片的顶栏，类似于this one。 layout.html的相关代码如下：
<!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 -->
我想为与导航栏上的链接关联的每个网站页面设置不同的顶栏背景图像。顶栏背景图像取决于<header class= {{ headerclass }}>。为了让每个网站页面有不同的顶栏背景图像，我已经参数化了<header class= {{ headerclass }}>。参数{{ headerclass }} 的提供方式如下：
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)
例如，扩展layout.html的index.html模板是这样的：
{% extends "layout.html" %}
{% block title %}Index{% endblock title %}
{% block content %}
<h1>Index</h1>
<p class="important">
Hello world.
</p>
{% endblock content %}
最后，为了生成styles.css，我编译了一些.scss 文件。定义类<header class= {{ headerclass }}> 样式的相关代码如下_main.scss 文件：
// 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
好消息是一切都按预期工作，但您可能已经注意到我违反了_main.scss 文件中的DRY 原则。我的问题是：我可以使用mixins 来解决问题吗？或者可以使用哪些不同的方法更合适？
【问题讨论】：
标签： flask zurb-foundation scss-mixins