一種具增強語法的虛擬 CSS 語言

僅透過 HTML 便可高效建構你的用戶介面和設計系統

<button class="btn ">

快速起手為何是 Master

所有功能包含僅 ~14KB

樣式
選取器
響應斷點
色彩
媒體查詢
函式
配色方案
clothes
texture crew sweater
Designed for on the move
$120.0 USD
size
Get delivery dates
樣式變體

超過 186 種樣式開箱即用。

所有樣式均經過預配置及優化，馬上開始建置任何你想要的設計吧！

<div class="bg:gray-22 p:10 r:10 max-w:350">
    <img class="object:cover w:full square r:5" src="/images/clothes.jpeg" loading="lazy" alt="clothes" />
    <div class="mt:10 p:15">
        <div class="font:24 font:bold capitalize">texture crew sweater</div>
        <div class="font:14 font:gray-66 mt:5">Designed for on the move</div>
        <div class="mt:12 font:semibold">$120.0 USD</div>
        <div class="mt:12 flex gap:8">
            <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
                <div class="bg:white full round">white</div>
            </button>
            <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
                <div class="bg:#999 full round">white</div>
            </button>
            <button class="square w:40 h:40 font:0 round b:1|solid|gray-28 p:3">
                <div class="bg:#333 full round">white</div>
            </button>
        </div>
        <div class="mt:20 font:12 font:semibold letter-spacing:2 font:gray-66 uppercase">size</div>
        <div class="mt:12 flex gap:8">
            <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">XS</button>
            <button class="p:10|15 r:3 font:14 font:semibold bg:gray-28">S</button>
            <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">M</button>
            <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">L</button>
            <button class="p:10|15 r:3 font:14 font:semibold b:1|solid|gray-28">XL</button>
        </div>
        <a class="font:gray-66 font:12 text:underline mt:20 inline-block" href="/">
            Get delivery dates
        </a>
    </div>
</div>
modern effects 1
modern effects 2
modern effects 3
modern effects 4
modern effects 5
現代特效

高級效果就緒，隨即可用。

想快速加上 filter, transform 和 grid 效果嗎？我們提供了像是 scale(2), blur(5) 之類的簡寫值，方便你輕鬆實現進階的 CSS 效果。

<div class="grid-cols:3 gap:10 align-items:center {object:cover;width:full}_img">
    <div class="rotate(-8) aspect:2/3"><img src="/images/modern-effect1.jpeg" width="200" height="300" alt="modern effects 1" quality={1} /></div>
    <div class="translateY(-30) translateY(-140)@sm blur(5) aspect:2/3"><img src="/images/modern-effect2.jpeg" width="200" height="300" alt="modern effects 2" quality={1} /></div>
    <div class="transform:scale(.8)rotate(8) aspect:2/3"><img src="/images/modern-effect3.jpeg" width="200" height="300" alt="modern effects 3" quality={1} /></div>
    <div class="sepia(1) translate(-40,20) mask-image:linear-gradient(black,transparent) aspect:2/3"><img src="/images/modern-effect4.jpeg" width="200" height="300" alt="modern effects 4" quality={1} /></div>
    <div class="blend:lighten grayscale(1) grid-col:2/2|span grid-row:2/2|span mt:-50 mask-image:linear-gradient(black,transparent)"><img src="/images/modern-effect5.jpeg" width="400" height="600" alt="modern effects 5" quality={50} /></div>
</div>
  • avatar
    aron
    3:03 a.m

    Front-end needs a revolution

  • avatar
    joy
    7:38 p.m

    Shilin night market later 🥰 ?

  • avatar
    miles
    5 mins ago

    task done 🙌🏻

  • avatar
    benseage
    3 hours ago

    Easy game easy life

  • avatar
    lola
    11 seconds ago

    Let me write the doc !

狀態和選取器

什麼！竟然可以用選取器。

從沒想過 :hover, :before, ::placeholder, :where() 可以直接在 HTML 中使用？

