CSS 小妙招：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题 #6433

eizyc · 2019-10-13T06:38:59Z

第一次翻译完成

译文翻译完成，resolve #6424

第一次翻译完成

Reaper622 · 2019-10-13T06:40:55Z

@fanyijihua 校对认领

fanyijihua · 2019-10-13T06:40:57Z

@Reaper622 好的呢 🍺

sleepingxixi · 2019-10-13T07:04:51Z

@Glowin 校对认领
@fanyijihua 校对认领

Reaper622

整体翻译的不错，提出了一点修改建议。: )
校对完成 @cyz980908 @fanyijihua

Reaper622 · 2019-10-13T08:24:53Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md


-Maybe you wanted to implement a dark theme? It was possible, but now it has become easier!
+又或许您想实现一个暗色的主题？这些都是可以实现的，但现在变得容易了。


「又或许你想实现一个暗色的主题」 => 「又或许你想实现一个黑夜模式」

Reaper622 · 2019-10-13T08:28:40Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md


-Finally! If you ever have worked with CSS and wanted to keep your design consistent? Or was it more like at some pages, your website had different padding, margin or colors?
+终于来了。如果您曾经写过 CSS，并且想完美还原设计稿？或者还想在某些页面上，让你的网站有不同的填充、边距或颜色？


「终于来了。」 => 「废话不多说，我们进入主题」

Finally 在口语化中在开头一般表示寒暄结束，进入主题，此处翻译为终于的意味，不妥当。

Reaper622 · 2019-10-13T08:31:13Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md


-Let's have a look at it!
+来吧！


「来吧」 => 「让我们先睹为快！」

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

Reaper622 · 2019-10-13T08:36:30Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md


-Okay, the rest is pretty simple. The custom property `--example-color` has the value of `#ccc`. When we use the custom property, for example, on the `background-color` property, the background of that element will be a light gray. Cool right?
+好啦，那剩下的就很简单了。自定义属性 `--example-color` 的值为 `#ccc`。当我们使用自定义属性时，如 `background-color`，元素的背景将是浅灰色。酷吧？


「当我们使用自定义属性时，如 background-color」 => 「当我们在例如background-color的属性上使用自定义属性」

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

感谢校对~已做出修改

…e-easily.md

sleepingxixi · 2019-10-13T09:00:34Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md


-For this, we need to learn the `var()` function.  
-The `var()` can have two arguments. The first argument needs to be a custom property. If the custom property is not valid, you want to have a fallback value. To achieve this, you simply need to set the second argument of the `var()` function. Let's look at an example.  
+首先，我们需要学习 var() 函数。


var() 应该保持原来的格式吧，var()

sleepingxixi · 2019-10-13T09:09:16Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

@@ -63,37 +63,37 @@ The `var()` can have two arguments. The first argument needs to be a custom prop
 }
 ```

-This should be now pretty straightforward for you to understand. We are setting the `--example-color` to `#ccc` and then we are using it in `.someElement` to set the background color. If something goes wrong and our `--example-color` is not valid, we have a fallback value of `#d1d1d1`.
+现在你们应该很容易理解了。我们将 `--example-color` 设置为 `#ccc`，然后在 `.someElement` 中使用它来作为背景颜色。 如果出了问题，我们的 `--example-color` 将失效，那么我们的回退值为 `#d1d1d1`。


「如果出了问题，我们的 --example-color 将失效」=>「如果出了一些问题，使我们的--example-color 失效了」

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

sleepingxixi · 2019-10-13T09:22:19Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md


-Let's first have a look at what we will do here:  
+首先我们先来看看我们要达到什么效果： 


「首先我们先来看看我们要达到什么效果」=>「先来看看我们我们即将做的事：」

sleepingxixi · 2019-10-13T09:33:25Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md


-Since this code is lengthy, I will show it to you step by step!  
+因为这段代码很长，所以我将一步一步地带你来写!  


「因为这段代码很长，所以我将一步一步地带你来写」 =>「因为这段代码很长，所以我将一步一步地分解」

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

sleepingxixi · 2019-10-13T09:51:57Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

@@ -229,7 +229,7 @@ Here comes an integral part of the code. We now see why we named the `.theme-con
 }
 ```

