log weekly january 2025 mixin

Mixin in CSS

2025년 1월 7일 화요일

Today I Learned

날짜

2024년 1월 7일 화요일

내용

믹스인

CSS에서도 공통된 스타일을 적용할 수 있고, 함수처럼 변수를 넣어 특정 스타일을 가변으로 둘 수도 있다고 한다. 믹스인이라는 건데…

// 정의
.flex-row (@justify: center, @gap: 0) {
  display: flex;
  align-items: center;
  justify-content: @justify;
  gap: @gap;
}

이런식으로 정의하고

// 사용 예시
.naver {
	.flex-row(space-between);
}

이렇게 사용하면 저 naver 태그에는 justify-content: space-between 으로만 바뀌어서 적용된다고 한다. gap 은 입력하지 않아 적용되지 않고… 참 신기하다.

Protected

Angular에서 메서드를 정의할 때, 다른 컴포넌트에서 사용할 것인지 아닌지에 따라 public, private으로 처리해왔다. 나는 private으로 하면 현재 컴포넌트의 템플릿에서는 사용할 수 있을 줄 알았는데 없었다… 그래서 그냥 public으로 설정해버렸는데 새로운 것을 알게 되었다.

  1. 굳이 언급을 안하면 자동으로 public이 된다.
  2. protected는 템플릿에선 호출할 수 없지만, 하위 컴포넌트에선 호출할 수 있다.

라고 한다.

회고

프론트에서 CSS가 제일 어렵다 정말.

CATALOG
    weekly