了解更多關於選取器
<div class="bg:gray-22.active active p:8|20_li p:10|0 r:10 w:full max-w:340@sm">
    <input class="bg:gray-18:focus font:gray-40::placeholder outline:0 font:14 w:calc(100%-1.25rem) mx:10 p:12 lh:1 r:5" placeholder="Search for chats and messages" type="search" />
    <ul class="@shake|1s|infinite>li:first list-style:none mt:10">
        {users.map((user, index) =>
            <li class="bg:gray-28:hover bg:gray-32:active flex gap:12 cursor:pointer" key={index}>
                <div class="rel">
                    <img src={user.url} width="40" height="40" class="round object:cover" alt="avatar" />
                    {index < 2 && <svg class="abs right:1 bottom:1 bg:green-70 outline:2|solid|white outline:gray-22@dark round w:7 h:7" />}
                </div>
                <div>
                    <div class="flex align-items:center">
                        <div class="text:14 font:medium font:gray-88@dark capitalize">{user.name}</div>
                        <div class="font:12 font:fade-54 font:gray-44@dark ml:8">{user.time}</div>
                    </div>
                    <p class="text:13 m:0">{user.message}</p>
                </div>
            </li>
        )}
    </ul>
</div>
最適佈局

響應式設計，無所不在。

預設提供的 十個響應式斷點 @3xs~@4xl 可讓你應用於大多情況和設備。你不僅可以指定像 font:32@>=1234 的任意斷點，甚至連運算子 text:center@>=768&<1024 都支援。

由於響應式斷點可以應用在所有樣式，因此你可以達到最精細的版面佈局。

了解更多關於響應式斷點
/examples/responsive-breakpoints
<h2>Mountain Photos</h2>
<div class="grid-cols:2 grid-cols:3@xs grid-cols:4@sm grid-cols:5@md gap:15 gap:20@sm mt:20">
    <div class="flex grid-col-span:2 grid-row-span:2">
        <img class="r:5" src={`/images/mountain1.jpeg`} width="600" height="300" alt="mountain" quality={50} priority={true} />
    </div>
    {mountains.map((mountain) =>
        <div class="flex" key={mountain}>
            <img class="r:5" src={`/images/${mountain}.jpeg`} width="300" height="150" alt="mountain" quality={50} priority={true} />
        </div>
    )}
</div>
開發體驗

保持懶惰是為了更好的體驗。

更少的程式碼，更少的思考，更少的維護

自動生成

不再需要親自撰寫 CSS 規則，這也代表沒有任何 CSS 檔需要維護。

智慧規則

根據行為及響應式斷點對 CSS 規則進行智慧排序。

單位轉換

依樣式及屬性特徵預設實務常用的單位及轉換。

<head>
    <style id="master-css"></style>
</head>
<body>
    <h1 class="">
        Watch how I speed up the production
    </h1>
    <h2 class="">
        Watch how I sort the breakpoints
    </h2>
    <a class="">
        Watch how I sort the behavior
    </a>
    <p class="">
        Watch how I convert the units
    </p>
</body>
/* Automatically generate CSS rules in <style id="master-css"> */
為什麼我應該使用 Master CSS
Syntax

語法簡短但五臟俱全。

更簡練、更直覺、更敏捷

不被命名束縛

像樂高一樣以零命名成本組合 UI，同時保有了修改時的靈活性。

嚐嚐語法糖

使用速記、語義、首字母縮略、符號甚至群組讓你的程式碼更加精簡。

快轉你的實踐

直接增加 @breakpoint, :selector, 甚至 !important 到後綴便立馬見效。

語意

semantics直接把 CSS 寫在 class，太怪了？

我們的本意不是讓你直接寫 CSS，但你仍可以這樣做。

<a class="display:block font-style:italic aspect:1/1 border-radius:50% width:100% height:100% position:relative visibility:invisible isolation:isolate"></a>

試一試更合理的語意。 ↓ 63% 程式碼

<a class="block italic square round full rel invisible isolate"></a>
查看我們的語法教學
速記

semantics這 class 會不會太長了點？

<a class="animation-name:fade animation-duration:1s animatino-timing-function:ease transition-property:opacity transition-duration:.3s margin-top:1rem margin-bottom:1rem margin-right:2rem margin-left:2.5rem"></a>

嘗試用速記重構。 ↓ 62% 程式碼

<a class="animation:fade|1s|ease transition:opacity|.3s margin:16|32|16|40"></a>

或使用建議的符號和首字母縮略。 ↓ 80% 程式碼

<a class="@fade|1s|ease ~opacity|.3s m:16|32|16|40"></a>
查看我們的語法教學
增強

semantics為何不寫行內樣式就好了？

我想在視口寬度 >=1024px 的時候按鈕大些，然後禁用的時候變淡。

