Less 포맷터
이 Less Formatter로 Less 스타일시트의 서식을 지정하세요. Less 코드를 붙여넣으면 도구가 변수, 중첩 규칙, 매개변수가 있는 믹스인, 믹스인 호출, 가드, 함수 및 미디어 쿼리를 두 칸 들여쓰기와 선언당 한 줄 형식으로 정리하고, 콜론과 쉼표 뒤의 간격을 일관되게 맞춥니다. 믹스인 매개변수의 기본값은 간결하게 유지되므로 프런트엔드 개발자는 컴파일러를 실행하지 않고도 읽기 쉬운 Less 코드를 얻을 수 있습니다.
자주 묻는 질문
Less Formatter는 어떻게 작동하나요?
중괄호, 세미콜론, 콜론, 문자열, 주석 등의 토큰으로 스타일시트를 읽고 이를 바탕으로 레이아웃을 다시 구성합니다. 여는 중괄호마다 두 칸 들여쓴 블록이 시작되고, 각 선언은 별도의 줄에 표시됩니다.
변수는 어떻게 서식을 지정하나요?
@color: #333; 같은 변수 선언에는 콜론 뒤에 공백을 넣고 세미콜론으로 끝냅니다. 값 안의 변수 참조는 작성된 그대로 유지합니다.
매개변수가 있는 믹스인은 어떻게 처리하나요?
믹스인 매개변수 괄호 안에서는 콜론이 붙어 있으므로 .mixin(@size:10px)의 기본값이 간결하게 유지됩니다. 인수 사이의 쉼표 뒤에는 공백 하나를 넣습니다.
믹스인 호출은 각각 별도의 줄에 유지되나요?
예, .mixin(5px); 또는 .bordered; 같은 호출은 세미콜론으로 끝나며 규칙 안의 별도 줄에 표시됩니다. 중첩 선택자와 &:hover 규칙은 한 단계 더 들여씁니다.
함수와 연산자는 변경되나요?
darken(@color, 10%) 같은 함수에서는 쉼표 뒤에 공백을 넣고, 더하기 기호 양쪽에도 공백을 둡니다. 따라서 1px+2px는 1px + 2px가 됩니다. when (@a > 0) 같은 가드는 선택자 줄에 유지됩니다.
도구가 Less를 컴파일하거나 검사하나요?
아니요, CSS로 컴파일하거나 구문을 검사하지 않으므로 완성되지 않은 코드 조각도 서식을 지정합니다. 오류를 찾고 CSS를 생성하려면 Less 컴파일러를 사용하세요.
주석이 보존되나요?
네, // 줄 주석은 유지되며 해당 줄에서 끝나므로 다음 코드는 그 아래에서 시작합니다. 블록 주석도 원래 위치에 유지됩니다.
들여쓰기를 조정할 수 있나요?
아니요. 포매터는 항상 공백 두 칸을 사용하며 설정을 제공하지 않습니다. 따라서 같은 스타일시트는 항상 같은 결과를 만듭니다.
출력에 less 코드 펜스가 붙는 이유는 무엇인가요?
결과는 Markdown less로 표시된 코드 블록으로 반환되며, Markdown에서 구문 강조가 적용됩니다. .less 파일에 사용할 코드는 펜스 사이의 줄을 복사하세요.
스타일시트 크기는 얼마나 클 수 있나요?
실행당 최대 5 MB이며, 더 큰 입력은 메시지와 함께 거부됩니다. 출력은 Code Formatter의 Less 옵션과 동일합니다.