삽살개로 인도 깃발 만들기

본문에서 우리는 인도 국기(삼색)를 제작할 것이다.흥미로운 사실은 다른 일부 국가의 국기는 세 가지 색깔이 있고, 인도 국기는 실제로 네 가지 색깔이 있다는 것이다.

인도 국기 규범에 정의된 색을 정의하는 것부터 시작합시다.

// navy blue
@blue: #000080;

// india saffron 
@saffron: #ff9933;

// india green
@green: #138808;

// pure white
@white: #ffffff;

물론 국기는 세 개의 직사각형 부분이 있는데 각각 붉은 꽃, 흰색과 녹색 부분이고 흰색 부분의 중앙에는 아육왕의 바퀴가 있다.바퀴 중심에는 작은 안쪽 코일과 24개의 바퀴살이 있다.그럼, 파그로 이 구조를 적어 봅시다.

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

구조가 간단하다.우리는 div의flag를 표지 부분으로 하는 용기가 있다.이 div 는 붉은 꽃, 흰색, 녹색 부분(또는 div의 관련 종류를 포함한다.흰색 부분은 등급div을 가진wheel, 바퀴는 등급div을 가진wheel-center(바퀴 중심의 작은 원이 될 것)과 등급div을 가진spoke(24개의 바퀴살이 될 것)을 포함한다.우리는 while 순환을 사용하여 24개의 바퀴살을 생성했다.Pug는 2가지 교체 메커니즘을 지원합니다.each 및 while.each는 교체 목록 (Javascript 그룹) 에서 유용하고, while 은 특정 조건이 충족될 때까지 교체할 때 유용하다.여기에서 우리는 24번 교체를 원하기 때문에 while 순환과 조건을 사용한다.우선 변수n를 정의하고 24로 설정합니다.그리고 매번 교체할 때, 우리는 n 를 사용하여 decrement operator -- 의 값을 1 줄이고 이 값이 0에 도달했는지 확인합니다.
이제 우리는 파그 깃발의 구조를 가지고 더 적은 글씨체로 그것을 설계할 수 있게 되었다.우선, 모든 내용을havebox-sizing: border-box로 설정하고, body를 짙은 배경이 있는 것으로 설정하고, 유일한 하위 항목인 로고div를 가운데로 설정합니다.flexbox를 사용하면 모든 것을 중앙에 맞추기 쉽다.우리는 mixin 를 하나의 flex 용기로 설정하여 하위 용기의 수평과 수직을 가운데에 두고 mixin 에 적용할 것이다.

* {
  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();
}

다음은 국기body와 국기의 세 가지 컬러 부분을 디자인해 봅시다.인도 국기 코드에 따르면 국기의 비율은 2 곱하기 3, 즉 div 의 값은 width / height 이어야 한다.간단하게 보기 위해서, 우리는 고정값1.5과 675px을 사용하여 깃발의 너비와 높이를 표시할 것이다.물론 이것은 반응이 없다.하지만 간단하게 하자.
이 밖에 국기의 3개 부분 중 각 부분의 높이는 450px 과 150px 너비이다.흰색 부분은 추가 충전100%이 있고 그 자항을 가운데에 놓는다(유일한 자항은 바퀴가 될 것이다).

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

이제 이런 부분이 생겼으니 Ashoka의 바퀴를 설계합시다.흰색 부분의 높이가 15px이기 때문에 우리는 그 위(모든 측면)에 150px의 충전물이 있기 때문에 바퀴의 사용 가능한 높이는 15px이다.바퀴는 완벽한 원이기 때문에 그 너비도 120px, 경계 반경 120px 또는 60px 이 될 것이다.우리는 또한 그것50%을 position로 설정했다. 이렇게 하면 우리가 바퀴에 relative 를 설치할 때 바퀴position: absolute가 아니라 바퀴div에 대해 위치를 정할 수 있다.바퀴 가장자리에 넓은 파란색 테두리가 있을 것이다.또한 위에서 정의한mixin을 사용하여 하위 그룹을 가운데에 배치합니다.
바퀴의 중심에는 body4px가 있을 것이다.이것은 wheel-center 넓이와 높이의 파란색 작은 동그라미다.

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

이제 바퀴살만 남았어요.문제는 그들이 24명이라는 것이다. 만약 우리가 그들을 단독으로 설계하려고 한다면 그것은 혼란스러울 것이다.이것이 바로 우리가 더 적은 혼합물을 정의할 수 있는 이유이다
자신이 지정한 횟수의 혼합을 차례로 적용할 수 있다.이런 혼합을 사용하면 우리는 24개의 바퀴살에 css 규칙 집합의 중복 부분을 생성할 수 있다.
회전을 제외하고는 모든 바퀴살은 같은 속성을 가지고 있다.whleel은 360도이고 24개의 바퀴살이 있기 때문에 두 개의 인접한 바퀴살 사이의 차이는 반드시 15도여야 한다.즉, 모든 바퀴살의 회전값은 반드시 이전 바퀴살보다 15도 높아야 한다.
모든 바퀴살은 바퀴 중심에 비해 절대적으로 위치를 정해야 하며, 그 회전은 바퀴 중심(또는 바퀴 중심을 향한 바퀴살 끝)에서 시작해야 하며, 바퀴살 자체의 중심에서 시작해야 한다.바퀴살의 왼쪽 상각은 바퀴의 중심에 있고 바퀴살의 변환 원점은 왼쪽 상각에 있기 때문이다.
바퀴의 사이즈는 div, 가장자리는 20px이다.따라서 바퀴 내부의 사용 가능한 공간 사이즈는 120px이고 그 중심은 4px에 있어야 한다.우리는 바퀴살의 왼쪽 상단이 바퀴 중심에 위치하도록 112px에 위치를 정할 것이다.현재 우리는 (56px, 56px)과top: 56px; left: 56px를 처리하여 필요한 바퀴살 모양을 얻을 수 있다.몇 차례의 시도를 통해 나는 width, height 필요한 바퀴살 모양을 제공한 것을 발견했다.
추가 장식으로 우리는 바퀴 바퀴살 사이에 작은 반원형 오목한 흔적을 추가할 수 있다.이것은 모든 바퀴살의 skewpsuedo 원소를 사용하여 실현할 수 있다.우리는 그것들을 절대적으로 포지셔닝하고 작은 동그라미로 설정하여 필요한 효과를 얻을 수 있다.

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

이것은 우리가 본문에서 토론한 코드를 포함하는 만년필이다.
그렇습니다. 우리는 삽살개로 인도 국기를 만들었습니다.
이거 좋아요?
너는 gnsp.in에서 더 많은 나의 작품을 찾을 수 있다
읽어주셔서 감사합니다!