<button style="font-size: .875rem; text-align: center; height: 2.5rem;" disabled>嗚嗚...</button>

行內樣式不能應用選擇器、媒體查詢和諸多 CSS 功能。現在，以最簡潔的語法實踐它們。

<button class="font:14 text:center height:40 height:56@md opacity:.5[disabled]" disabled>耶！</button>
查看我們的語法教學
群組

group feature太酷了，是群組功能！

<ul class="block>li:hover@md p:16>li:hover@md w:full>li:hover@md text:center>li:hover@md font:blue/.5>li:hover@md"></ul>

找出共同之處，然後簡化它。 ↓ 45% 程式碼

<ul class="{block;p:16;w:full;text:center;font:blue/.5}>li:hover@md"></ul>
查看我們的語法教學
自訂

根據你的設計系統進行定制。

時而任意，時而統一

import { Style } from '@master/css';
 
Style.extend('classes', {
    btn: 'px:18 h:40 font:14 font:medium r:4 inline-flex align-items:center',
    container: 'max-w:1280 px:20 px:40@sm mx:auto'
});
<!-- 將他們應用在 HTML 看起來像這樣 -->
<button class="btn bg:blue-60 bg:blue-36:hover">
    Submit
</button> 
 
<div class="container text:center">
    <h2>Customize to your design system.</h2>
</div>
了解更多關於自訂
靈活

從 HTML 及 JS 中喚醒 CSS

更靈活且能做得更多

Aa
<div class="font:teal-70 font:purple-70:hover font:96 font:heavy">Aa</div>

動態地賦值。

動態賦值適用於所有樣式，因此你甚至可以從服務器獲取數據後再進行賦值。

<div className={`font:teal-${size} font:purple-${size}:hover font:96 font:heavy`}>
    Aa
</div>
Aa
<div class="scaleX(-1) ~transform|.3s font:96 font:heavy">Aa</div>

有條件地應用類名。

對於有條件地操縱類名，你可以使用 vanilla JS 或任何你喜歡的框架：

<div className={(flipped ? 'scaleX(-1) ' : '') + '~transform|.3s font:96 font:heavy'}>
    Aa
</div>
效能

混合渲染

你獲得了運行時的靈活性和更快的頁面加載

按需注入

掃描及提取當前頁面的類名，並只生成當頁所需的 CSS。

預編譯與即時

提前生成 CSS 以改進首次繪製的時間，並在瀏覽器端繼續使用 JIT。

CSS 規則共享

透過差異演算法，CSS 規則將不會重複，這將有效地減少輸出大小。

import * as express from 'express';
import { Style, StyleSheet } from '@master/css';
import { render } from '@master/css/render';
// A simple example for express
app.get('/', function(req, res) {
    res.render('index.html', (error, html) => {
        if (err) console.log(err)
        return render(html, { StyleSheet }).html;
    })
})
<!-- User gets pre-rendered HTML on the browser side. -->
<!DOCTYPE html>
<html lang="en">
<head>
    <style id="master-css">...</style>
    <title>Master CSS - A Virtual CSS language with enhanced syntax</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.master.co/css"></script>
</head>
<body>
    <h1 class="block font:48@md p:12">Hello World</h1>
    <a class="bg:blue bg:blue-64:hover">Get Started</a>
    <p class="bg:blue bg:blue-64:hover">Sharing CSS Rules</p>
</body>
</html>
/* <style id="master-css"> */
.block {
    display: block
}
.p\:12 {
    padding: 0.75rem
}
.bg\:blue {
    background-color: #175fe9
}
.bg\:blue-64\:hover:hover {
    background-color: #6599f0
}
@media (min-width:1024px) {
    .font\:48\@md {
        font-size: 3rem
    }
}
了解更多關於混合渲染
IDE

使你的 IDE 比以往更專業

突出顯示類名語法的先驅

程式碼完成

樣式名稱、值、語義和選擇器的智慧建議。

語法突出顯示

突出顯示類名，使它們更易於閱讀和識別。

生成預覽

將鼠標懸停在類名上以查看 CSS 規則的生成。

了解更多關於開發者工具

一個語言。任何地方

透過你最熟悉的框架或建置工具起手

React
Angular
Vue.js
Svelte
Next.js
Nuxt.js
Remix
Laravel
Astro
Ionic
Parcel
Webpack