Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(cn): translate utilities/variants.md #79

Merged
merged 3 commits into from
Aug 29, 2021
Merged

docs(cn): translate utilities/variants.md #79

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8e404a7
docs(cn): translate utilities/variants.md
watonyweng Aug 23, 2021
b965c5a
docs(cn): revert utilities/variants.md
watonyweng Aug 24, 2021
4b9dce9
docs(cn): enhance utilities/variants.md
watonyweng Aug 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 113 additions & 114 deletions utilities/variants.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,52 @@
[pseudo-selector]: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
watonyweng marked this conversation as resolved.
Show resolved Hide resolved
[pseudo-selector]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

# Variants
# 可变修饰 {#variants}

Variants allow you to specify under what circumstances your utilities will be activated.
可变修饰允许你在特定情况下启用你的工具类。

You may use the screen size, system theme, or any [pseudo-selector], such as `:hover`.
你可以使用屏幕大小，系统主题，或者任何伪选择器，比如 `:hover`。

You specify a variant by using the `:` separator, and you can combine them arbitrarily as in:
你可以使用 `:` 操作符指定一个可变修饰，也可以将它们任意组合起来，如下：

```
sm:bg-red-500 sm:hover:bg-green-300 dark:bg-white
```

## Screen Variants
## 屏幕可变修饰 {#screen-variants}

### Mobile First
### 移动设备优先 {#mobile-first}

| Variant | Rule | Description |
| 可变修饰 | 规则 | 描述 |
| :------ | :--- | :---------- |
| sm | @media (min-width: 640px) { ... } | Enable utility when the screen width is greater than 640px |
| md | @media (min-width: 768px) { ... } | Enable utility when the screen width is greater than 768px |
| lg | @media (min-width: 1024px) { ... } | Enable utility when the screen width is greater than 1024px |
| xl | @media (min-width: 1280px) { ... } | Enable utility when the screen width is greater than 1280px |
| 2xl | @media (min-width: 1536px) { ... } | Enable utility when the screen width is greater than 1536px |
| sm | @media (min-width: 640px) { ... } | 屏幕宽度不小于 640px 时启用工具 |
| md | @media (min-width: 768px) { ... } | 屏幕宽度不小于 768px 时启用工具 |
| lg | @media (min-width: 1024px) { ... } | 屏幕宽度不小于 1024px 时启用工具 |
| xl | @media (min-width: 1280px) { ... } | 屏幕宽度不小于 1280px 时启用工具 |
| 2xl | @media (min-width: 1536px) { ... } | 屏幕宽度不小于 1536px 时启用工具 |

### Desktop First
### 桌面设备优先 {#desktop-first}

| Variant | Rule | Description |
| 可变修饰 | 规则 | 描述 |
| :------ | :--- | :---------- |
| <sm | @media (max-width: 640px) { ... } | Enable utility when the screen width is less than 640px |
| <md | @media (max-width: 768px) { ... } | Enable utility when the screen width is less than 768px |
| <lg | @media (max-width: 1024px) { ... } | Enable utility when the screen width is less than 1024px |
| <xl | @media (max-width: 1280px) { ... } | Enable utility when the screen width is less than 1280px |
| <2xl | @media (max-width: 1536px) { ... } | Enable utility when the screen width is less than 1536px |
| <sm | @media (max-width: 640px) { ... } | 屏幕宽度不大于 640px 时启用工具 |
| <md | @media (max-width: 768px) { ... } | 屏幕宽度不大于 768px 时启用工具 |
| <lg | @media (max-width: 1024px) { ... } | 屏幕宽度不大于 1024px 时启用工具 |
| <xl | @media (max-width: 1280px) { ... } | 屏幕宽度不大于 1280px 时启用工具 |
| <2xl | @media (max-width: 1536px) { ... } | 屏幕宽度不大于 1536px 时启用工具 |

### Only Screen
### 屏幕适用 {#only-screen}

