Nocturnally Psychologizing Millipede

    @euid/scss-mixins

    0.2.0 • Public • Published

    이듬(E.UID) — SCSS Mixins


    SCSS 믹스인 라이브러리 → 이듬(E.UID) 블렌디드 러닝 학습용


    패키지 설치 (Install)

    @euid/scss-mixins 패키지를 설치하는 방법은 다음의 2가지 중 하나를 선택해 사용할 수 있습니다.

    방법 1. NPM 명령을 사용해 @euid/scss-mixins 패키지 설치 (권장)

    $ npm i @euid/scss-mixins

    방법 2. GitHub yamoo9/scss-mixins 저장소 복제

    $ git clone https://github.com/yamoo9/scss-mixins.git

    패키지 호출 (Import)

    @euid/scss-mixins 패키지를 사용하는 방법은 다음과 같습니다.

    방법 1. 상대 경로 활용

    별도 설정 없이 패키지를 호출해 사용할 경우, 상대 경로 방식으로 @euid/scss-mixins 패키지를 찾습니다.

    @import '../node_modules/@euid/scss-mixins';

    방법 2. 임포트 경로(load path) 설정 (권장)

    Dart Sass CLI 명령을 사용해 node_modules 디렉토리의 패키지를 불러올 수 있도록 설정합니다.

    $ sass -I node_modules src/sass:dist/css

    컴파일 명령을 실행할 때, 전달하는 -I--load-path 옵션의 단축 옵션입니다.
    단축 옵션을 사용하지 않을 경우 다음과 같이 명령문을 작성해 실행할 수 있습니다.

    # -I, --load-path=
    $ sass --load-path=node_modules src/sass:dist/css

    패키지에서 모든 믹스인을 가져와 사용하려면 다음과 같이 호출 코드를 작성합니다.

    @import '@euid/scss-mixins';

    패키지 문서 (Documentation)

    @euid/scss-mixins 문서를 통해 사용법을 확인하고 익힐 수 있습니다.


    VS Code 확장(Extension)

    @euid/scss-mixins 스니펫(Snippets) 확장을 설치하면 믹스인 라이브러리 코드 호출이 손쉽습니다.

    확장 설치

    보기(View) → 확장(Extensions)을 선택, euid 키워드를 검색해 VS Code 마켓 플레이스에 배포된 확장을 설치합니다.



    릴리즈 노트

    0.1.2 (2021-01-15)

    [개선]

    • 리스트 모듈 함수 → 글로벌 리스트 함수로 변경
    • 믹스인 버그 해결 및 사용성 개선 → space(), s(), sx(), sy()

    [추가]

    0.2.0 (2021-01-09)

    [개선]

    • 플렉스박스 믹스인 버그 해결 → flex-container-append() : str-replace() 함수 호출(오타)
    • text-ellipsis() 믹스인 → 단위 없는 값 처리 가능하도록 개선

    [추가]

    • 공간(space) 믹스인 추가
    • 리스트 유틸리티 함수 추가
      • copy-list()
      • merge-list()

    0.1.0 (2021-01-07)

    [개선]

    • 포커스 비저블(focus-visible()) 믹스인 대체 색상(alt-color()) 설정
    • flex-item() 믹스인 단축 전달 인자(g | s | b | o) 지원 설정
    • 디스플레이(Display) 모듈 구조 개선 (order() 믹스인 포함)
    • 박스 정렬(Box Alignment) 모듈 구조 개선
    • CSS 그리드(Grid) 모듈 구조 개선

    [추가]

    • 문자 유틸리티 함수 추가
      • str-repeat()
      • str-to-num()
      • str-extract-count-keyword()

    0.0.10~11 (2021-01-05)

    [개선]

    • 포커스 비저블(focus-visible()) 모듈 개선
    • 이니셜라이즈(initialize()) 모듈 개선

    [추가]

    • 인터페이스 모듈 → scrollbar() 믹스인 추가
    • 컬러(Color) 유틸리티 함수 추가
      • a11y-color()
      • light-or-dark()
      • color-contrast()
      • most-legible-color()

    0.0.9 (2021-01-02)

    [개선]

    • 믹스인 라이브러리에 기본 환경 구성 포함(embed) 설정
    • unitless-px() → 0 값은 단위가 안 붙도록 개선
    • 포지션(Position) 믹스인 구조 개선

    [추가]

    • 디스플레이(Display) 모듈 추가
    • 이니셜라이즈(Initialize) 모듈 추가
    • 반응형 웹(Responsive Web) 모듈 추가
    • 상속(Inheritance) 모듈 추가

    0.0.8 (2020-12-31)

    [개선]

    • 간격(Spacing) 믹스인 구조 개선

    [추가]

    • 유틸리티 함수 추가
      • unitless-px()
      • get-number-or-string()
      • get-match-value-of-keys()

    0.0.7 (2020-12-30)

    [개선]

    • 텍스트 믹스인 개선
    • 폰트 믹스인 개선

    [추가]

    • 유틸리티 함수 추가
      • str-replace()

    0.0.6 (2020-12-29)

    [개선]

    • 플렉스박스(Flexbox) 믹스인 구조 개선
    • CSS 그리드(Grid) 믹스인 구조 개선
    • 포지션(Position) 믹스인 구조 개선
    • 인터페이스(UI) 믹스인 구조 개선

    [추가]

    • 폼(Form) 믹스인 추가
    • 박스 정렬(Box Alignment) 믹스인 추가
    • 인터페이스(UI) 믹스인 추가
      • appearance()
    • 유틸리티 함수 추가
      • get-value-after-key()
      • is-include-items()
      • has-color()
      • alt-color()

    0.0.5 (2020-12-25)

    [개선]

    • 유틸리티 네이밍 가이드 변경 (kebab-case)
    • 믹스인 이름 변경
    • flex-container-variant() → flex-container-append()
    • grid-variant() → grid-append()

    [추가]

    • 가이드 문서 및 문서 이미지 추가
    • 믹스인 추가
    • 폰트(Font)
    • 텍스트(Text)
    • 공통 모듈(Common) → 요소 초기화 믹스인 추가
    • 유틸리티 함수 추가
    • 이징(Easings) 모듈
    • 컬러 → get-color-name()

    0.0.4 (2020-12-22)

    [개선]

    • CSS 그리드(Grid) 모듈 - 사용성 개선
    • 개별 매개변수로 값 설정 가능하도록 개선
    • mx(), my(), px(), py() 2번째 인자 설정 가능하도록 개선

    [추가]

    • 공통(Common) 모듈 - box-sizing() 믹스인 추가
    • 접근성(A11Y) 모듈
      • a11y-hidden()
      • focus-visible()

    0.0.1~0.0.3 (2020-12-21)

    [추가]

    • @euid/scss-mixins 패키지 추가 및 개선 작업 진행

    알려진 문제

    지금까지 알려진 문제가 없습니다.


    제작자

    @yamoo9

    Install

    npm i @euid/scss-mixins

    DownloadsWeekly Downloads

    9

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    212 kB

    Total Files

    94

    Last publish

    Collaborators

    • yamoo9