Flask 背景顶条图像ZURB基金会和烧瓶模板继承_Flask_Zurb Foundation_Scss Mixins

Flask 背景顶条图像ZURB基金会和烧瓶模板继承

flask zurb-foundation

Flask 背景顶条图像ZURB基金会和烧瓶模板继承,flask,zurb-foundation,scss-mixins,Flask,Zurb Foundation,Scss Mixins,我正在使用开发一个应用程序。作为前端框架，我正在使用。我已经创建了一个layout.html模板，并正在使用它进行扩展网站的布局包括一个带有背景图像的顶部栏，类似于。layout.html的相关代码如下： <!doctype html> <html class="no-js" lang=""> <head>  </head> <body> {% block n

我正在使用开发一个应用程序。作为前端框架，我正在使用。我已经创建了一个

layout.html

模板，并正在使用它进行扩展

网站的布局包括一个带有背景图像的顶部栏，类似于。

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 -->

例如，扩展

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 %}

.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);
}

好消息是一切都按预期进行，但正如您可能已经注意到的那样，我正在打破

\u main.scss

文件中的DRY原则。我的问题是：我能用它来解决这个问题吗？或者可以使用哪种不同的方法更合适？

如果您遇到的问题是样式重复，只需将这些样式提取到单独的类中即可。大概是这样的：

{% extends "layout.html" %}

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

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

.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);
}

因此，标记将变成：

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

我希望我正确理解了你的问题。

谢谢@dmitrybelyakov如果我完全按照你的想法来做，背景图像将放在正确的中心位置。但是，如果我像这样向特定的

{{headerclass}}

添加更多

css

。index{background:url（'../img/img1.JPG'）没有固定的重复中心；background size:cover；}它工作得很好。你知道为什么会这样吗？我想我知道为什么会这样。根据我所看到的，

.css

代码是从上到下执行的。如果这是真的，最后执行的代码是

.index{background image:url（../img/img1.JPG）；}

，但没有任何样式参数，如

center

，

cover

，等等。您认为呢？

.index

只定义了背景，因此，如果您在

元素上同时使用这两个类，那么它应该只将该属性添加到

.header main

中定义的内容中。