-This is just some boilerplate code to set our style. In the `.demo` selector, we are setting the `font-size`. This is the size of our symbols for the toggle. In the `.switch` selector the `height` and `width` is how long and wide the element behind our toggle symbol is.  
+这只是一些样例代码来设置我们的样式。在 `.demo` 选择器中，我们设置 `font-size` 给切换符号的大小。在 `.switch` 选择器中，`height` 和 `width` 是切换符号后面的元素的长度和宽度。

 ```
 /* The slider */


代码中的注释需要翻译

sleepingxixi · 2019-10-13T10:00:00Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

@@ -262,7 +262,7 @@ This is just some boilerplate code to set our style. In the `.demo` selector, we
 }
 ```

-Here we can finally see our custom properties in action besides using them directly in the `.theme.container` and again a lot of boilerplate code. As you can see, the toggle symbols are simple Unicode symbols. This is why the toggle will look different on every OS and mobile phone vendor. You have to keep this in mind. Important to know here is that in the `.slider:before` Selector, we are moving our symbol around with the `left` and `top` properties. We are doing that also in the `.theme-switcher:checked + .slider:before` but only with the `left` property.  
+到这里，除非你直接在 `.theme.container` 中设定了自定义属性，或者写了其他的代码，那么现在我们终于可以看到自定义属性的效果了。正如你所看到的，切换符号是简单的 Unicode 字符。这就是为什么切换开关在不同的操作系统和手机系统上看起来会不同的原因，这一点你需要注意。还需要注意的是，在 `.slider:before` 选择器中，我们使用 `left` 和 `top` 属性来移动符号。我们在 `.theme-switcher:checked + .slider:before` 中也这样做了，但只使用了 `left` 属性。  


这句话看起来有点怪怪的。
「到这里，除非你直接在 .theme.container 中设定了自定义属性，或者写了其他的代码，那么现在我们终于可以看到自定义属性的效果了。」=>「现在我们终于可以看到自定义属性的效果，排除你直接在 .theme.container 中设定了自定义属性，或者写了其他的代码的情况」

我觉得改完还是很怪...

sleepingxixi · 2019-10-13T10:04:16Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

@@ -262,7 +262,7 @@ This is just some boilerplate code to set our style. In the `.demo` selector, we
 }
 ```

-Here we can finally see our custom properties in action besides using them directly in the `.theme.container` and again a lot of boilerplate code. As you can see, the toggle symbols are simple Unicode symbols. This is why the toggle will look different on every OS and mobile phone vendor. You have to keep this in mind. Important to know here is that in the `.slider:before` Selector, we are moving our symbol around with the `left` and `top` properties. We are doing that also in the `.theme-switcher:checked + .slider:before` but only with the `left` property.  
+到这里，除非你直接在 `.theme.container` 中设定了自定义属性，或者写了其他的代码，那么现在我们终于可以看到自定义属性的效果了。正如你所看到的，切换符号是简单的 Unicode 字符。这就是为什么切换开关在不同的操作系统和手机系统上看起来会不同的原因，这一点你需要注意。还需要注意的是，在 `.slider:before` 选择器中，我们使用 `left` 和 `top` 属性来移动符号。我们在 `.theme-switcher:checked + .slider:before` 中也这样做了，但只使用了 `left` 属性。  

 ```
 /* Rounded sliders */


代码中的注释需要翻译

sleepingxixi · 2019-10-13T10:14:27Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

 > * 校对者：

-# CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily
+# CSS 速战速决：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题 


这个css quickies翻译成css速战速决感觉有点奇怪，我特地上网查一下有没有更好的解释，我通过必应翻译得到的是css 速效，感觉这个好像更符合一些，但是这个说法也有点奇怪。

你可能不知道的 CSS怎么样
Quickies：速战速决；便利贴；你可能不知道

感谢第二位校对者的意见，已修改

…e-easily.md

sleepingxixi

其实翻译挺好的，只是感觉题目这块可以再斟酌一下，还有一下小地方再修改一下哈。
@cyz980908 @Glowin 校对完成

sleepingxixi · 2019-10-13T12:12:05Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

