Logo

菜单

发布于 2026-01-06 4 阅读
0

使用 Pug 和 Less 制作印度国旗

使用 Pug 和 Less 制作印度国旗

本文我们将制作印度国旗（三色旗）。顺便提一下，一些其他国家的国旗也只有三种颜色，而印度国旗实际上是四种颜色。

三色

那么，让我们先从定义印度国旗法典中定义的颜色开始，该法典包含了印度国旗的规格说明。


// navy blue
@blue: #000080;

// india saffron 
@saffron: #ff9933;

// india green
@green: #138808;

// pure white
@white: #ffffff;
Enter fullscreen mode Exit fullscreen mode

当然，这面旗帜将由三个矩形区域组成，分别代表藏红花色、白色和绿色，白色区域的中心是阿育王法轮。法轮中心有一个小圆，并有24根辐条。那么，让我们用Pug语言来描述这个结构吧。

html
  body
    .flag
      .saffron
      .white
        .wheel
          .wheel-center
          - var n = 24
          while n --> 0
            .spoke
      .green
Enter fullscreen mode Exit fullscreen mode

结构很简单。我们用一个类div名为 `<div>` 的元素flag作为旗帜部分的容器。它div包含藏红花色、白色和绿色部分（这些部分也是div带有相应类的元素）。白色部分包含一个类div名为 `<div>` 的元素wheel，而轮子包含一个类div名为 `<div>` 的元素wheel-center（这将是轮子中心的小圆）和 24 个div类名为 `<div>` 的元素spoke（这些将是 24 根辐条）。我们使用循环生成了这 24 根辐条while。Pug 支持两种迭代机制：` <div>`each和 ` <div> while`。` <div>`each用于遍历列表（JavaScript 数组），而 `<div>`while用于迭代直到满足特定条件。这里我们需要迭代 24 次，因此我们使用while带有条件的 `<div>` 循环。首先，我们定义一个变量n并将其设置为 24。然后在每次迭代中，我们使用 `<div>` 将 `<div>` 的值减n1 decrement operator --，并检查其值是否达到 0。

现在我们已经在 Pug 中创建了旗帜的结构，接下来用 Less 来设置样式。首先，我们把所有元素都设置为 `<div>`，box-sizing: border-box并设置 `<div>`body元素的背景为深色，同时让它的唯一子元素（也就是旗帜）居中div。使用 Flexbox 可以更轻松地实现元素居中。我们将设置一个mixinFlexbox 容器，使其子元素在水平和垂直方向上都居中，并将此设置应用到 `<div>` 元素mixin上body。

* {
  box-sizing: border-box;
}

// mixin to center children using flex
// The parentheses at the end are optional, because the mixin does not
// take any arguments. But it's a good practice to use the parentheses
// always, so that we can tell at a glance that this is a mixin and not 
// a class.
.center-elements () {
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  background: #1d1e22;
  width: 100%;
  height: 100vh;

  // apply the center-elements mixin.
  .center-elements();
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们来设置国旗div及其三个彩色部分的样式。根据印度国旗法，国旗的长宽比必须为 2:3，即长宽比width / height必须为2:3 1.5。为了简化操作，这里我们将使用固定的宽度和高度值675px。450px当然，这并非响应式设计。但我们先保持简单。

此外，旗帜的三个部分分别具有高度150px和100%宽度。白色部分将有额外的内边距15px，并且其子元素（它唯一的子元素是轮子）将居中显示。

.flag {
  width: 675px;
  height: 450px;
}

.saffron, .white, .green {
  width: 100%;
  height: 150px;
}

.saffron {
  background: @saffron;
}

.green {
  background: @green;
}

.white {
  background: @white;
  padding: 15px;
  .center-elements();
}
Enter fullscreen mode Exit fullscreen mode

现在我们已经有了各个部分，接下来来设置阿育王之轮的样式。白色部分的高度为，并且四周150px都设置了内边距，因此轮子的可用高度为。轮子是一个完美的圆形，所以它的宽度也为，并且它的边框半径为或。我们还将它的定位设置为，这样当我们设置辐条的定位时，它们将相对于轮子而不是相对于。轮子的轮辋将有一个宽度为的蓝色边框。它还将使用我们上面定义的 mixin 来使其子元素居中。15px120px120px60px50%positionrelativeposition: absolutedivbody4px

轮子的中心会有wheel-center div一个小蓝圈，它的20px宽度和高度分别为 和 。

.wheel {
  position: relative;
  width: 120px;
  height: 120px;

  border-radius: 50%;
  border: 4px @blue solid;

  overflow: hidden;
  .center-elements();
}

.wheel-center {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: @blue;
}
Enter fullscreen mode Exit fullscreen mode

现在只剩下辐条需要设置样式了。问题是，辐条有 24 个，如果我们尝试单独设置每个辐条的样式，那将会一团糟。这时，less mixin 就派上用场了。我们可以定义
一个 mixin，它可以递归地应用自身指定的次数。使用这样的 mixin，我们可以为这 24 个辐条生成 CSS 规则集中重复的部分。

除了旋转角度之外，每根辐条的属性都相同。由于车轮旋转360度，共有24根辐条，因此任意两根相邻辐条之间的旋转角度差必须为15度。也就是说，每根辐条的旋转角度都必须比前一根辐条高15度。

所有辐条必须相对于车轮中心绝对定位，并且它们的旋转必须从车轮中心（或辐条靠近车轮中心的一端）开始，而不是从辐条自身的中心开始。由于辐条的左上角位于车轮中心，因此辐条的变换原点将位于其左上角。

轮子的尺寸为，120px带4px边框。因此，轮子内部的可用空间尺寸为112px，其中心必须位于(56px, 56px)。我们将辐条放置在，top: 56px; left: 56px使辐条的左上角位于轮子的中心。现在我们可以调整辐条的位置，width, height以skew获得所需的辐条形状。经过几次尝试，我发现可以得到所需width: 31px; height: 4px; transform: skew(84deg);的辐条形状。

为了增加装饰效果，我们可以在轮辋辐条之间的位置添加一些半圆形的小凹槽。这可以通过::after为每个辐条添加一个伪元素来实现。我们可以将它们绝对定位，并将其样式设置为小圆圈，以达到理想的效果。

.spoke {
  position: absolute;
  left: 56px;
  top: 56px;

  width: 31px;
  height: 4px;
  background: @blue;

  transform-origin: 0 0;

  &:after {
    content: ' ';
    position: absolute;
    top: 2px;
    left: -25px;

    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: @blue;

    transform: skew(-84deg)translate(1px,3px);
  }
}

// recursive mixin to generate the nth-of-type rulesets for spokes
// terminate when the value of @n reaches 26
.gen-spokes (@n) when (@n = 26) {}

// when value of @n is less than 26, generate the ruleset for the nth
// spoke and then apply self with the next value (@n + 1)
.gen-spokes (@n) when (@n < 26) {
  @selector: ~".spoke:nth-of-type(@{n})";
  @{selector} {
    transform: rotateZ(@n * 15deg)skew(84deg);
  }
  @next: (@n+1);
  .gen-spokes(@next);
}

.gen-spokes(1);
Enter fullscreen mode Exit fullscreen mode

这是包含我们在本文中讨论的代码的 pen 文件。

好了，就是这样，我们用 Pug and Less 制作了印度国旗。

喜欢这篇文章吗？你可以在gnsp.in
上找到我的更多作品。

感谢阅读！

文章来源：https://dev.to/gnsp/making-the-flag-of-india-using-pug-and-less-3bdi
全栈框架未来会如何发展？
别再挥舞数字魔杖了