From 967f141404ee0cef3d8f0809b4712099b71e56b8 Mon Sep 17 00:00:00 2001 From: watonyweng Date: Tue, 20 Jul 2021 17:20:51 +0800 Subject: [PATCH 1/2] docs(cn): translate posts/language.md --- posts/language.md | 88 +++++++++++++++++++++++------------------------ 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/posts/language.md b/posts/language.md index 91f72f6c..d4a0e0c7 100644 --- a/posts/language.md +++ b/posts/language.md @@ -1,6 +1,6 @@ -# Windi Lang Draft +# Windi 语言草案 {#windi-lang-draft} -## **Variables** +## **变量** {#variables} ```css @var width = 1px; @@ -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; @@ -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 */ @@ -52,7 +52,7 @@ } ``` -## **Attributify** +## **属性化** {#attributify} ```css .btn { @@ -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 { @@ -88,7 +88,7 @@ and /* this is multi line comment */ } ``` -## **AutoEscape** +## **自动转义** {#autoescape} ```css /* input */ @@ -101,7 +101,7 @@ and /* this is multi line comment */ } ``` -## **Configuration** +## **配置** {#configuration} ```css /* only works in the scope */ @@ -119,7 +119,7 @@ and /* this is multi line comment */ } ``` -## **Layer** +## **Layer** {#layer} ```css @layer base { @@ -133,7 +133,7 @@ and /* this is multi line comment */ } ``` -## **Important** +## **Important** {#important} ```css /* input */ @@ -150,18 +150,18 @@ 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'; @@ -169,7 +169,7 @@ and /* this is multi line comment */ @var borderValue = `${borderWidth} solid ${borderDark}`; /* template string */ ``` -### **sizes** +### **sizes** {#sizes} ```css @var size = 1rem; @@ -178,7 +178,7 @@ and /* this is multi line comment */ ... ``` -### **colors** +### **colors** {#colors} ```css @var color = #f2ece4; // #f2ece4 @@ -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 = { @@ -210,7 +210,7 @@ colors['primary'] = red; colors['primary']; ``` -### **array** +### **array** {#array} ```css @var colors = [blue, gray, gray-200, 'test,comma']; @@ -221,7 +221,7 @@ colors.push(yellow); colors.pop(yellow); ``` -## **Operators** +## **操作符** {#operators} `+` `-` `*` `/` `**` `==` `!=` `!` `>` `<` `>=` `<=` `and` `or` `not` `=>` `new` `as` `in` `not in` `.` @@ -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() @@ -262,11 +262,11 @@ range() ... -### **Statements** +### **语句** {#statements} -Every statement in windi lang begins with `@`. +在 windi 语言中每条语句都以 `@` 开头。 -#### Function +#### 函数 {#function} ```css @func pow(base, exponent) { @@ -275,7 +275,7 @@ Every statement in windi lang begins with `@`. } ``` -#### Loading +#### 加载模块 {#loading} import javascript module @@ -291,7 +291,7 @@ import javascript module @load defaultExport, * as name from 'module-name'; ``` -#### Importing +#### 导入文件 {#importing} import css files @@ -302,7 +302,7 @@ import css files @import "src/corners.windi" as c; ``` -#### Console +#### 控制台 {#console} ```css @log 4rem + 3px; @@ -311,9 +311,9 @@ import css files @assert 4 in [1, 2, 4]; ``` -#### Logic +#### Logic {#logic} -##### If Statement +##### If 语句 {#if-statement} ```css @var color = 'blue'; @@ -333,7 +333,7 @@ import css files } ``` -##### For Statement +##### For 语句 {#for-statement} ```css @for color in [red, blue, yellow] { @@ -347,7 +347,7 @@ import css files } ``` -##### While Statement +##### While 语句 {#while-statement} ```css @var i = 3; @@ -360,7 +360,7 @@ import css files } ``` -#### With +#### With {#with} ```css @with add(1,2) as c { @@ -369,7 +369,7 @@ import css files } ``` -#### Try +#### Try {#try} ```css @var result; @@ -387,7 +387,7 @@ import css files } ``` -#### JS +#### JS {#js} ```css @js { @@ -405,7 +405,7 @@ import css files ``` -#### Others +#### 其他 {#others} ```css @break; @@ -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 上进行讨论,我们会尽快回复您。 From 9c4aa1a61d32cace288151f59972acb1084a2acc Mon Sep 17 00:00:00 2001 From: watonyweng Date: Tue, 20 Jul 2021 18:55:05 +0800 Subject: [PATCH 2/2] docs(cn): update posts/language.md --- posts/language.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/posts/language.md b/posts/language.md index d4a0e0c7..3976c5fb 100644 --- a/posts/language.md +++ b/posts/language.md @@ -15,7 +15,7 @@ } ``` -> 在草案的第一个版本中,我们考虑使用类似于 sass 的$,例如 $width:1px,但是 sass 使用一个非常不雅观的 `#{}` 操作符,当更改变量时,仍需使用 `$` 符号,最后我们决定启用上面的版本,它的灵感来自 JavaScript 模板字符串。 +> 在草案的第一个版本中,我们考虑使用 sass 中类似的 $,例如 `$width:1px;`,但是 sass 使用一个非常不雅观的 `#{}` 操作符,当更改变量时,仍需使用 `$` 符号,最后我们决定启用上面的版本,它的灵感来自 JavaScript 模板字符串。 ## **别名** {#alias} @@ -239,7 +239,7 @@ colors.pop(yellow); @var other = base + filler; // result is 15% ``` -乘法和除法不允许转换为数字。在大多数情况下,它是没有意义的-一个长度乘以一个长度得到一个区域,css 不支持指定区域。Less 将按原样对数字进行运算,并显式指定单位类型来计算结果。 +乘法和除法不转换为数字。在大多数情况下,它是没有意义的,长度相乘得到区域,css 不支持指定区域。Less 将按原样对数字进行运算,并显式指定计算结果的单位类型。 ```css @var base = 2cm * 3mm; // result is 6cm @@ -264,7 +264,7 @@ range() ### **语句** {#statements} -在 windi 语言中每条语句都以 `@` 开头。 +在 windi 语言中,每条语句都以 `@` 开头。 #### 函数 {#function} @@ -275,9 +275,9 @@ range() } ``` -#### 加载模块 {#loading} +#### 加载 {#loading} -import javascript module +加载 javascript 模块 ```css @load 'module1', 'module2', 'module3'; @@ -291,9 +291,9 @@ import javascript module @load defaultExport, * as name from 'module-name'; ``` -#### 导入文件 {#importing} +#### 导入 {#importing} -import css files +导入 css 文件 ```css @import "typo.css"; @@ -302,7 +302,7 @@ import css files @import "src/corners.windi" as c; ``` -#### 控制台 {#console} +#### Console {#console} ```css @log 4rem + 3px; @@ -311,7 +311,7 @@ import css files @assert 4 in [1, 2, 4]; ``` -#### Logic {#logic} +#### 逻辑 {#logic} ##### If 语句 {#if-statement} @@ -418,8 +418,8 @@ import css files ## **实现** {#implementation} -目前我们把 windi 语言编译成JavaScript并运行它,就像TypeScript一样。稍后我们将拥有一个解释器,并使之成为一个独立的语言。无论如何,我们希望有一种编程语言能与 **JavaScript 和 windi 进行良好的交互**。 windi 的所有包依赖项都将使用TypeScript构建,这意味着您可以直接调用 JavaScript/TypeScript 函数或类。 +目前我们把 windi 语言编译成 JavaScript 并运行它,就像 TypeScript 一样。之后我们将拥有一个解释器,并使之成为一个独立的语言。无论如何,我们希望有一种编程语言能使 **JavaScript 和 windi 进行良好的交互**。 windi 的所有包依赖都将使用TypeScript构建,这意味着您可以直接调用 JavaScript/TypeScript 函数或类。 -另外,关于 css 的构建,我们从第一个版本开始就有了自己的 css 构建引擎,然后我们还实现了嵌套 css, 所以这里不做详细介绍。总之,我相信有了以上的语法, wind 将会越来越完美。 +另外,关于 css 的构建,我们从第一个版本开始就有了自己的 css 构建引擎,然后我们还实现了嵌套 css, 所以这里不做详细介绍。总之,我相信有了上面的语法,wind 将会越来越完美。 目前 wind 语言处于起草阶段,**欢迎提出任何建议**。您可以在 GitHub 上进行讨论,我们会尽快回复您。