| Variant | Rule | Description |
| 可变修饰 | 规则 | 描述 |
| :------ | :--- | :---------- |
| @sm | @media (min-width: 640px) and (max-width: 768px) { ... } | Enable utility when the screen width is greater than 640px and less than 768px |
| @md | @media (min-width: 768px) and (max-width: 1024px) { ... } | Enable utility when the screen width is greater than 768px and less than 1024px |
| @lg | @media (min-width: 1024px) and (max-width: 1280px) { ... } | Enable utility when the screen width is greater than 1024px and less than 1280px |
| @xl | @media (min-width: 1280px) and (max-width: 1536px) { ... } | Enable utility when the screen width is greater than 1280px and less than 1536px |
| @2xl | @media (min-width: 1536px) { ... } | Enable utility when the screen width is greater than 1536px |
| @sm | @media (min-width: 640px) and (max-width: 768px) { ... } | 屏幕宽度大于 640px 并且小于 768px 时启用工具 |
| @md | @media (min-width: 768px) and (max-width: 1024px) { ... } | 屏幕宽度大于 768px 并且小于 1024px 时启用工具 |
| @lg | @media (min-width: 1024px) and (max-width: 1280px) { ... } | 屏幕宽度大于 1024px 并且小于 1280px 时启用工具 |
| @xl | @media (min-width: 1280px) and (max-width: 1536px) { ... } | 屏幕宽度大于 1280px 并且小于 1536px 时启用工具 |
| @2xl | @media (min-width: 1536px) { ... } | 屏幕宽度不小于 1536px 时启用工具 |

### Max-Width Breakpoints
### 最大宽度断点 {#max-width-breakpoints}

You can define custom breakpoints that use `max-width` instead, or ranges, by
using the following configuration options:
你可以使用 `max-width` 或者范围来自定义断点，配置项如下：

```ts
export default {
Expand All @@ -60,9 +59,9 @@ export default {
}
```

### Raw Media Queries
### 原生媒体查询 {#raw-media-queries}

You can define a custom screen by providing a raw media query in the config:
你可以在配置文件中通过提供的原生媒体查询来自定义屏幕：

```ts
export default {
Expand All @@ -75,111 +74,111 @@ export default {
}
```

For example, you could then use `print:hidden` to hide elements when styling for print.
比如，你可以使用 `print:hidden` 来隐藏要打印的元素。

## State Variants
## 状态可变修饰 {#state-variants}

### Pseudo Classes
### 伪类 {#pseudo-classes}

