Skip to content

Commit

Permalink
docs(cn): translate utilities/variants.md (#79)
Browse files Browse the repository at this point in the history 
* docs(cn): translate utilities/variants.md

* docs(cn): revert utilities/variants.md

* docs(cn): enhance utilities/variants.md
  • Loading branch information
@watonyweng
watonyweng authored Aug 29, 2021
1 parent f559781 commit 14e0c34
Showing 1 changed file with 113 additions and 114 deletions.
227 changes: 113 additions & 114 deletions utilities/variants.md
View file
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
[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} { ... }` | 基于暗色模式下启用工具 |

0 comments on commit 14e0c34

Please sign in to comment.