완전히 새로운 CSS 언어로 시작하기 —— 마스터 CSS

구문이 강화된 가상 CSS 언어입니다. ~13KB

전체 문서를 보려면 css.master.co을 방문하십시오.

우리의 discussion community 찾아보기 .

저희discord channel와 함께하세요 .

.

이 페이지에서

Features

Why Master CSS

Quick Start

Developer Tools

Inspiration

Related

특징

마스터 CSS의 획기적인 기능에 대한 간략한 개요를 살펴보겠습니다.

🔥 유틸리티/라이브러리 대신 완전히 새로운 CSS 언어.

🔓 class="..."에서 직접 CSS 속성, 함수, 선택기 및 미디어 쿼리를 작성합니다.

🧠 클래스 이름을 기반으로 해당 CSS 규칙을 자동으로 생성합니다.

💖 향상된 CSS 구문을 사용하여 더 적은 코드로 UI를 구축할 수 있습니다.

⚡️ 프로덕션에서 고성능 JIT를 직접 사용합니다. ~13KB

🧬 An enhanced and structured CSS syntax 클래스 이름.

🌈 A forerunner to syntax highlighting 클래스 이름용.

✨ Hybrid Rendering 이를 통해 서버측 HTML에서 CSS를 미리 생성한 다음 클라이언트측에서 JIT를 계속 사용할 수 있습니다.

✨ Group Styles 동일한 선택자와 미디어 쿼리 스타일을 추출하여 짧게 만들 수 있습니다.

✨ Reactive Styles 부모/형제 상태를 기반으로 요소의 스타일을 지정할 수 있습니다.

자세한 내용은 documentation 을 확인하십시오.

CSS를 마스터해야 하는 이유

간단한 소개는 마크업 기반 CSS에 대한 이해를 제공하는 것으로 시작합니다.

😐 전통

<style>
    .home-section {
        background-color: blue;
        padding: 2rem;
        text-align: center;
    }

    .home-section:hover {
        background-color: red;
    }

    @media (min-width: 1024px) {
        .home-section {
            padding: 3rem;
        }
    }
</style>

<section class="home-section">...</section>

🤩 이제 완전히 새로운 CSS 언어로 리팩터링하여 더 쉽게 만드세요. ↓ 86% 코드

<section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>

자세한 내용은 Why Master CSS 설명서를 확인하십시오.

빠른 시작

이것은 빠른 시작 안내서입니다. 빌드 도구 및 프레임워크와 통합하려면 full setup guide을 확인하십시오.

npm install @master/css

import '@master/css';

또는 CDN 사용

<script src="https://cdn.master.co/css"></script>

이제 마스터 CSS로 HTML 스타일링을 시작하세요. 🎉

<h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>

자세한 내용은 Syntax tutorial 설명서를 확인하십시오.

개발자 도구

Master CSS Language Service - 마스터 CSS용 Visual Studio Code 확장입니다. 코드 완성 및 구문 강조를 제공합니다.

영감

우리의 핵심 개념과 디자인 중 일부는 이러한 거대 기업에서 영감을 받았습니다.

언어 - 마스터는 언어이지만 원래 ACSS의 원자 클래스 개념에서 영감을 받았습니다.

가상 CSS - 차이 알고리즘, 가상 모델 등은 Virtual DOM에서 영감을 받았습니다.

관련된

@master/normal.css - 브라우저의 스타일을 표준화합니다. ~1KB

@master/keyframes.css - 간단하고 유용한 CSS 키프레임. ~0.4KB

@master/style-element.react - 조건부 클래스 이름으로 스타일이 지정된 React 요소를 빠르게 생성합니다. ~800B

Press ⭐️ star on GitHub! 마음에 든다면.