| Variant | Rule | Description |
| 可变修饰 | 规则 | 描述 |
| :------ | :--- | :---------- |
| first | `.${utility}:first { ... }` | Targets the first-child pseudo-class. |
| last | `.${utility}:last { ... }` | Targets the last-child pseudo-class. |
| odd | `.${utility}:odd { ... }` | Targets the odd-child pseudo-class. |
| even | `.${utility}:even { ... }` | Targets the even-child pseudo-class. |
| visited | `.${utility}:visited { ... }` | Targets the visited pseudo-class. |
| checked | `.${utility}:checked { ... }` | Targets the checked pseudo-class. |
| focus-within | `.${utility}:focus-within { ... }` | Targets the focus-within pseudo-class. |
| hover | `.${utility}:hover { ... }` | Targets the hover pseudo-class. |
| focus | `.${utility}:focus { ... }` | Targets the focus pseudo-class. |
| focus-visible | `.${utility}:focus-visible { ... }` | Targets the focus-visible pseudo-class. |
| active | `.${utility}:active { ... }` | Targets the active pseudo-class. |
| link | `.${utility}:link { ... }` | Targets the link pseudo-class. |
| target | `.${utility}:target { ... }` | Targets the target pseudo-class. |
| not-checked | `.${utility}:not(:checked) { ... }` | Targets the :not(:checked) pseudo-class. |
| default | `.${utility}:default { ... }` | Targets the default pseudo-class. |
| enabled | `.${utility}:enabled { ... }` | Targets the enabled pseudo-class. |
| indeterminate | `.${utility}:indeterminate { ... }` | Targets the indeterminate pseudo-class. |
| invalid | `.${utility}:invalid { ... }` | Targets the invalid pseudo-class. |
| valid | `.${utility}:valid { ... }` | Targets the valid pseudo-class. |
| optional | `.${utility}:optional { ... }` | Targets the optional pseudo-class. |
| required | `.${utility}:required { ... }` | Targets the required pseudo-class. |
| placeholder-shown | `.${utility}:placeholder-shown { ... }` | Targets the placeholder-shown pseudo-class. |
| read-only | `.${utility}:read-only { ... }` | Targets the read-only pseudo-class. |
| read-write | `.${utility}:read-write { ... }` | Targets the read-write pseudo-class. |
| not-disabled | `.${utility}:not(:disabled) { ... }` | Targets the :not(:disabled) pseudo-class. |
| first-of-type | `.${utility}:first-of-type { ... }` | Targets the first-of-type pseudo-class. |
| not-first-of-type | `.${utility}:not(:first-of-type) { ... }` | Targets the :not(:first-of-type) pseudo-class. |
| last-of-type | `.${utility}:last-of-type { ... }` | Targets the last-of-type pseudo-class. |
| not-last-of-type | `.${utility}:not(:last-of-type) { ... }` | Targets the :not(:last-of-type) pseudo-class. |
| not-first | `.${utility}:not(:first-child) { ... }` | Targets the not(:first-child) pseudo-class. |
| not-last | `.${utility}:not(:last-child) { ... }` | Targets the not(:last-child) pseudo-class. |
| only-child | `.${utility}:only-child { ... }` | Targets the only-child pseudo-class. |
| not-only-child | `.${utility}:not(:only-child) { ... }` | Targets the not(:only-child) pseudo-class. |
| only-of-type | `.${utility}:only-of-type { ... }` | Targets the only-of-type pseudo-class. |
| not-only-of-type | `.${utility}:not(:only-of-type) { ... }` | Targets the not(:only-of-type) pseudo-class. |
| even-of-type | `.${utility}:nth-of-type(even) { ... }` | Targets the nth-of-type(even) pseudo-class. |
| odd-of-type | `.${utility}:nth-of-type(odd) { ... }` | Targets the nth-of-type(odd) pseudo-class. |
| root | `.${utility}:root { ... }` | Targets the root pseudo-class. |
| empty | `.${utility}:empty { ... }` | Targets the empty pseudo-class. |

### Pseudo Elements

