Skip to content

Commit

Permalink
docs(cn): translate posts/language.md (#72)
Browse files Browse the repository at this point in the history 
docs(cn): translate posts/language.md
  • Loading branch information
@HerbertHe
HerbertHe committed Jul 21, 2021
2 parents d15ec85 + 9c4aa1a commit 0cab83c
Showing 1 changed file with 46 additions and 46 deletions.
92 changes: 46 additions & 46 deletions posts/language.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Windi Lang Draft
# Windi 语言草案 {#windi-lang-draft}

## **Variables**
## **变量** {#variables}

```css
@var width = 1px;
Expand All @@ -15,9 +15,9 @@
}
```

> In draft v1, we thought about using $ similar to sass. such as `$width: 1px;`, But sass still has a very inelegant `#{}` operator, and when change variable, still need to call with `$` symbol. So finally we decided to enable the above version, inspired by JavaScript template strings.
> 在草案的第一个版本中，我们考虑使用 sass 中类似的 $，例如 `$width:1px;`，但是 sass 使用一个非常不雅观的 `#{}` 操作符，当更改变量时，仍需使用 `$` 符号，最后我们决定启用上面的版本，它的灵感来自 JavaScript 模板字符串。

## **Alias**
## **别名** {#alias}

```css
*btn: py-2 px-4 font-semibold rounded-lg;
Expand All @@ -30,14 +30,14 @@
}
```

## **Shortcuts**
## **Shortcuts** {#shortcuts}

```css
.btn: py-2 px-4 font-semibold rounded-lg;
.btn-green: btn text-white bg-green-500 hover:bg-green-700;
```

## **Apply**
## **Apply** {#apply}

```css
/* support omit @apply, when only using utilities */
Expand All @@ -52,7 +52,7 @@
}
```

## **Attributify**
## **属性化** {#attributify}

```css
.btn {
Expand All @@ -62,14 +62,14 @@
@attr[bg] red-500 opacity-30 lg:red-600; /* global attributify */
```

## **Comments**
## **注释** {#comments}

```css
support // this is a single line comment
and /* this is multi line comment */
```

## **Nesting**
## **嵌套** {#nesting}

```css
@screen sm {
Expand All @@ -88,7 +88,7 @@ and /* this is multi line comment */
}
```

## **AutoEscape**
## **自动转义** {#autoescape}

```css
/* input */
Expand All @@ -101,7 +101,7 @@ and /* this is multi line comment */
}
```

## **Configuration**
## **配置** {#configuration}

```css
/* only works in the scope */
Expand All @@ -119,7 +119,7 @@ and /* this is multi line comment */
}
```

## **Layer**
## **Layer** {#layer}

```css
@layer base {
Expand All @@ -133,7 +133,7 @@ and /* this is multi line comment */
}
```

## **Important**
## **Important** {#important}

```css
/* input */
Expand All @@ -150,26 +150,26 @@ and /* this is multi line comment */
}
```

## **Data Types**
## **数据类型** {#data-types}

## **boolean**
## **boolean** {#boolean}

```css
@var open = True;
@var close = False;
@var none = None;
```
> Refer to python, the initial capital letters are easier to identify.
> 参考 python ，首字母大写更容易识别。
### **string**
### **string** {#string}

```css
@var color = 'blue';
@var color = "blue";
@var borderValue = `${borderWidth} solid ${borderDark}`; /* template string */
```

### **sizes**
### **sizes** {#sizes}

```css
@var size = 1rem;
Expand All @@ -178,7 +178,7 @@ and /* this is multi line comment */
...
```

### **colors**
### **colors** {#colors}

```css
@var color = #f2ece4; // #f2ece4
Expand All @@ -190,14 +190,14 @@ and /* this is multi line comment */
@var color = hsla(20, 20%, 85%, 0.7); // rgb(225, 215, 210, 0.7)
```

### **number**
### **number** {#number}

```css
@var width = 2;
@var height = 3.2;
```

### **dictionary**
### **dictionary** {#dictionary}

```css
@var colors = {
Expand All @@ -210,7 +210,7 @@ colors['primary'] = red;
colors['primary'];
```

### **array**
### **array** {#array}

```css
@var colors = [blue, gray, gray-200, 'test,comma'];
Expand All @@ -221,7 +221,7 @@ colors.push(yellow);
colors.pop(yellow);
```

## **Operators**
## **操作符** {#operators}

`+` `-` `*` `/` `**` `==` `!=` `!` `>` `<` `>=` `<=` `and` `or` `not` `=>` `new` `as` `in` `not in` `.`

Expand All @@ -239,20 +239,20 @@ colors.pop(yellow);
@var other = base + filler; // result is 15%
```

Multiplication and division do not convert numbers. It would not be meaningful in most cases - a length multiplied by a length gives an area and css does not support specifying areas. Less will operate on numbers as they are and assign explicitly stated unit type to the result.
乘法和除法不转换为数字。在大多数情况下，它是没有意义的，长度相乘得到区域，css 不支持指定区域。Less 将按原样对数字进行运算，并显式指定计算结果的单位类型。

```css
@var base = 2cm * 3mm; // result is 6cm
```

You can also do arithmetic on colors:
您也可以对颜色进行算术运算：

```css
@var color = #224488 / 2; //results in #112244
@var bg = #112244 + #111; // result is #223355
```

## **Functions**
## **函数** {#functions}

config()

Expand All @@ -262,11 +262,11 @@ range()

...

### **Statements**
### **语句** {#statements}

Every statement in windi lang begins with `@`.
在 windi 语言中，每条语句都以 `@` 开头。

#### Function
#### 函数 {#function}

```css
@func pow(base, exponent) {
Expand All @@ -275,9 +275,9 @@ Every statement in windi lang begins with `@`.
}
```

#### Loading
#### 加载 {#loading}

import javascript module
加载 javascript 模块

```css
@load 'module1', 'module2', 'module3';
Expand All @@ -291,9 +291,9 @@ import javascript module
@load defaultExport, * as name from 'module-name';
```

#### Importing
#### 导入 {#importing}

import css files
导入 css 文件

```css
@import "typo.css";
Expand All @@ -302,7 +302,7 @@ import css files
@import "src/corners.windi" as c;
```

#### Console
#### Console {#console}

```css
@log 4rem + 3px;
Expand All @@ -311,9 +311,9 @@ import css files
@assert 4 in [1, 2, 4];
```

#### Logic
#### 逻辑 {#logic}

##### If Statement
##### If 语句 {#if-statement}

```css
@var color = 'blue';
Expand All @@ -333,7 +333,7 @@ import css files
}
```

##### For Statement
##### For 语句 {#for-statement}

```css
@for color in [red, blue, yellow] {
Expand All @@ -347,7 +347,7 @@ import css files
}
```

##### While Statement
##### While 语句 {#while-statement}

```css
@var i = 3;
Expand All @@ -360,7 +360,7 @@ import css files
}
```

#### With
#### With {#with}

```css
@with add(1,2) as c {
Expand All @@ -369,7 +369,7 @@ import css files
}
```

#### Try
#### Try {#try}

```css
@var result;
Expand All @@ -387,7 +387,7 @@ import css files
}
```

#### JS
#### JS {#js}

```css
@js {
Expand All @@ -405,7 +405,7 @@ import css files
```


#### Others
#### 其他 {#others}

```css
@break;
Expand All @@ -416,10 +416,10 @@ import css files
@del a['key'];
```

## **Implementation**
## **实现** {#implementation}

We currently compile windi lang into JavaScript and run it, just like TypeScript. Later we will also have an interpreter to make it an independent language. In any case, our hope is to have a programming language that **interacts well with JavaScript and windi**. All package dependencies of windi will be built using TypeScript, which means you can call JavaScript/TypeScript functions or classes directly.
目前我们把 windi 语言编译成 JavaScript 并运行它，就像 TypeScript 一样。之后我们将拥有一个解释器，并使之成为一个独立的语言。无论如何，我们希望有一种编程语言能使 **JavaScript 和 windi 进行良好的交互**。 windi 的所有包依赖都将使用TypeScript构建，这意味着您可以直接调用 JavaScript/TypeScript 函数或类。

In addition, regarding the construction of css, we have our own css build engine since the windi v1 version, and then we have also implemented nested css, so I won't go into details here. In short, I believe that with the above grammar, windi will become more perfect.
另外，关于 css 的构建，我们从第一个版本开始就有了自己的 css 构建引擎，然后我们还实现了嵌套 css, 所以这里不做详细介绍。总之，我相信有了上面的语法，wind 将会越来越完美。

For now, we are still in the draft stage, so **any suggestions are welcome**. You can start a discussion in github discussions, and we will reply to you as soon as possible.
目前 wind 语言处于起草阶段，**欢迎提出任何建议**。您可以在 GitHub 上进行讨论，我们会尽快回复您。

0 comments on commit 0cab83c

Please sign in to comment.