Skip to content

docs(cn): features/value-auto-infer translation #28

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

Merged
merged 3 commits into from
Jun 9, 2021
Merged

docs(cn): features/value-auto-infer translation #28

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c47f1bd
docs(cn): features/value-auto-infer translation
HerbertHe May 29, 2021
2209a03
docs(cn): update features/value-auto-infer
HerbertHe May 31, 2021
349bf7d
Update features/value-auto-infer.md
HerbertHe Jun 8, 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
44 changes: 22 additions & 22 deletions features/value-auto-infer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Value Auto-infer
# 自动值推导 {#value-auto-infer}

Since Windi CSS will only generate the CSS utilities you use, it enables the possibility to use arbitrary value in your classes and generate coresponding styles based on the appropriate semantics.
Windi CSS 只会生成你使用的 CSS 工具类，它允许你在样式类中编写任意值，同时会根据适当的语义生成相应的样式。

```html
<!-- sizes and positions -->
<!-- 尺寸和定位 -->
<div class="p-5px mt-[0.3px]"></div>

<!-- colors -->
<!-- 颜色 -->
<button class="bg-hex-b2a8bb"></button>
<button class="bg-[#b2a8bb]"></button>
<button class="bg-[hsl(211.7,81.9%,69.6%)]"></button>
Expand All @@ -15,29 +15,29 @@ Since Windi CSS will only generate the CSS utilities you use, it enables the pos
<div class="grid-cols-[auto,1fr,30px]"></div>
```

This is useful when you want to opt-out your design system and have some fine-grain controls over some specific components. Both direct `p-5px` and explicitly escaping `p-[5px]` are supported.
当你想有意忽略你的设计系统，并且对特定的组件有一定的粒度控制时，这是非常有用的。直接的 `p-5px` 和 显示转义的 `p-[5px]` 都是被支持的。

We also provided [an visual analyser](/features/analyzer) to give you an overview of all the utilities usages in your project and spot unwanted value escaping of your design system with ease.
我们提供了一个 [可视化分析器](/features/analyzer)，可以让你对你项目中所有工具类的使用情况有一个概览，轻松标记出你设计系统中不符合预期的值转义。

## Numbers
## 数字 {#numbers}

```less
p-{float} -> padding: {float/4}rem;
```

<InlinePlayground :input="'p-2.5\np-3.2'" :showCSS="true" :showPreview="false"/>

## Sizes
## 尺寸 {#sizes}

```less
// {size} should be end with rem|em|px|vh|vw|ch|ex
// {size} 应当以 rem|em|px|vh|vw|ch|ex 结尾
p-{size} -> padding: {size};
```

<InlinePlayground :input="'p-3px\np-4rem'" :showCSS="true" :showPreview="false"/>


## Fractions
## 分数 {#fractions}

```less
w-{fraction} -> width: {fraction -> precent};
Expand All @@ -46,32 +46,32 @@ w-{fraction} -> width: {fraction -> precent};
<InlinePlayground :input="'w-9/12'" :showCSS="true" :showPreview="false"/>


## Colors
## 颜色 {#colors}

```css
text-{color} -> color: rgba(...);

border-hex-{hex} -> border-color: rgba(...);
```

<InlinePlayground
:input="'text-cyan-400\nborder-hex-6dd1c7'"
:showCSS="true"
<InlinePlayground
:input="'text-cyan-400\nborder-hex-6dd1c7'"
:showCSS="true"
:showPreview="false"
fixed="border border-2 px-4 py-2 rounded"
/>

## Variables
## 变量 {#variables}

You can even pass variable names, which is very useful in combination with css variables.
你甚至可以传递变量名称，在与 css 变量结合时非常有用。

```css
bg-${variableName}
```

<InlinePlayground
:input="'bg-$test-variable'"
:showCSS="true"
<InlinePlayground
:input="'bg-$test-variable'"
:showCSS="true"
:showPreview="false"
/>

Expand All @@ -81,8 +81,8 @@ bg-${variableName}
grid-cols-[auto,1fr,30px]
```

<InlinePlayground
:input="'grid-cols-[auto,1fr,30px]'"
:showCSS="true"
<InlinePlayground
:input="'grid-cols-[auto,1fr,30px]'"
:showCSS="true"
:showPreview="false"
/>