| Variant | Rule | Description |
| first | `.${utility}:first { ... }` | 第一个伪元素的目标元素。|
| last | `.${utility}:last { ... }` | 最后一个伪元素的目标元素。|
| odd | `.${utility}:odd { ... }` | 奇数伪元素的目标元素。|
| even | `.${utility}:even { ... }` | 偶数伪元素的目标元素。|
| visited | `.${utility}:visited { ... }` | 已访问伪元素的目标元素。|
| checked | `.${utility}:checked { ... }` | 已选中伪元素的目标元素。|
| focus-within | `.${utility}:focus-within { ... }` | 焦点伪元素的目标元素。|
| hover | `.${utility}:hover { ... }` | 悬停伪元素的目标元素。|
| focus | `.${utility}:focus { ... }` | 焦点伪元素的目标元素。|
| focus-visible | `.${utility}:focus-visible { ... }` | 焦点可见伪元素的目标元素。|
| active | `.${utility}:active { ... }` | 可激活伪元素的目标元素。|
| link | `.${utility}:link { ... }` | 可链接伪元素的目标元素。|
| target | `.${utility}:target { ... }` | 伪元素的目标元素。|
| not-checked | `.${utility}:not(:checked) { ... }` | 未选中伪元素的目标元素。|
| default | `.${utility}:default { ... }` | 默认伪元素的目标元素。|
| enabled | `.${utility}:enabled { ... }` | 启用伪元素的目标元素。|
| indeterminate | `.${utility}:indeterminate { ... }` | 模糊伪元素的目标元素。|
| invalid | `.${utility}:invalid { ... }` | 无效伪元素的目标元素。|
| valid | `.${utility}:valid { ... }` | 有效伪元素的目标元素。|
| optional | `.${utility}:optional { ... }` | 可选伪元素的目标元素。|
| required | `.${utility}:required { ... }` | 必填伪元素的目标元素。|
| placeholder-shown | `.${utility}:placeholder-shown { ... }` | 占位符伪元素的目标元素。|
| read-only | `.${utility}:read-only { ... }` | 只读伪元素的目标元素。|
| read-write | `.${utility}:read-write { ... }` | 读写伪元素的目标元素。|
| not-disabled | `.${utility}:not(:disabled) { ... }` | 不禁用伪元素的目标元素。|
| first-of-type | `.${utility}:first-of-type { ... }` | 特定类型的第一个子伪元素的目标元素。|
| not-first-of-type | `.${utility}:not(:first-of-type) { ... }` | 特定类型的非第一个子伪元素的目标元素。|
| last-of-type | `.${utility}:last-of-type { ... }` | 特定类型的最后一个子伪元素的目标元素。|
| not-last-of-type | `.${utility}:not(:last-of-type) { ... }` | 特定类型的非最后一个子伪元素的目标元素。|
| not-first | `.${utility}:not(:first-child) { ... }` | 非第一个伪子元素的目标元素。|
| not-last | `.${utility}:not(:last-child) { ... }` | 非最后一个伪元素的目标元素。|
| only-child | `.${utility}:only-child { ... }` | 只有伪子元素的目标元素。|
| not-only-child | `.${utility}:not(:only-child) { ... }` | 不只有伪子元素的目标元素。|
| only-of-type | `.${utility}:only-of-type { ... }` | 只有特定类型的伪元素的目标元素。|
| not-only-of-type | `.${utility}:not(:only-of-type) { ... }` | 只有非特定类型的伪元素的目标元素。|
| even-of-type | `.${utility}:nth-of-type(even) { ... }` | 特定类型的奇数伪元素的目标元素。|
| odd-of-type | `.${utility}:nth-of-type(odd) { ... }` | 特定类型的偶数伪元素的目标元素。|
| root | `.${utility}:root { ... }` | 根伪元素的目标元素。|
| empty | `.${utility}:empty { ... }` | 空伪元素的目标元素。|

### 伪元素 {#pseudo-elements}

| 可变修饰 | 规则 | 描述 |
| :------ | :--- | :---------- |
| before | `.{utility}::before { ... }` | Targets the before pseudo-element. |
| after | `.{utility}::after { ... }` | Targets the after pseudo-element. |
| first-letter | `.{utility}::first-letter { ... }` | Targets the first-letter pseudo-element. |
| first-line | `.{utility}::first-line { ... }` | Targets the first-line pseudo-element. |
| selection | `.{utility}::selection { ... }` | Targets the selection pseudo-element. |
| before | `.{utility}::before { ... }` | before 伪元素的目标元素。|
| after | `.{utility}::after { ... }` | after 伪元素的目标元素。|
| first-letter | `.{utility}::first-letter { ... }` | 首字母伪元素的目标元素。|
| first-line | `.{utility}::first-line { ... }` | 首行伪元素的目标元素。 |
| selection | `.{utility}::selection { ... }` | 选择伪元素的目标元素。 |

### Parent Selectors
### 父选择器 {#pseudo-selectors}

| Variant | Rule | Description |
| 可变修饰 | 规则 | 描述 |
| :------ | :--- | :---------- |
| group-hover | `.group:hover .${utility} { ... }` | Targets an element when a marked parent matches the hover pseudo-class. |
| group-focus | `.group:focus .${utility} { ... }` | Targets an element when a marked parent matches the focus pseudo-class. |
| group-active | `.group:active .${utility} { ... }` | Targets an element when a marked parent matches the active pseudo-class. |
| group-visited | `.group:visited .${utility} { ... }` | Targets an element when a marked parent matches the visited pseudo-class. |
| group-hover | `.group:hover .${utility} { ... }` | 当标记的父类与悬停伪类匹配时的目标元素。|
| group-focus | `.group:focus .${utility} { ... }` | 当标记的父类与焦点伪类匹配时的目标元素。 |
| group-active | `.group:active .${utility} { ... }` | 当标记的父类与激活伪类匹配时的目标元素。|
| group-visited | `.group:visited .${utility} { ... }` | 当标记的父类与已访问伪类匹配时的目标元素。 |