@@ -5,15 +5,15 @@
 > * 译者：[cyz980908](https://github.com/cyz980908)
 > * 校对者：[Reaper622](https://github.com/Reaper622),[sleepingxixi](https://github.com/sleepingxixi)

-# CSS 速战速决：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题 
+# 你不知道的 CSS：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题 


其实我还是很纠结这里到底该用什么名字，我刚才问了同事和朋友，他们说这个相当于是技巧，妙招，锦囊之类的，不能直接翻译，那样子太奇怪了。

所以我觉得可以叫css妙招，css技巧，或者css锦囊

sleepingxixi · 2019-10-13T12:13:34Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

   element.style.setProperty("--my-color", "#ccc");
 ```

 我们可以像任何其他属性一样获取和设置自定义属性。这还不酷吗？

 #### 使用自定义变量实现一个主题切换器

-首先我们先来看看我们要达到什么效果： 
+先来看看我们我们即将做的事： 


这个地方我刚才写错了，多了一个我们。
「先来看看我们我们即将做的事」=>「先来看看我们即将做的事」

sleepingxixi · 2019-10-13T12:21:49Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

@@ -176,20 +176,20 @@ Since this code is lengthy, I will show it to you step by step!
 }
 ```

-Lets first center our content. We are doing this with css `grid`. We will cover the `grid` feature in another CSS quickies!  
+首先让我们集中内容布局。我们用 CSS 的 `grid` 特性实现。我们将在另一个 CSS 速战速决中介绍 `grid` 特性！  


如果要修改css quickies的翻译，记得这块也要一起修改哦

感谢校对~辛苦辛苦

…e-easily.md

sleepingxixi

最后一个想提的意见。辛苦译者了

sleepingxixi · 2019-10-14T01:03:09Z

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

@@ -176,7 +176,7 @@ checkbox.addEventListener("change", function() {
 }
 ```

-首先让我们集中内容布局。我们用 CSS 的 `grid` 特性实现。我们将在另一个 CSS 速战速决中介绍 `grid` 特性！  
+首先让我们集中内容布局。我们用 CSS 的 `grid` 特性实现。我们将在另一个 CSS 小技巧中介绍 `grid` 特性！  


「CSS 小技巧」=>「CSS 小妙招」

感谢校对~

JaxNext · 2019-10-14T11:55:46Z

@Glowin 校队认领

文字准确有助于标签管理哦。

sleepingxixi

我是真的希望这是最后一次修改了。我不是故意这么较真，但是真的有点强迫症。

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md

根据校对者意见做出修改

eizyc · 2019-10-16T06:35:44Z

@lsvih 您是工作人员吗？可以帮忙审核一下吗？

lsvih · 2019-10-16T06:52:01Z

本文 3 分，校对各 1 分

lsvih · 2019-10-16T06:52:56Z

@cyz980908 我修改了一点格式，您记得更新一下本地版本哈。

lsvih · 2019-10-16T06:53:48Z

@cyz980908 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

eizyc · 2019-10-16T07:18:39Z

好的~~辛苦了谢谢~~链接在这
https://juejin.im/post/5da6c370e51d4524a0060385

eizyc · 2019-10-16T07:19:36Z

https://juejin.im/post/5da6c370e51d4524a0060385
@lsvih 忘记艾特了

CSS 速战速决：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题

01d3986

第一次翻译完成

fanyijihua added the 校对认领 label Oct 13, 2019

fanyijihua mentioned this pull request Oct 13, 2019

CSS 小妙招：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题 #6424

Closed

fanyijihua added the 正在校对 label Oct 13, 2019

Reaper622 previously approved these changes Oct 13, 2019

View reviewed changes

根据第一位校对者意见，做出修改

42cc055

感谢校对~已做出修改

eizyc dismissed Reaper622’s stale review via 42cc055 October 13, 2019 09:59

Update css-quickies-css-variables-or-how-you-create-a-white-dark-them…

95e03d9

…e-easily.md

sleepingxixi reviewed Oct 13, 2019

View reviewed changes

eizyc added 2 commits October 13, 2019 19:22

根据第二位校对者的意见，做出修改

09f6558

感谢第二位校对者的意见，已修改

Update css-quickies-css-variables-or-how-you-create-a-white-dark-them…

4e2da6a

…e-easily.md

sleepingxixi previously approved these changes Oct 13, 2019

View reviewed changes

按照校对者意见作出修改

7443c74

感谢校对~辛苦辛苦

eizyc dismissed sleepingxixi’s stale review via 7443c74 October 13, 2019 14:17

eizyc changed the title ~~CSS 速战速决：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题~~ CSS 小技巧：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题 Oct 13, 2019

eizyc changed the title ~~CSS 小技巧：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题~~ CSS 小妙招：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题 Oct 13, 2019

Update css-quickies-css-variables-or-how-you-create-a-white-dark-them…

c4bf0b6

…e-easily.md

sleepingxixi previously approved these changes Oct 14, 2019

View reviewed changes

作出修改

097c4e0

感谢校对~

eizyc dismissed sleepingxixi’s stale review via 097c4e0 October 14, 2019 06:16

sleepingxixi previously approved these changes Oct 14, 2019

View reviewed changes

TODO1/css-quickies-css-variables-or-how-you-create-a-white-dark-theme-easily.md Outdated Show resolved Hide resolved

做出修改

c316296

根据校对者意见做出修改

eizyc dismissed sleepingxixi’s stale review via c316296 October 15, 2019 01:23

lsvih removed 校对认领正在校对 labels Oct 16, 2019

lsvih added 前端标注待管理员 Review labels Oct 16, 2019

lsvih self-assigned this Oct 16, 2019

lsvih added 3 commits October 16, 2019 14:43

增加代码块语言标识

0b17470

减少标题层级

f2fb59e

增加预览地址

ada07c1

lsvih approved these changes Oct 16, 2019

View reviewed changes

lsvih merged commit 4c229cd into xitu:master Oct 16, 2019

lsvih added 翻译完成 and removed 标注待管理员 Review labels Oct 16, 2019

lsvih removed their assignment Jul 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS 小妙招：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题 #6433

CSS 小妙招：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题 #6433

eizyc commented Oct 13, 2019

Reaper622 commented Oct 13, 2019

fanyijihua commented Oct 13, 2019

sleepingxixi commented Oct 13, 2019 •

edited

Loading

Reaper622 left a comment

Reaper622 Oct 13, 2019

Reaper622 Oct 13, 2019

Reaper622 Oct 13, 2019

Reaper622 Oct 13, 2019

sleepingxixi Oct 13, 2019

sleepingxixi Oct 13, 2019

sleepingxixi Oct 13, 2019

sleepingxixi Oct 13, 2019

sleepingxixi Oct 13, 2019

sleepingxixi Oct 13, 2019

eizyc Oct 13, 2019

sleepingxixi Oct 13, 2019

sleepingxixi Oct 13, 2019

eizyc Oct 13, 2019

sleepingxixi left a comment

sleepingxixi Oct 13, 2019

sleepingxixi Oct 13, 2019

sleepingxixi Oct 13, 2019

sleepingxixi Oct 13, 2019

sleepingxixi left a comment

sleepingxixi Oct 14, 2019

eizyc Oct 14, 2019

JaxNext commented Oct 14, 2019

sleepingxixi left a comment

eizyc commented Oct 16, 2019

lsvih commented Oct 16, 2019

lsvih commented Oct 16, 2019

lsvih commented Oct 16, 2019

eizyc commented Oct 16, 2019

eizyc commented Oct 16, 2019


		Maybe you wanted to implement a dark theme? It was possible, but now it has become easier!
		又或许您想实现一个暗色的主题？这些都是可以实现的，但现在变得容易了。


		Finally! If you ever have worked with CSS and wanted to keep your design consistent? Or was it more like at some pages, your website had different padding, margin or colors?
		终于来了。如果您曾经写过 CSS，并且想完美还原设计稿？或者还想在某些页面上，让你的网站有不同的填充、边距或颜色？


		Okay, the rest is pretty simple. The custom property `--example-color` has the value of `#ccc`. When we use the custom property, for example, on the `background-color` property, the background of that element will be a light gray. Cool right?
		好啦，那剩下的就很简单了。自定义属性 `--example-color` 的值为 `#ccc`。当我们使用自定义属性时，如 `background-color`，元素的背景将是浅灰色。酷吧？


		Let's first have a look at what we will do here:
		首先我们先来看看我们要达到什么效果：


		Since this code is lengthy, I will show it to you step by step!
		因为这段代码很长，所以我将一步一步地带你来写!

CSS 小妙招：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题 #6433

CSS 小妙招：CSS 变量 —— 如何轻松创建一个🌞白色/🌑暗色主题 #6433

Conversation

eizyc commented Oct 13, 2019

Reaper622 commented Oct 13, 2019

fanyijihua commented Oct 13, 2019

sleepingxixi commented Oct 13, 2019 • edited Loading

Reaper622 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sleepingxixi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sleepingxixi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JaxNext commented Oct 14, 2019

sleepingxixi left a comment

Choose a reason for hiding this comment

eizyc commented Oct 16, 2019

lsvih commented Oct 16, 2019

lsvih commented Oct 16, 2019

lsvih commented Oct 16, 2019

eizyc commented Oct 16, 2019

eizyc commented Oct 16, 2019

sleepingxixi commented Oct 13, 2019 •

edited

Loading