概覽
開始使用 Master CSS
This section walks you through learning and starting to use Master CSS.
Getting Started
隆重介紹 — Master CSS
The CSS language and framework for rapidly building modern and high-performance websites.
安裝 Master CSS
Master CSS supports multiple installation strategies, giving you the flexibility to tailor your workflow based on project scale or scenario.
Master CSS 語言服務
Enhance the developer experience in code editors or IDEs with syntax highlighting, code completion, and more.
Master CSS 程式碼檢查
An ESLint integration for enforcing team coding styles, making your template markup more organized, and catching syntax errors early.
遷移至 Master CSS
Migrate your CSS technology to Master CSS and learn the differences and benefits.
Syntax Tutorial
樣式宣告
Master CSS covers all native CSS features with a structured syntax and simplifies CSS with smart rules.
狀態選取器
Apply styles based on user interactions, element states, and other states.
條件查詢
Apply styles based on theme modes, print, breakpoints, and other queries.
Customization
配置
Implement your design system using the configuration API.
Creating Components
A guide to creating abstract component styles for your design system.
Customizing At-rules
A guide to adding custom at-rule tokens and aliases.
Customizing Colors
A guide to adding custom color tokens and aliases.
Customizing Fonts
Customizing fonts for your design system.
Customizing Functions
A guide to adding custom functions and aliases.
Customizing Screen Sizes
A guide to adding custom screen sizes for breakpoints, containers, and variables.
Customizing Selectors
A guide to adding custom selector tokens and aliases.
Customizing Syntax Rules
A guide to adding custom syntax rules.
Creating Utilities
A guide to adding custom utility classes.
創建變數
A guide to using variables to implement design tokens.
Fundamentals
編譯模式
Master CSS provides three rendering modes, which you can choose according to project scale and application scenarios to meet your business requirements.
響應式設計
Adapt your user interface to different devices with flexible responsive syntax.
瀏覽器支援
The core engine of Master CSS hardly affects CSS support for browsers.
層疊層
Rely on layers to eliminate style overrides and conflicts.
單一存儲庫
A guide to setting up Master CSS in a modern repository.
重用設計
A guide to reusing styles and code de-duplication.
Production Optimization
Optimizing critical resources
The runtime engine plays a crucial role in the initial display of a page.
最小化 CSS
Reduce on-page CSS output and complexity using Master CSS APIs.
防止無樣式內容閃爍
Improve the page loading experience and ensure seamless rendering of content.
Get ready for the journey
Use documentation
You can embark on an in-depth study of Master CSS without prior CSS expertise. Each document features demonstrations and fundamental usages of the intended functionalities.
The Master CSS helps you lower the threshold for learning CSS.
A few notes on using these documents:
- Get an overview of almost all the documents via the navigation on the left side of the screen, and there are only a few categories.
- On the right side, you'll see a table of contents that makes navigating between page sections easier.
- Click the search box on the left side or use the shortcut Ctrl + K or ⌘ Command + K to search the entire site.
- Every class name in the document can preview the generated CSS rules by hovering.
<div class="hidden@<sm&>md">Try hovering over the class</div>
Try Master CSS online
You can use the official Master CSS Play to edit, preview, view the generated size, and even share your design online.
Join our community
If you have questions about Master CSS, you're always welcome to ask our community on:
- GitHub Discussions: Ask questions and share insights.
- Discord: Join real-time conversations with humans.
- Twitter: Stay updated on Master CSS
We're here to support your Master CSS journey!