### Child Selectors
### 子选择器 {#pseudo-selectors}

| Variant | Rule | Description |
| 可变修饰 | 规则 | 描述 |
| :------ | :--- | :---------- |
| svg | `.${utility} svg { ... }` | Targets svg nodes. |
| all | `.${utility} * { ... }` | Targets all nodes. |
| children | `.${utility} > * { ... }` | Targets children nodes. |
| siblings | `.${utility} ~ * { ... }` | Targets siblings nodes . |
| sibling | `.${utility} + * { ... }` | Targets first sibling node. |
| svg | `.${utility} svg { ... }` | svg 目标节点。 |
| all | `.${utility} * { ... }` | 所有目标节点。 |
| children | `.${utility} > * { ... }` | 目标子节点。 |
| siblings | `.${utility} ~ * { ... }` | 目标兄弟节点。 |
| sibling | `.${utility} + * { ... }` | 目标首个兄弟节点。 |


### Media Query
### 媒体查询 {#media-query}

| Variant | Rule | Description |
| 可变修饰 | 规则 | 描述 |
| :------ | :--- | :---------- |
| motion-safe | `@media (prefers-reduced-motion: no-preference) { ... }` | Targets the prefers-reduced-motion: no-preference media query.
| motion-reduce | `@media (prefers-reduced-motion: reduce) { ... }` | Targets the prefers-reduced-motion: reduce media query.
| motion-safe | `@media (prefers-reduced-motion: no-preference) { ... }` | 基于 prefers-reduced-motion: no-preference 的媒体查询目标。 |
| motion-reduce | `@media (prefers-reduced-motion: reduce) { ... }` | 基于 prefers-reduced-motion: reduce 的媒体查询目标。|

## Theme Variants
## 主题可变修饰 {#pseudo-selectors}

### Default
### 默认值 {#default}

| Variant | Rule | Description |
| 可变修饰 | 规则 | 描述 |
| :------ | :--- | :---------- |
| dark | `@media (prefers-color-scheme: dark) { ... }` or `.dark .{utility} { ... }` | Enable utility base on user configuration |
| light | `@media (prefers-color-scheme: light) { ... }` or `.light .{utility} { ... }` | Enable utility base on user configuration |
| dark | `@media (prefers-color-scheme: dark) { ... }` or `.dark .{utility} { ... }` | 用户自定义配置以启用工具 |
| light | `@media (prefers-color-scheme: light) { ... }` or `.light .{utility} { ... }` | 用户自定义配置以启用工具 |

### Following System
### 跟随系统 {#following-system}

| Variant | Rule | Description |
| 可变修饰 | 规则 | 描述 |
| :------ | :--- | :---------- |
| @dark | `@media (prefers-color-scheme: dark) { ... }` | Enable utility when the system turns on dark mode |
| @light | `@media (prefers-color-scheme: light) { ... }` | Enable utility when the system turns on light mode |
| @dark | `@media (prefers-color-scheme: dark) { ... }` | 打开亮色模式启用工具 |
| @light | `@media (prefers-color-scheme: light) { ... }` | 打开暗色模式启用工具 |

### Following Application
### 跟随应用程序 {#following-application}

| Variant | Rule | Description |
| 可变修饰 | 规则 | 描述 |
| :------ | :--- | :---------- |
| .dark | `.dark .{utility} { ... }` | Enable utility base on application dark mode |
| .light | `.light .{utility} { ... }` | Enable utility base on application light mode |
| .dark | `.dark .{utility} { ... }` | 基于亮色模式下启用工具 |
| .light | `.light .{utility} { ... }` | 基于暗色模式下启用工具 |