Sass @mixin, @import, @include

Sass의 '@mixin', '@import', '@include'와 같은 기능들은 스타일 재사용성을 높이고 코드 중복을 줄이기 위해 사용됩니다. 현재 사용하고 계신 방식도 잘 사용하고 계신 것 같습니다. 그러나 다음과 같은 몇 가지 점을 고려해보시면 더 효율적인 코드를 작성하실 수 있습니다. 1. 불필요한 '@mixin' 사용을 줄이기: '@mixin'을 많이 사용하게 되면, 최종 CSS 파일의 용량이 커질 수 있습니다. 따라서 재사용성이 높은 스타일에 대해서만 '@mixin'을 사용하는 것이 좋습니다. 예를 들어, 프로젝트 전반에 걸쳐 자주 사용되는 스타일이나 특정 패턴에 대해서만 '@mixin'을 사용하세요. 2. Sass의 '@import' vs '@use': '@import'는 모든 변수, 함수, 믹스인 등을 가져옵니다. 그러나 '@use'는 모듈 시스템을 제공하며, 가져올 변수나 믹스인을 명시적으로 선언해야 합니다. '@import'는 모든 내용을 전역 범위로 가져오므로 충돌의 가능성이 높으며, 이로 인해 더이상 권장되지 않습니다. 따라서 '@use'를 사용하는 것이 더 좋습니다. 예를 들어, 다음과 같이 사용할 수 있습니다. 3. 접두어 사용: '@use'와 함께 'as' 키워드를 사용하여 모듈에 접두어를 부여할 수 있습니다. 이렇게 하면 각 모듈의 이름공간이 분리되어, 같은 이름의 변수나 함수가 있어도 충돌 없이 사용할 수 있습니다. 마지막으로, Sass를 사용하면서 효율성과 가독성을 높이려면 네스팅(nesting)을 적절히 사용하고, 변수와 믹스인을 잘 활용하는 것이 중요합니다. 그리고 모든 스타일링이 믹스인으로 이루어져 있지 않아도 괜찮으니, 반복되는 부분만 믹스인으로 관리하고 나머지는 일반 CSS로 작성해도 좋습니다.

1
2
3
4
5
6
@use 'mixin' as m;

.test1 {
  @include m.setText();
  @include m.setDisplay(flex, row, center, center);
}