From 92f03d236f0a8eba4bb8d7a84e906f3dc7c228cd Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: 2017年10月30日 23:08:11 +0800
Subject: [PATCH 01/20] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/home/getting-started.md | 6 +++---
data/less.json | 4 ++--
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/content/home/getting-started.md b/content/home/getting-started.md
index 3da73494..2e51d880 100644
--- a/content/home/getting-started.md
+++ b/content/home/getting-started.md
@@ -1,12 +1,12 @@
---
-title: Getting Started
+title: 快速入门
---
-Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.
+Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等许多特性,使 CSS 更易维护和扩展。
Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. The quickest place for first experiments with Less is our [online editor](http://lesscss.org/less-preview/).
-For example:
+例子:
```less
@base: #f938ab;
diff --git a/data/less.json b/data/less.json
index ac03d424..d506ad65 100644
--- a/data/less.json
+++ b/data/less.json
@@ -1,6 +1,6 @@
{
"name": "less",
- "version": "2.7.2",
+ "version": "2.7.3",
"description": "Leaner CSS",
"homepage": "http://lesscss.org",
"author": {
@@ -47,7 +47,7 @@
"mkdirp": "^0.5.0",
"promise": "^7.1.1",
"source-map": "^0.5.3",
- "request": "^2.72.0"
+ "request": "2.81.0"
},
"devDependencies": {
"diff": "^2.2.2",
From 7dc582742cd14f74c2e7b2bda266c08285bd41ae Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: 2017年10月31日 23:03:47 +0800
Subject: [PATCH 02/20] =?UTF-8?q?get=20start=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/home/getting-started.md | 6 +++---
templates/index.hbs | 6 +++---
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/content/home/getting-started.md b/content/home/getting-started.md
index 2e51d880..7613c819 100644
--- a/content/home/getting-started.md
+++ b/content/home/getting-started.md
@@ -1,10 +1,10 @@
---
-title: 快速入门
+title: Getting started
---
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等许多特性,使 CSS 更易维护和扩展。
-Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. The quickest place for first experiments with Less is our [online editor](http://lesscss.org/less-preview/).
+Less可以在node,browser和Rhino环境中运行 。同时,Less允许使用很多第三方工具编译和监听文件。测试Less最便捷的方式可以通过使用 [Less在线编辑器](http://lesscss.org/less-preview/).
例子:
@@ -25,7 +25,7 @@ Less runs inside Node, in the browser and inside Rhino. There are also many 3rd
}
```
-compiles to
+编译为
```css
.box {
diff --git a/templates/index.hbs b/templates/index.hbs
index 1169c600..676c13bc 100644
--- a/templates/index.hbs
+++ b/templates/index.hbs
@@ -1,14 +1,14 @@
---
-title: Getting started
+title: 快速入门
slug: index
-lead: "An overview of Less, how to download and use, examples and more."
+lead: "Less概述,包括如何下载,使用,示例以及更多。"
---
{{!-- Getting started
================================================== --}}
-
Getting Started
+
快速入门
{{md 'getting-started'}}
From b605f591d32b0dd9ae9ef7d2a378e60b686f7672 Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: 2017年10月31日 23:08:09 +0800
Subject: [PATCH 03/20] =?UTF-8?q?get=20start=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/home/getting-started.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/content/home/getting-started.md b/content/home/getting-started.md
index 7613c819..bf88272d 100644
--- a/content/home/getting-started.md
+++ b/content/home/getting-started.md
@@ -4,7 +4,7 @@ title: Getting started
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等许多特性,使 CSS 更易维护和扩展。
-Less可以在node,browser和Rhino环境中运行 。同时,Less允许使用很多第三方工具编译和监听文件。测试Less最便捷的方式可以通过使用 [Less在线编辑器](http://lesscss.org/less-preview/).
+Less可以在node,browser和Rhino环境中运行 。同时,Less允许使用很多第三方工具编译和监听文件。测试Less最便捷的方式可以通过使用 [Less在线编辑器](http://lesscss.org/less-preview/)。
例子:
From e8cd89afaa59f00f7ba559747c9cf5a2d537ebbb Mon Sep 17 00:00:00 2001
From: yang <249877448@qq.com>
Date: Sun, 5 Nov 2017 16:32:36 +0800
Subject: [PATCH 04/20] Update using-less.md
---
content/home/using-less.md | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/content/home/using-less.md b/content/home/using-less.md
index 07bb81cd..d6624e72 100644
--- a/content/home/using-less.md
+++ b/content/home/using-less.md
@@ -2,8 +2,7 @@
title: Server-side Usage
---
-> Less can be used on the command line via npm, downloaded as a script file for the browser or used in a wide variety of third party tools. See the [Usage]({{resolve 'usage'}}) section for more
-detailed information.
+> Less 可以通过npm在命令行中使用, 以及作为浏览器的脚本文件下载,或在各种各样的第三方工具中使用。 查看[使用]({{resolve 'usage'}}) 章节获取更多具体信息。
## Installation
From 60cedff4b54afecd4cce051c531e94fcf842cf37 Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: Sun, 5 Nov 2017 18:43:07 +0800
Subject: [PATCH 05/20] =?UTF-8?q?less=E4=BD=BF=E7=94=A8=E7=AB=A0=E8=8A=82?=
=?UTF-8?q?=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/home/using-less.md | 58 +++++++++++++++++------------------
templates/includes/banner.hbs | 2 +-
templates/index.hbs | 8 ++---
3 files changed, 34 insertions(+), 34 deletions(-)
diff --git a/content/home/using-less.md b/content/home/using-less.md
index d6624e72..83efa7b8 100644
--- a/content/home/using-less.md
+++ b/content/home/using-less.md
@@ -4,39 +4,39 @@ title: Server-side Usage
> Less 可以通过npm在命令行中使用, 以及作为浏览器的脚本文件下载,或在各种各样的第三方工具中使用。 查看[使用]({{resolve 'usage'}}) 章节获取更多具体信息。
-## Installation
+## 1.安装
-The easiest way to install Less on the server, is via npm, the [node.js](http://nodejs.org/) package manager, as so:
+在服务器上安装Less的最简单的方法是通过npm,[node.js](http://nodejs.org/)软件包管理器,如下所示:
```bash
$ npm install -g less
```
-## Command-line Usage
+## 2.命令行用法
-Once installed, you can invoke the compiler from the command-line, as such:
+安装完成后,可以从命令行调用编译器,如下所示:
```bash
$ lessc styles.less
```
-This will output the compiled CSS to `stdout`. To save the CSS result to a file of your choice use:
+这将输出编译的CSS文件到`stdout`。 要将CSS结果保存到你选择的文件,请使用:
```bash
$ lessc styles.less styles.css
```
-To output minified CSS you can use the [`clean-css` plugin](https://github.com/less/less-plugin-clean-css). When the plugin is installed, a minified CSS output is specified with `--clean-css` option:
+如果要输出压缩的CSS文件,你可以使用[`clean-css`插件](https://github.com/less/less-plugin-clean-css)。 安装插件后,用`--clean-css`选项指定输出压缩的CSS文件:
```bash
$ lessc --clean-css styles.less styles.min.css
```
-To see all the command line options run `lessc` without parameters or see [Usage]({{resolve 'usage'}}).
+要查看所有命令行选项,请不带参数运行`lessc`,或者参阅[使用方法]({{resolve 'usage'}})。
-## Usage in Code
+## 3.代码中用法
-You can invoke the compiler from node, as such:
+你可以从node中调用Less编译器,如下所示:
```js
var less = require('less');
@@ -46,7 +46,7 @@ less.render('.class { width: (1 + 1) }', function (e, output) {
});
```
-which will output
+输出如下:
```css
.class {
@@ -54,16 +54,16 @@ which will output
}
```
-## Configuration
+## 4.配置
-You may pass some options to the compiler:
+你可以将一些配置选项传递给编译器:
```js
var less = require('less');
less.render('.class { width: (1 + 1) }',
{
- paths: ['.', './lib'], // Specify search paths for @import directives
+ paths: ['.', './lib'], // 指定@import指令的搜索路径
filename: 'style.less', // Specify a filename, for better error messages
},
function (e, output) {
@@ -71,11 +71,11 @@ less.render('.class { width: (1 + 1) }',
});
```
-See [Usage]({{resolve 'usage'}}) for more information.
+更多相关信息,请参阅[使用方法]({{resolve 'usage'}})。
-## Third Party Tools
+## 5.第三方工具
-See the [Usage]({{resolve 'usage'}}) section for details of other tools.
+其他工具的详细信息,请参见[使用方法]({{resolve 'usage'}})章节。
-# Client-side Usage
+# 浏览器端用法
-> Using less.js in the browser is great for development, but it's not recommended for production
+> 在浏览器中使用less.js对开发很有帮助, 但不推荐用于生产环境
-Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, _we recommend pre-compiling using node.js or one of the many third party tools available_.
+客户端是最简单的Less入门方式,适用于开发, 但在生产环境, 重要的是性能和可靠性, _我们建议使用node.js或其他第三方工具来预编译_。
-To start off, link your `.less` stylesheets with the `rel` attribute set to "`stylesheet/less`":
+首先,通过将`rel`属性设置为"`stylesheet/less`"来连接你的 `.less` 样式表:
```html
```
-Next, [download less.js](https://github.com/less/less.js/archive/master.zip) and include it in a `` tag in the `
` element of your page:
+然后, [下载 less.js](https://github.com/less/less.js/archive/master.zip)并将其包含在页面的``元素的``标签中:
```html
```
-### Tips
+### 提示
-* Make sure you include your stylesheets **before** the script.
-* When you link more than one `.less` stylesheet each of them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other.
-* Due to the same origin policy of browsers loading external resources requires [enabling CORS](http://enable-cors.org/)
+* 确保在script脚本之前包含样式表。
+* 当你链接多个`.less`样式表时,每个样式表都是独立编译的。因此,在样式表中定义的任何变量,mixins或名称空间都不能被其他任何样式表访问。
+* 由于浏览器加载外部资源的同源策略需要[启用CORS](http://enable-cors.org/)。
-## Browser Options
+## 1.浏览器选项
-Options are defined by setting them on a global `less` object **before** the ``:
+选项通过在`` **之前** 之前将其设置在全局`less` 对象上来定义的:
``` html
@@ -136,11 +136,11 @@ Options are defined by setting them on a global `less` object **before** the `
Less is released under the Apache 2 License (though there are plans to dual license it). Copyright 2009-{{ now "%Y" }}, Alexis Sellier and the Less Core Team (see about). Boiled down to smaller chunks, it can be described with the following conditions.
From f4cd6df2d251469f1e3fa487ef959a978393e936 Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: Mon, 6 Nov 2017 13:37:01 +0800
Subject: [PATCH 06/20] =?UTF-8?q?download-options=E6=A8=A1=E5=9D=97?=
=?UTF-8?q?=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/home/download-options.md | 13 ++++++-------
content/home/using-less.md | 2 +-
templates/index.hbs | 2 +-
3 files changed, 8 insertions(+), 9 deletions(-)
diff --git a/content/home/download-options.md b/content/home/download-options.md
index dfc5ea07..7f680b94 100644
--- a/content/home/download-options.md
+++ b/content/home/download-options.md
@@ -1,16 +1,15 @@
-#### [Download Source Code]({{ less.sourcearchive }}{{ less.version }}.zip)
+#### [下载源代码]({{ less.sourcearchive }}{{ less.version }}.zip)
-Get the latest Less source code by downloading it directly from GitHub.
+从GitHub直接下载最新的源代码。
-#### [Clone or Fork via GitHub]({{ less.repository.url }})
+#### [从GitHub上Clone或Fork]({{ less.repository.url }})
-Fork the project and send us a pull request!
+Fork项目,并给我们提pull request!
+#### [通过Bower安装](http://bower.io)
-#### [Install with Bower](http://bower.io)
-
-Install less.js script by running the following in the command line:
+通过在命令行中运行以下命令来安装less.js脚本:
```bash
bower install less
diff --git a/content/home/using-less.md b/content/home/using-less.md
index 83efa7b8..dddf5257 100644
--- a/content/home/using-less.md
+++ b/content/home/using-less.md
@@ -64,7 +64,7 @@ var less = require('less');
less.render('.class { width: (1 + 1) }',
{
paths: ['.', './lib'], // 指定@import指令的搜索路径
- filename: 'style.less', // Specify a filename, for better error messages
+ filename: 'style.less', // 指定一个文件名称, 以更好的输出错误信息
},
function (e, output) {
console.log(output.css);
diff --git a/templates/index.hbs b/templates/index.hbs
index ab5c6d79..844e8452 100644
--- a/templates/index.hbs
+++ b/templates/index.hbs
@@ -34,7 +34,7 @@ lead: "Less概述,包括如何下载,使用,示例以及更多。"
").append(x.parseHTML(e)).find(i):e)}).complete(r&&function(e,t){s.each(r,o||[e.responseText,t,e])}),this},x.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){x.fn[t]=function(e){return this.on(t,e)}}),x.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:yn,type:"GET",isLocal:Cn.test(mn[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Dn,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":x.parseJSON,"text xml":x.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?_n(_n(e,x.ajaxSettings),t):_n(x.ajaxSettings,e)},ajaxPrefilter:Hn(An),ajaxTransport:Hn(jn),ajax:function(e,n){"object"==typeof e&&(n=e,e=t),n=n||{};var r,i,o,a,s,l,u,c,p=x.ajaxSetup({},n),f=p.context||p,d=p.context&&(f.nodeType||f.jquery)?x(f):x.event,h=x.Deferred(),g=x.Callbacks("once memory"),m=p.statusCode||{},y={},v={},b=0,w="canceled",C={readyState:0,getResponseHeader:function(e){var t;if(2===b){if(!c){c={};while(t=Tn.exec(a))c[t[1].toLowerCase()]=t[2]}t=c[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return 2===b?a:null},setRequestHeader:function(e,t){var n=e.toLowerCase();return b||(e=v[n]=v[n]||e,y[e]=t),this},overrideMimeType:function(e){return b||(p.mimeType=e),this},statusCode:function(e){var t;if(e)if(2>b)for(t in e)m[t]=[m[t],e[t]];else C.always(e[C.status]);return this},abort:function(e){var t=e||w;return u&&u.abort(t),k(0,t),this}};if(h.promise(C).complete=g.add,C.success=C.done,C.error=C.fail,p.url=((e||p.url||yn)+"").replace(xn,"").replace(kn,mn[1]+"//"),p.type=n.method||n.type||p.method||p.type,p.dataTypes=x.trim(p.dataType||"*").toLowerCase().match(T)||[""],null==p.crossDomain&&(r=En.exec(p.url.toLowerCase()),p.crossDomain=!(!r||r[1]===mn[1]&&r[2]===mn[2]&&(r[3]||("http:"===r[1]?"80":"443"))===(mn[3]||("http:"===mn[1]?"80":"443")))),p.data&&p.processData&&"string"!=typeof p.data&&(p.data=x.param(p.data,p.traditional)),qn(An,p,n,C),2===b)return C;l=p.global,l&&0===x.active++&&x.event.trigger("ajaxStart"),p.type=p.type.toUpperCase(),p.hasContent=!Nn.test(p.type),o=p.url,p.hasContent||(p.data&&(o=p.url+=(bn.test(o)?"&":"?")+p.data,delete p.data),p.cache===!1&&(p.url=wn.test(o)?o.replace(wn,"1ドル_="+vn++):o+(bn.test(o)?"&":"?")+"_="+vn++)),p.ifModified&&(x.lastModified[o]&&C.setRequestHeader("If-Modified-Since",x.lastModified[o]),x.etag[o]&&C.setRequestHeader("If-None-Match",x.etag[o])),(p.data&&p.hasContent&&p.contentType!==!1||n.contentType)&&C.setRequestHeader("Content-Type",p.contentType),C.setRequestHeader("Accept",p.dataTypes[0]&&p.accepts[p.dataTypes[0]]?p.accepts[p.dataTypes[0]]+("*"!==p.dataTypes[0]?", "+Dn+"; q=0.01":""):p.accepts["*"]);for(i in p.headers)C.setRequestHeader(i,p.headers[i]);if(p.beforeSend&&(p.beforeSend.call(f,C,p)===!1||2===b))return C.abort();w="abort";for(i in{success:1,error:1,complete:1})C[i](p[i]);if(u=qn(jn,p,n,C)){C.readyState=1,l&&d.trigger("ajaxSend",[C,p]),p.async&&p.timeout>0&&(s=setTimeout(function(){C.abort("timeout")},p.timeout));try{b=1,u.send(y,k)}catch(N){if(!(2>b))throw N;k(-1,N)}}else k(-1,"No Transport");function k(e,n,r,i){var c,y,v,w,T,N=n;2!==b&&(b=2,s&&clearTimeout(s),u=t,a=i||"",C.readyState=e>0?4:0,c=e>=200&&300>e||304===e,r&&(w=Mn(p,C,r)),w=On(p,w,C,c),c?(p.ifModified&&(T=C.getResponseHeader("Last-Modified"),T&&(x.lastModified[o]=T),T=C.getResponseHeader("etag"),T&&(x.etag[o]=T)),204===e||"HEAD"===p.type?N="nocontent":304===e?N="notmodified":(N=w.state,y=w.data,v=w.error,c=!v)):(v=N,(e||!N)&&(N="error",0>e&&(e=0))),C.status=e,C.statusText=(n||N)+"",c?h.resolveWith(f,[y,N,C]):h.rejectWith(f,[C,N,v]),C.statusCode(m),m=t,l&&d.trigger(c?"ajaxSuccess":"ajaxError",[C,p,c?y:v]),g.fireWith(f,[C,N]),l&&(d.trigger("ajaxComplete",[C,p]),--x.active||x.event.trigger("ajaxStop")))}return C},getJSON:function(e,t,n){return x.get(e,t,n,"json")},getScript:function(e,n){return x.get(e,t,n,"script")}}),x.each(["get","post"],function(e,n){x[n]=function(e,r,i,o){return x.isFunction(r)&&(o=o||i,i=r,r=t),x.ajax({url:e,type:n,dataType:o,data:r,success:i})}});function Mn(e,n,r){var i,o,a,s,l=e.contents,u=e.dataTypes;while("*"===u[0])u.shift(),o===t&&(o=e.mimeType||n.getResponseHeader("Content-Type"));if(o)for(s in l)if(l[s]&&l[s].test(o)){u.unshift(s);break}if(u[0]in r)a=u[0];else{for(s in r){if(!u[0]||e.converters[s+" "+u[0]]){a=s;break}i||(i=s)}a=a||i}return a?(a!==u[0]&&u.unshift(a),r[a]):t}function On(e,t,n,r){var i,o,a,s,l,u={},c=e.dataTypes.slice();if(c[1])for(a in e.converters)u[a.toLowerCase()]=e.converters[a];o=c.shift();while(o)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!l&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),l=o,o=c.shift())if("*"===o)o=l;else if("*"!==l&&l!==o){if(a=u[l+" "+o]||u["* "+o],!a)for(i in u)if(s=i.split(" "),s[1]===o&&(a=u[l+" "+s[0]]||u["* "+s[0]])){a===!0?a=u[i]:u[i]!==!0&&(o=s[0],c.unshift(s[1]));break}if(a!==!0)if(a&&e["throws"])t=a(t);else try{t=a(t)}catch(p){return{state:"parsererror",error:a?p:"No conversion from "+l+" to "+o}}}return{state:"success",data:t}}x.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(e){return x.globalEval(e),e}}}),x.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),x.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=a.head||x("head")[0]||a.documentElement;return{send:function(t,i){n=a.createElement("script"),n.async=!0,e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,t){(t||!n.readyState||/loaded|complete/.test(n.readyState))&&(n.onload=n.onreadystatechange=null,n.parentNode&&n.parentNode.removeChild(n),n=null,t||i(200,"success"))},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(t,!0)}}}});var Fn=[],Bn=/(=)\?(?=&|$)|\?\?/;x.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Fn.pop()||x.expando+"_"+vn++;return this[e]=!0,e}}),x.ajaxPrefilter("json jsonp",function(n,r,i){var o,a,s,l=n.jsonp!==!1&&(Bn.test(n.url)?"url":"string"==typeof n.data&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Bn.test(n.data)&&"data");return l||"jsonp"===n.dataTypes[0]?(o=n.jsonpCallback=x.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,l?n[l]=n[l].replace(Bn,"1ドル"+o):n.jsonp!==!1&&(n.url+=(bn.test(n.url)?"&":"?")+n.jsonp+"="+o),n.converters["script json"]=function(){return s||x.error(o+" was not called"),s[0]},n.dataTypes[0]="json",a=e[o],e[o]=function(){s=arguments},i.always(function(){e[o]=a,n[o]&&(n.jsonpCallback=r.jsonpCallback,Fn.push(o)),s&&x.isFunction(a)&&a(s[0]),s=a=t}),"script"):t});var Pn,Rn,Wn=0,$n=e.ActiveXObject&&function(){var e;for(e in Pn)Pn[e](t,!0)};function In(){try{return new e.XMLHttpRequest}catch(t){}}function zn(){try{return new e.ActiveXObject("Microsoft.XMLHTTP")}catch(t){}}x.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&In()||zn()}:In,Rn=x.ajaxSettings.xhr(),x.support.cors=!!Rn&&"withCredentials"in Rn,Rn=x.support.ajax=!!Rn,Rn&&x.ajaxTransport(function(n){if(!n.crossDomain||x.support.cors){var r;return{send:function(i,o){var a,s,l=n.xhr();if(n.username?l.open(n.type,n.url,n.async,n.username,n.password):l.open(n.type,n.url,n.async),n.xhrFields)for(s in n.xhrFields)l[s]=n.xhrFields[s];n.mimeType&&l.overrideMimeType&&l.overrideMimeType(n.mimeType),n.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest");try{for(s in i)l.setRequestHeader(s,i[s])}catch(u){}l.send(n.hasContent&&n.data||null),r=function(e,i){var s,u,c,p;try{if(r&&(i||4===l.readyState))if(r=t,a&&(l.onreadystatechange=x.noop,$n&&delete Pn[a]),i)4!==l.readyState&&l.abort();else{p={},s=l.status,u=l.getAllResponseHeaders(),"string"==typeof l.responseText&&(p.text=l.responseText);try{c=l.statusText}catch(f){c=""}s||!n.isLocal||n.crossDomain?1223===s&&(s=204):s=p.text?200:404}}catch(d){i||o(-1,d)}p&&o(s,c,p,u)},n.async?4===l.readyState?setTimeout(r):(a=++Wn,$n&&(Pn||(Pn={},x(e).unload($n)),Pn[a]=r),l.onreadystatechange=r):r()},abort:function(){r&&r(t,!0)}}}});var Xn,Un,Vn=/^(?:toggle|show|hide)$/,Yn=RegExp("^(?:([+-])=|)("+w+")([a-z%]*)$","i"),Jn=/queueHooks$/,Gn=[nr],Qn={"*":[function(e,t){var n=this.createTween(e,t),r=n.cur(),i=Yn.exec(t),o=i&&i[3]||(x.cssNumber[e]?"":"px"),a=(x.cssNumber[e]||"px"!==o&&+r)&&Yn.exec(x.css(n.elem,e)),s=1,l=20;if(a&&a[3]!==o){o=o||a[3],i=i||[],a=+r||1;do s=s||".5",a/=s,x.style(n.elem,e,a+o);while(s!==(s=n.cur()/r)&&1!==s&&--l)}return i&&(a=n.start=+a||+r||0,n.unit=o,n.end=i[1]?a+(i[1]+1)*i[2]:+i[2]),n}]};function Kn(){return setTimeout(function(){Xn=t}),Xn=x.now()}function Zn(e,t,n){var r,i=(Qn[t]||[]).concat(Qn["*"]),o=0,a=i.length;for(;a>o;o++)if(r=i[o].call(n,t,e))return r}function er(e,t,n){var r,i,o=0,a=Gn.length,s=x.Deferred().always(function(){delete l.elem}),l=function(){if(i)return!1;var t=Xn||Kn(),n=Math.max(0,u.startTime+u.duration-t),r=n/u.duration||0,o=1-r,a=0,l=u.tweens.length;for(;l>a;a++)u.tweens[a].run(o);return s.notifyWith(e,[u,o,n]),1>o&&l?n:(s.resolveWith(e,[u]),!1)},u=s.promise({elem:e,props:x.extend({},t),opts:x.extend(!0,{specialEasing:{}},n),originalProperties:t,originalOptions:n,startTime:Xn||Kn(),duration:n.duration,tweens:[],createTween:function(t,n){var r=x.Tween(e,u.opts,t,n,u.opts.specialEasing[t]||u.opts.easing);return u.tweens.push(r),r},stop:function(t){var n=0,r=t?u.tweens.length:0;if(i)return this;for(i=!0;r>n;n++)u.tweens[n].run(1);return t?s.resolveWith(e,[u,t]):s.rejectWith(e,[u,t]),this}}),c=u.props;for(tr(c,u.opts.specialEasing);a>o;o++)if(r=Gn[o].call(u,e,c,u.opts))return r;return x.map(c,Zn,u),x.isFunction(u.opts.start)&&u.opts.start.call(e,u),x.fx.timer(x.extend(l,{elem:e,anim:u,queue:u.opts.queue})),u.progress(u.opts.progress).done(u.opts.done,u.opts.complete).fail(u.opts.fail).always(u.opts.always)}function tr(e,t){var n,r,i,o,a;for(n in e)if(r=x.camelCase(n),i=t[r],o=e[n],x.isArray(o)&&(i=o[1],o=e[n]=o[0]),n!==r&&(e[r]=o,delete e[n]),a=x.cssHooks[r],a&&"expand"in a){o=a.expand(o),delete e[r];for(n in o)n in e||(e[n]=o[n],t[n]=i)}else t[r]=i}x.Animation=x.extend(er,{tweener:function(e,t){x.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");var n,r=0,i=e.length;for(;i>r;r++)n=e[r],Qn[n]=Qn[n]||[],Qn[n].unshift(t)},prefilter:function(e,t){t?Gn.unshift(e):Gn.push(e)}});function nr(e,t,n){var r,i,o,a,s,l,u=this,c={},p=e.style,f=e.nodeType&&nn(e),d=x._data(e,"fxshow");n.queue||(s=x._queueHooks(e,"fx"),null==s.unqueued&&(s.unqueued=0,l=s.empty.fire,s.empty.fire=function(){s.unqueued||l()}),s.unqueued++,u.always(function(){u.always(function(){s.unqueued--,x.queue(e,"fx").length||s.empty.fire()})})),1===e.nodeType&&("height"in t||"width"in t)&&(n.overflow=[p.overflow,p.overflowX,p.overflowY],"inline"===x.css(e,"display")&&"none"===x.css(e,"float")&&(x.support.inlineBlockNeedsLayout&&"inline"!==ln(e.nodeName)?p.zoom=1:p.display="inline-block")),n.overflow&&(p.overflow="hidden",x.support.shrinkWrapBlocks||u.always(function(){p.overflow=n.overflow[0],p.overflowX=n.overflow[1],p.overflowY=n.overflow[2]}));for(r in t)if(i=t[r],Vn.exec(i)){if(delete t[r],o=o||"toggle"===i,i===(f?"hide":"show"))continue;c[r]=d&&d[r]||x.style(e,r)}if(!x.isEmptyObject(c)){d?"hidden"in d&&(f=d.hidden):d=x._data(e,"fxshow",{}),o&&(d.hidden=!f),f?x(e).show():u.done(function(){x(e).hide()}),u.done(function(){var t;x._removeData(e,"fxshow");for(t in c)x.style(e,t,c[t])});for(r in c)a=Zn(f?d[r]:0,r,u),r in d||(d[r]=a.start,f&&(a.end=a.start,a.start="width"===r||"height"===r?1:0))}}function rr(e,t,n,r,i){return new rr.prototype.init(e,t,n,r,i)}x.Tween=rr,rr.prototype={constructor:rr,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||"swing",this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(x.cssNumber[n]?"":"px")},cur:function(){var e=rr.propHooks[this.prop];return e&&e.get?e.get(this):rr.propHooks._default.get(this)},run:function(e){var t,n=rr.propHooks[this.prop];return this.pos=t=this.options.duration?x.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):rr.propHooks._default.set(this),this}},rr.prototype.init.prototype=rr.prototype,rr.propHooks={_default:{get:function(e){var t;return null==e.elem[e.prop]||e.elem.style&&null!=e.elem.style[e.prop]?(t=x.css(e.elem,e.prop,""),t&&"auto"!==t?t:0):e.elem[e.prop]},set:function(e){x.fx.step[e.prop]?x.fx.step[e.prop](e):e.elem.style&&(null!=e.elem.style[x.cssProps[e.prop]]||x.cssHooks[e.prop])?x.style(e.elem,e.prop,e.now+e.unit):e.elem[e.prop]=e.now}}},rr.propHooks.scrollTop=rr.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},x.each(["toggle","show","hide"],function(e,t){var n=x.fn[t];x.fn[t]=function(e,r,i){return null==e||"boolean"==typeof e?n.apply(this,arguments):this.animate(ir(t,!0),e,r,i)}}),x.fn.extend({fadeTo:function(e,t,n,r){return this.filter(nn).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(e,t,n,r){var i=x.isEmptyObject(e),o=x.speed(t,n,r),a=function(){var t=er(this,x.extend({},e),o);(i||x._data(this,"finish"))&&t.stop(!0)};return a.finish=a,i||o.queue===!1?this.each(a):this.queue(o.queue,a)},stop:function(e,n,r){var i=function(e){var t=e.stop;delete e.stop,t(r)};return"string"!=typeof e&&(r=n,n=e,e=t),n&&e!==!1&&this.queue(e||"fx",[]),this.each(function(){var t=!0,n=null!=e&&e+"queueHooks",o=x.timers,a=x._data(this);if(n)a[n]&&a[n].stop&&i(a[n]);else for(n in a)a[n]&&a[n].stop&&Jn.test(n)&&i(a[n]);for(n=o.length;n--;)o[n].elem!==this||null!=e&&o[n].queue!==e||(o[n].anim.stop(r),t=!1,o.splice(n,1));(t||!r)&&x.dequeue(this,e)})},finish:function(e){return e!==!1&&(e=e||"fx"),this.each(function(){var t,n=x._data(this),r=n[e+"queue"],i=n[e+"queueHooks"],o=x.timers,a=r?r.length:0;for(n.finish=!0,x.queue(this,e,[]),i&&i.stop&&i.stop.call(this,!0),t=o.length;t--;)o[t].elem===this&&o[t].queue===e&&(o[t].anim.stop(!0),o.splice(t,1));for(t=0;a>t;t++)r[t]&&r[t].finish&&r[t].finish.call(this);delete n.finish})}});function ir(e,t){var n,r={height:e},i=0;for(t=t?1:0;4>i;i+=2-t)n=Zt[i],r["margin"+n]=r["padding"+n]=e;return t&&(r.opacity=r.width=e),r}x.each({slideDown:ir("show"),slideUp:ir("hide"),slideToggle:ir("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,t){x.fn[e]=function(e,n,r){return this.animate(t,e,n,r)}}),x.speed=function(e,t,n){var r=e&&"object"==typeof e?x.extend({},e):{complete:n||!n&&t||x.isFunction(e)&&e,duration:e,easing:n&&t||t&&!x.isFunction(t)&&t};return r.duration=x.fx.off?0:"number"==typeof r.duration?r.duration:r.duration in x.fx.speeds?x.fx.speeds[r.duration]:x.fx.speeds._default,(null==r.queue||r.queue===!0)&&(r.queue="fx"),r.old=r.complete,r.complete=function(){x.isFunction(r.old)&&r.old.call(this),r.queue&&x.dequeue(this,r.queue)},r},x.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2}},x.timers=[],x.fx=rr.prototype.init,x.fx.tick=function(){var e,n=x.timers,r=0;for(Xn=x.now();n.length>r;r++)e=n[r],e()||n[r]!==e||n.splice(r--,1);n.length||x.fx.stop(),Xn=t},x.fx.timer=function(e){e()&&x.timers.push(e)&&x.fx.start()},x.fx.interval=13,x.fx.start=function(){Un||(Un=setInterval(x.fx.tick,x.fx.interval))},x.fx.stop=function(){clearInterval(Un),Un=null},x.fx.speeds={slow:600,fast:200,_default:400},x.fx.step={},x.expr&&x.expr.filters&&(x.expr.filters.animated=function(e){return x.grep(x.timers,function(t){return e===t.elem}).length}),x.fn.offset=function(e){if(arguments.length)return e===t?this:this.each(function(t){x.offset.setOffset(this,e,t)});var n,r,o={top:0,left:0},a=this[0],s=a&&a.ownerDocument;if(s)return n=s.documentElement,x.contains(n,a)?(typeof a.getBoundingClientRect!==i&&(o=a.getBoundingClientRect()),r=or(s),{top:o.top+(r.pageYOffset||n.scrollTop)-(n.clientTop||0),left:o.left+(r.pageXOffset||n.scrollLeft)-(n.clientLeft||0)}):o},x.offset={setOffset:function(e,t,n){var r=x.css(e,"position");"static"===r&&(e.style.position="relative");var i=x(e),o=i.offset(),a=x.css(e,"top"),s=x.css(e,"left"),l=("absolute"===r||"fixed"===r)&&x.inArray("auto",[a,s])>-1,u={},c={},p,f;l?(c=i.position(),p=c.top,f=c.left):(p=parseFloat(a)||0,f=parseFloat(s)||0),x.isFunction(t)&&(t=t.call(e,n,o)),null!=t.top&&(u.top=t.top-o.top+p),null!=t.left&&(u.left=t.left-o.left+f),"using"in t?t.using.call(e,u):i.css(u)}},x.fn.extend({position:function(){if(this[0]){var e,t,n={top:0,left:0},r=this[0];return"fixed"===x.css(r,"position")?t=r.getBoundingClientRect():(e=this.offsetParent(),t=this.offset(),x.nodeName(e[0],"html")||(n=e.offset()),n.top+=x.css(e[0],"borderTopWidth",!0),n.left+=x.css(e[0],"borderLeftWidth",!0)),{top:t.top-n.top-x.css(r,"marginTop",!0),left:t.left-n.left-x.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||s;while(e&&!x.nodeName(e,"html")&&"static"===x.css(e,"position"))e=e.offsetParent;return e||s})}}),x.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);x.fn[e]=function(i){return x.access(this,function(e,i,o){var a=or(e);return o===t?a?n in a?a[n]:a.document.documentElement[i]:e[i]:(a?a.scrollTo(r?x(a).scrollLeft():o,r?o:x(a).scrollTop()):e[i]=o,t)},e,i,arguments.length,null)}});function or(e){return x.isWindow(e)?e:9===e.nodeType?e.defaultView||e.parentWindow:!1}x.each({Height:"height",Width:"width"},function(e,n){x.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){x.fn[i]=function(i,o){var a=arguments.length&&(r||"boolean"!=typeof i),s=r||(i===!0||o===!0?"margin":"border");return x.access(this,function(n,r,i){var o;return x.isWindow(n)?n.document.documentElement["client"+e]:9===n.nodeType?(o=n.documentElement,Math.max(n.body["scroll"+e],o["scroll"+e],n.body["offset"+e],o["offset"+e],o["client"+e])):i===t?x.css(n,r,s):x.style(n,r,i,s)},n,a?i:t,a,null)}})}),x.fn.size=function(){return this.length},x.fn.andSelf=x.fn.addBack,"object"==typeof module&&module&&"object"==typeof module.exports?module.exports=x:(e.jQuery=e.$=x,"function"==typeof define&&define.amd&&define("jquery",[],function(){return x}))})(window);
\ No newline at end of file
diff --git a/assets/root/_CNAME b/assets/root/_CNAME
index 7cb6d3cb..8b137891 100644
--- a/assets/root/_CNAME
+++ b/assets/root/_CNAME
@@ -1 +1 @@
-lesscss.org
+
diff --git a/templates/includes/javascripts.hbs b/templates/includes/javascripts.hbs
index ffb8547a..904942fa 100644
--- a/templates/includes/javascripts.hbs
+++ b/templates/includes/javascripts.hbs
@@ -1,14 +1,12 @@
-
-
+
{{#live}}{{/live}}
-
+
-
{{#if site.analytics.google_site_id}}
From 6a3bfae62cf20640f73e0a4d19bde88749d7e0d7 Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: Wed, 8 Nov 2017 23:18:10 +0800
Subject: [PATCH 09/20] =?UTF-8?q?=E5=8F=98=E9=87=8F=E6=A8=A1=E5=9D=97?=
=?UTF-8?q?=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/features/variables.md | 80 +++++++++++++++++------------------
1 file changed, 39 insertions(+), 41 deletions(-)
diff --git a/content/features/variables.md b/content/features/variables.md
index 7d5cd406..01619332 100644
--- a/content/features/variables.md
+++ b/content/features/variables.md
@@ -2,11 +2,11 @@
title: Variables
---
-> Control commonly used values in a single location.
+> 将常用的属性值提取出来。
-### Overview
+### 1.概述
-It's not uncommon to see the same value repeated dozens _if not hundreds of times_ across your stylesheets:
+在样式表中看到相同的属性值重复许多次_甚至上百次_,这并不是罕见的情况:
```css
a,
@@ -19,14 +19,14 @@ a,
}
```
-Variables make your code easier to maintain by giving you a way to control those values from a single location:
+使用变量将这些属性值提取到一个地方会使代码变得更易于维护:
```less
-// Variables
-@link-color: #428bca; // sea blue
+// 定义变量
+@link-color: #428bca; // 海蓝色
@link-color-hover: darken(@link-color, 10%);
-// Usage
+// 使用方法
a,
.link {
color: @link-color;
@@ -40,27 +40,26 @@ a:hover {
}
```
-### Variable Interpolation
+### 2.变量插补
-The examples above focused on using variables to control _values in CSS rules_, but they can also be used in other places as well, such as selector names, property names, URLs and `@import` statements.
+上面例子中,着重于使用变量提取_CSS规则中的属性值_,其实变量也可以在其他地方使用,例如选择器名称,URL,以及"@ import"语句。
-
-#### Selectors
+#### 2-1.选择器
Version: 1.4.0
```less
-// Variables
+// 定义变量
@my-selector: banner;
-// Usage
+// 使用方法
.@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
```
-Compiles to:
+编译为:
```css
.banner {
@@ -70,38 +69,38 @@ Compiles to:
}
```
-### URLs
+### 3.URLs
```less
-// Variables
+// 定义变量
@images: "../img";
-// Usage
+// 使用方法
body {
color: #444;
background: url("@{images}/white-sand.png");
}
```
-#### Import Statements
+#### 3-1.声明import
Version: 1.4.0
-Syntax: `@import "@{themes}/tidal-wave.less";`
+语法: `@import "@{themes}/tidal-wave.less";`
-Note that before v2.0.0, only variables which have been declared in the root or current scope were considered and that only the current file and calling files were considered when looking for a variable.
+请注意,在v2.0.0之前,只允许在根目录或当前作用域内声明的变量,并且只能在当前文件和调用文件中查找变量。
-Example:
+例如:
```less
-// Variables
+// 定义变量
@themes: "../../src/themes";
-// Usage
+// 使用方法
@import "@{themes}/tidal-wave.less";
```
-#### Properties
+#### 3-2.属性
Version: 1.6.0
@@ -114,7 +113,7 @@ Version: 1.6.0
}
```
-Compiles to:
+编译为:
```css
.widget {
@@ -123,9 +122,9 @@ Compiles to:
}
```
-### Variable Names
+### 4.变量名定义
-It is also possible to define variables with a variable name:
+也可以使用一个变量来定义变量名称:
```less
@fnord: "I am fnord.";
@@ -133,7 +132,7 @@ It is also possible to define variables with a variable name:
content: @@var;
```
-Which compiles to:
+编译为:
```
content: "I am fnord.";
@@ -141,11 +140,11 @@ content: "I am fnord.";
-### Lazy Evaluation
+### 5.惰性加载
-> Variables are lazy evaluated and do not have to be declared before being used.
+> 变量可以惰性加载,不必在使用之前进行声明。
-Valid Less snippet:
+合法的Less语法:
```less
.lazy-eval {
@@ -155,7 +154,7 @@ Valid Less snippet:
@var: @a;
@a: 9%;
```
-this is valid Less too:
+同样合法:
```less
.lazy-eval-scope {
@@ -166,7 +165,7 @@ this is valid Less too:
@var: @a;
@a: 100%;
```
-both compile into:
+都会被编译为:
```css
.lazy-eval-scope {
@@ -174,9 +173,8 @@ both compile into:
}
```
-When defining a variable twice, the last definition of the variable is used, searching from the current scope upwards. This is similar to CSS itself where the last property inside a definition is used to determine the value.
-
-For instance:
+当同一个变量被定义两次,第二次定义的变量将会生效,并从当前作用域开始向上查找,这与CSS中定义的最后一个属性值会被使用的规则类似。
+例如:
```less
@var: 0;
@@ -190,7 +188,7 @@ For instance:
one: @var;
}
```
-Compiles to:
+编译为:
```css
.class {
@@ -201,9 +199,9 @@ Compiles to:
}
```
-### Default Variables
+### 6.变量默认值
-We sometimes get requests for default variables - an ability to set a variable only if it is not already set. This feature is not required because you can easily override a variable by putting the definition afterwards.
+我们有时候会需要设置变量默认值 - 只有变量在尚未使用的情况下才能设置。 此功能不是必需的,因为你可以地通过之后的定义来覆盖默认变量。
For instance:
@@ -212,9 +210,9 @@ For instance:
@base-color: green;
@dark-color: darken(@base-color, 10%);
-// use of library
+// 使用library
@import "library.less";
@base-color: red;
```
-This works fine because of [Lazy Loading](#variables-feature-lazy-loading) - base-color is overridden and dark-color is a dark red.
+其原作机制是因为 [惰性加载](#variables-feature-lazy-loading) - base-color 会被覆盖 and dark-color 将会是深红色。
From 4a383066a58d81ac541a3af72148c8f7bb8398c6 Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: 2017年11月13日 23:22:37 +0800
Subject: [PATCH 10/20] =?UTF-8?q?=E6=A6=82=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/features-overview.md | 39 ++++++++++++++++-----------------
data/features.yml | 6 ++---
templates/features.hbs | 4 ++--
templates/includes/nav-main.hbs | 4 ++--
4 files changed, 26 insertions(+), 27 deletions(-)
diff --git a/content/features-overview.md b/content/features-overview.md
index f8fc664c..c7f1e6ee 100644
--- a/content/features-overview.md
+++ b/content/features-overview.md
@@ -2,12 +2,11 @@
title: Features Overview
---
-> As an extension to CSS, Less is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS.
+> Less作为CSS的扩展,不仅向下兼容CSS,而且Less是在现有CSS语法基础上增添的额外特性,这使Less更容易上手,如果有疑问,可以回退的普通的CSS。
+### 1.变量
-### Variables
-
-These are pretty self-explanatory:
+变量看上去就一目了然:
```less
@nice-blue: #5B83AD;
@@ -18,7 +17,7 @@ These are pretty self-explanatory:
}
```
-Outputs:
+输出为:
```css
#header {
@@ -26,12 +25,12 @@ Outputs:
}
```
-Note that variables are actually "constants" in that they can only be defined once.
+请注意,变量实际上是"常量",因为它们只能被定义一次。
-### Mixins
+### 2.混合
-Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set. So say we have the following class:
+混合是一种将一个规则集中包含("混入")一组属性插入到另一个规则集的方法。 比如说有以下class:
```css
.bordered {
@@ -40,7 +39,7 @@ Mixins are a way of including ("mixing in") a bunch of properties from one rule-
}
```
-And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:
+我们希望在其他规则集中使用这些属性。 那么,我们只需要将我们想要放入其中的规则集的class名称放入,就像这样:
```less
#menu a {
@@ -54,17 +53,17 @@ And we want to use these properties inside other rule-sets. Well, we just have t
}
```
-The properties of the `.bordered` class will now appear in both `#menu a` and `.post a`. (Note that you can also use `#ids` as mixins.)
+".bordered" 这个class的属性现在将出现在"#menu a"和".post a"中。 (请注意,您也可以使用`#ids`作为混合。)
-**Learn more**
+**了解更多**
-* [More about mixins](#mixins-feature)
-* [Parametric Mixins](#mixins-parametric-feature)
+* [更多混合相关](#mixins-feature)
+* [参数混合](#mixins-parametric-feature)
-### Nested Rules
+### 3.嵌套规则
-Less gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS:
+Less使您能够使用嵌套代替CSS中逐级书写。 假设我们有以下CSS:
```css
#header {
@@ -78,7 +77,7 @@ Less gives you the ability to use nesting instead of, or in combination with cas
}
```
-In Less, we can also write it this way:
+我们可以使用Less这样书写:
```less
#header {
@@ -92,9 +91,9 @@ In Less, we can also write it this way:
}
```
-The resulting code is more concise, and mimics the structure of your HTML.
+模仿HTML的结构,使代码更加简洁。
-You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin (`&` represents the current selector parent):
+你也可以使用这种方法将伪选择器与混合捆绑在一起。这是经典的clearfix hack,用混合重写(`&`代表当前的父选择器):
```less
.clearfix {
@@ -112,9 +111,9 @@ You can also bundle pseudo-selectors with your mixins using this method. Here's
}
```
-**See also**
+**参见**
-* [Parent Selectors](#parent-selectors-feature)
+* [父选择器](#parent-selectors-feature)
### Nested Directives and Bubbling
diff --git a/data/features.yml b/data/features.yml
index b6bcb4df..994bae13 100644
--- a/data/features.yml
+++ b/data/features.yml
@@ -12,16 +12,16 @@ base: content/features
# Published documenation
published:
features-overview:
- title: Overview
+ title: 概览
lead: Simple overview of the basic features
files: content/features-overview.md
variables:
- title: Variables
+ title: 变量
files: <%= features.base %>/variables.md
extend:
- title: Extend
+ title: 继承
files: <%= features.base %>/extend.md
mixins:
diff --git a/templates/features.hbs b/templates/features.hbs
index e5c91781..8a8abb99 100644
--- a/templates/features.hbs
+++ b/templates/features.hbs
@@ -1,6 +1,6 @@
---
-title: Language Features
-lead: Features of the Less language
+title: 语言特性
+lead: Less的语言特性
slug: features
---
diff --git a/templates/includes/nav-main.hbs b/templates/includes/nav-main.hbs
index 6da04d8f..5d6775ef 100644
--- a/templates/includes/nav-main.hbs
+++ b/templates/includes/nav-main.hbs
@@ -15,11 +15,11 @@
{{/is}}
{{#is links.plugins true}}
From cdd066b3b94e1917b0c03a7260a65534d98485cb Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: Mon, 4 Dec 2017 14:22:37 +0800
Subject: [PATCH 11/20] =?UTF-8?q?extend=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/features/extend.md | 225 ++++++++++++++++++-------------------
content/home/using-less.md | 2 +-
2 files changed, 113 insertions(+), 114 deletions(-)
diff --git a/content/features/extend.md b/content/features/extend.md
index 783e0d12..2be3b3bf 100644
--- a/content/features/extend.md
+++ b/content/features/extend.md
@@ -1,6 +1,6 @@
-> Extend is a Less pseudo-class which merges the selector it is put on with ones that match what it references.
+> Extend是Less的一个伪类,它会把所选择的选择器与它所引用的选择器进行合并。
-Released [v1.4.0]({{ less.master.url }}CHANGELOG.md)
+发布[v1.4.0]({{ less.master.url }}CHANGELOG.md)
```less
nav ul {
@@ -9,9 +9,9 @@ nav ul {
}
```
-In the rule set above, the `:extend` selector will apply the "extending selector" (`nav ul`) onto the `.inline` class _wherever the `.inline` class appears_. The declaration block will be kept as-is, but without any reference to the extend (because extend isn't css).
+在上面的规则集中,`:extend`选择器会将"扩展选择器"(`nav ul`)应用到 `.inline` class _出现的 `.inline` class中_ 。 声明块将保持原样,并不会直接添加extend中的属性(因为extend不是css)
-So the following:
+如下:
```less
nav ul {
@@ -23,7 +23,7 @@ nav ul {
}
```
-Outputs
+编译为
```css
nav ul {
@@ -35,17 +35,17 @@ nav ul {
}
```
-Notice how the `nav ul:extend(.inline)` selector gets output as `nav ul` - the extend gets removed before output and the selector block left as-is. If no properties are put in that block then it gets removed from the output (but the extend still may affect other selectors).
+注意`nav ul:extend(.inline)`选择器如何在保持还是`nav ul`时输出结果 - 在输出之前将extend移除,而选择器块保持原样。 如果没有任何属性放在该块中,则会从输出中移除(但extend仍然可能会影响其他选择器)。
-### Extend Syntax
-The extend is either attached to a selector or placed into a ruleset. It looks like a pseudo-class with selector parameter optionally followed by the keyword `all`:
+### 1.Extend 语法
+extend要么附加到选择器,要么放在规则集中。 它看起来像一个带有选择器参数的伪类,可搭配关键字`all`:
-Example:
+例子:
```less
.a:extend(.b) {}
-// the above block does the same thing as the below block
+// 上面和下面的会得到同样的结果。
.a {
&:extend(.b);
}
@@ -53,48 +53,48 @@ Example:
```less
.c:extend(.d all) {
- // extends all instances of ".d" e.g. ".x.d" or ".d.x"
+ // extend ".d"的所有实例,例如 ".x.d"或".d.x"。
}
.c:extend(.d) {
- // extends only instances where the selector will be output as just ".d"
+ // ".d"仅继承实例将被输出为".d"的选择器。
}
```
-It can contain one or more classes to extend, separated by commas.
+可以继承包含一个或多个类,以逗号分隔。
-Example:
+例如:
```less
.e:extend(.f) {}
.e:extend(.g) {}
-// the above an the below do the same thing
+// 上面和下面的将会得到同样的结果。
.e:extend(.f, .g) {}
```
-### Extend Attached to Selector
-Extend attached to a selector looks like an ordinary pseudo-class with selector as a parameter. A selector can contain multiple extend clauses, but all extends must be at the end of the selector.
+### 2.Extend 附加到选择器
+Extend附加到选择器看起来像一个普通的伪类带选择器作为参数。 一个选择器可以包含多个extend子句,但所有的extend必须在选择器的末尾。
-* Extend after the selector: `pre:hover:extend(div pre)`.
-* Space between selector and extend is allowed: `pre:hover :extend(div pre)`.
-* Multiple extends are allowed: `pre:hover:extend(div pre):extend(.bucket tr)` - Note this is the same as `pre:hover:extend(div pre, .bucket tr)`
-* This is NOT allowed: `pre:hover:extend(div pre).nth-child(odd)`. Extend must be last.
+* 在选择器之后Extend: `pre:hover:extend(div pre)`.
+* 选择器和Extend之间允许有空格: `pre:hover :extend(div pre)`.
+* 运行多个Extend: `pre:hover:extend(div pre):extend(.bucket tr)` - 请注意,这是相同的 `pre:hover:extend(div pre, .bucket tr)`
+* 这是不允许的: `pre:hover:extend(div pre).nth-child(odd)`. Extend必须在末尾。
-If a ruleset contains multiple selectors, any of them can have the extend keyword. Multiple selectors with extend in one ruleset:
+如果一个规则集包含多个Extend,它们中的任何一个都可以有个Extend关键字。 多个带有Extend的选择器在一个规则集中:
```less
.big-division,
.big-bag:extend(.bag),
.big-bucket:extend(.bucket) {
- // body
+ // 主体
}
```
-### Extend Inside Ruleset
-Extend can be placed into a ruleset's body using `&:extend(selector)` syntax. Placing extend into a body is a shortcut for placing it into every single selector of that ruleset.
+### 3.Extend 在规则集中
+Extend 可以被放在一个规则集的主体中通过使用 `&:extend(selector)` 语法。将Extend放到主体中就是将其放到该规则集的每个选择器中的快捷方式。
-Extend inside a body:
+Extend 在一个主体中:
```less
pre:hover,
@@ -103,27 +103,27 @@ pre:hover,
}
```
-is exactly the same as adding an extend after each selector:
+与每个选择器之后添加Extend完全相同:
```less
pre:hover:extend(div pre),
.some-class:extend(div pre) {}
```
-### Extending Nested Selectors
-Extend is able to match nested selectors. Following less:
+### 4.Extend 嵌套选择器
+Extend能够匹配嵌套的选择器。 如下:
-Example:
+例子:
```less
.bucket {
- tr { // nested ruleset with target selector
+ tr { // 与目标选择器嵌套的规则集
color: blue;
}
}
-.some-class:extend(.bucket tr) {} // nested ruleset is recognized
+.some-class:extend(.bucket tr) {} // 嵌套的规则集被识别
```
-Outputs
+编译为
```css
.bucket tr,
@@ -132,20 +132,20 @@ Outputs
}
```
-Essentially the extend looks at the compiled css, not the original less.
+Extend本质上接受的是编译后的CSS,而不是原始的Less。
-Example:
+例如:
```less
.bucket {
- tr & { // nested ruleset with target selector
+ tr & { // 与目标选择器嵌套的规则集
color: blue;
}
}
-.some-class:extend(tr .bucket) {} // nested ruleset is recognized
+.some-class:extend(tr .bucket) {} // 嵌套的规则集被识别
```
-Outputs
+编译为
```css
tr .bucket,
@@ -155,10 +155,10 @@ tr .bucket,
```
-### Exact Matching with Extend
-Extend by default looks for exact match between selectors. It does matter whether selector uses leading star or not. It does not matter that two nth-expressions have the same meaning, they need to have to same form in order to be matched. The only exception are quotes in attribute selector, less knows they have the same meaning and matches them.
+### 5.Extend 精确匹配
+在默认情况下Extend会查找精确匹配到的选择器。 无论选择者器是否使用通配符`*`,或者两个nth表达式是否具有相同的含义,它们都需要具有相同的形式才能被匹配。 唯一的例外是属性选择器中的单引号和双引号,less知道它们具有相同的含义并会匹配它们。
-Example:
+例如:
```less
.a.class,
@@ -166,19 +166,19 @@ Example:
.class> .a {
color: blue;
}
-.test:extend(.class) {} // this will NOT match the any selectors above
+.test:extend(.class) {} // 以上选择器都不会被匹配
```
-Leading star does matter. Selectors `*.class` and `.class` are equivalent, but extend will not match them:
+带通配符不会被匹配。 虽然 `*.class` 和 `.class` 是一样的效果, 但是 extend 不会匹配它们:
```less
*.class {
color: blue;
}
-.noStar:extend(.class) {} // this will NOT match the *.class selector
+.noStar:extend(.class) {} // *.class 将不会被匹配
```
-Outputs
+编译为
```css
*.class {
@@ -186,7 +186,7 @@ Outputs
}
```
-Order of pseudo-classes does matter. Selectors `link:hover:visited` and `link:visited:hover` match the same set of elements, but extend treats them as different:
+伪类的顺序很重要。选择器 `link:hover:visited` 和 `link:visited:hover` 会匹配相同的一组元素,但是对于extend,它们是不同的:
```less
link:hover:visited {
@@ -194,7 +194,7 @@ link:hover:visited {
}
.selector:extend(link:visited:hover) {}
```
-Outputs
+编译为
```css
link:hover:visited {
@@ -202,9 +202,9 @@ link:hover:visited {
}
```
-### nth Expression
+### 6.nth 表达式
-Nth expression form does matter. Nth-expressions `1n+3` and `n+3` are equivalent, but extend will not match them:
+Nth 表达形式很重要。 Nth表达式 `1n+3` 和 `n+3`是一样的效果,但是 extend 不会匹配它们:
```less
:nth-child(1n+3) {
@@ -212,7 +212,7 @@ Nth expression form does matter. Nth-expressions `1n+3` and `n+3` are equivalent
}
.child:extend(:nth-child(n+3)) {}
```
-Outputs
+编译为
```css
:nth-child(1n+3) {
@@ -220,7 +220,7 @@ Outputs
}
```
-Quote type in attribute selector does not matter. All of the following are equivalent.
+在属性选择器中的引号为''或""或为空都没有关系。 以上它们都是一样的效果:
```less
[title=identifier] {
@@ -237,7 +237,7 @@ Quote type in attribute selector does not matter. All of the following are equiv
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}
```
-Outputs
+编译为
```css
[title=identifier],
@@ -262,11 +262,11 @@ Outputs
}
```
-### Extend "all"
+### 7.Extend "all"
-When you specify the all keyword last in an extend argument it tells Less to match that selector as part of another selector. The selector will be copied and the matched part of the selector only will then be replaced with the extend, making a new selector.
+当使用关键字all在extend参数的最后时,Less会将其作为另一个选择器的一部分匹配该选择器。选择器将被复制,只有选择器匹配部分将被替换为extend,同时创建一个新的选择器。
-Example:
+例如:
```less
.a.b.test,
@@ -282,7 +282,7 @@ Example:
.replacement:extend(.test all) {}
```
-Outputs
+编译为
```css
.a.b.test,
@@ -297,35 +297,35 @@ Outputs
}
```
-_You can think of this mode of operation as essentially doing a non-destructive search and replace._
+_你可以把这种操作模式看作是一个非破坏性的搜索和替换。_
-### Selector Interpolation with Extend
-> Extend is NOT able to match selectors with variables. If selector contains variable, extend will ignore it.
+### 8.选择器中插入Extend
+> Extend 不能匹配带变量的选择器. 如果选择器中带有变量, 将会被extend忽略。
-There is a pending feature request for this but it is not an easy change. However, extend can be attached to interpolated selector.
+有一个悬而未决的提案,同时也不会轻易改变。 但是,extend可以附加到被插值的选择器。
-Selector with variable will not be matched:
+带变量的选择器将不会被匹配:
```less
@variable: .bucket;
-@{variable} { // interpolated selector
+@{variable} { // 被插值的选择器
color: blue;
}
-.some-class:extend(.bucket) {} // does nothing, no match is found
+.some-class:extend(.bucket) {} // 不会被匹配
```
-and extend with variable in target selector matches nothing:
+同时在目标选择器中使用变量也不会被extend匹配到:
```less
.bucket {
color: blue;
}
-.some-class:extend(@{variable}) {} // interpolated selector matches nothing
+.some-class:extend(@{variable}) {} // 被插值的选择器不会被匹配
@variable: .bucket;
```
-Both of the above examples compile into:
+上述两个例子都编译成:
```less
.bucket {
@@ -333,7 +333,7 @@ Both of the above examples compile into:
}
```
-However, `:extend` attached to an interpolated selector works:
+然而, `:extend` 附加到一个被插值得选择器上是可以有效的:
```less
.bucket {
@@ -343,7 +343,7 @@ However, `:extend` attached to an interpolated selector works:
@variable: .selector;
```
-compiles to:
+编译为
```less
.bucket, .selector {
@@ -351,133 +351,132 @@ compiles to:
}
```
-### Scoping / Extend Inside @media
+### 9.作用于 / 在@media中使用Extend
-Extend written inside a media declaration should match only selectors inside the same media declaration:
+在媒体查询中声明Extend只匹配同一媒体查询中的选择器:
```less
@media print {
- .screenClass:extend(.selector) {} // extend inside media
- .selector { // this will be matched - it is in the same media
+ .screenClass:extend(.selector) {} // 在@media中使用Extend
+ .selector { // 会被匹配 - 在同一个媒体查询中
color: black;
}
}
-.selector { // ruleset on top of style sheet - extend ignores it
+.selector { // 规则集在样式表的顶部 - extend会忽略它
color: red;
}
@media screen {
- .selector { // ruleset inside another media - extend ignores it
+ .selector { // 规则集在另一个媒体查询中 - extend会忽略它
color: blue;
}
}
```
-compiles into:
+编译为
```css
@media print {
.selector,
- .screenClass { /* ruleset inside the same media was extended */
+ .screenClass { /* 在同一个媒体查询中的规则集将会被集成 */
color: black;
}
}
-.selector { /* ruleset on top of style sheet was ignored */
+.selector { /* 规则集在样式表的顶部被忽略 */
color: red;
}
@media screen {
- .selector { /* ruleset inside another media was ignored */
+ .selector { /* 规则集在另一个媒体查询中被忽略 */
color: blue;
}
}
```
-Extend written inside a media declaration does not match selectors inside nested declaration:
+Extend在媒体查询中不会匹配媒体查询中嵌套的选择器:
```less
@media screen {
- .screenClass:extend(.selector) {} // extend inside media
- @media (min-width: 1023px) {
- .selector { // ruleset inside nested media - extend ignores it
+ .screenClass:extend(.selector) {} // extend在媒体查询中
+ .selector { //规则集在媒体查询的嵌套中- extend会忽略它
color: blue;
}
}
}
```
-compiles into:
+编译为
```css
@media screen and (min-width: 1023px) {
- .selector { /* ruleset inside another nested media was ignored */
+ .selector { /* 规则集在另一个媒体查询的嵌套中,会被忽略 */
color: blue;
}
}
```
-Top level extend matches everything including selectors inside nested media:
+顶级的extend会匹配包括嵌套在媒体查询内的所有选择器:
```less
@media screen {
- .selector { /* ruleset inside nested media - top level extend works */
+ .selector { /* 规则集嵌套在媒体查询中 - 顶级 extend 有效 */
color: blue;
}
@media (min-width: 1023px) {
- .selector { /* ruleset inside nested media - top level extend works */
+ .selector { /* 规则集嵌套在媒体查询中 - 顶级 extend 有效 */
color: blue;
}
}
}
-.topLevel:extend(.selector) {} /* top level extend matches everything */
+.topLevel:extend(.selector) {} /* 顶级 extend都会匹配 */
```
-compiles into:
+编译为
```css
@media screen {
.selector,
- .topLevel { /* ruleset inside media was extended */
+ .topLevel { /* 在媒体查询中的规则集会被继承 */
color: blue;
}
}
@media screen and (min-width: 1023px) {
.selector,
- .topLevel { /* ruleset inside nested media was extended */
+ .topLevel { /* 在媒体查询中的规则集会被继承 */
color: blue;
}
}
```
-### Duplication Detection
+### 10.重复检测
-Currently there is no duplication detection.
+目前没有重复检测。
-Example:
+例如:
```less
.alert-info,
.widget {
- /* declarations */
+ /* 声明 */
}
.alert:extend(.alert-info, .widget) {}
```
-Outputs
+编译为
```css
.alert-info,
.widget,
.alert,
.alert {
- /* declarations */
+ /* 声明 */
}
```
-### Use Cases for Extend
+### 11.Extend用例
-#### Classic Use Case
+#### 11.1经典用例
-The classic use case is to avoid adding a base class. For example, if you have
+其中一个经典用例是避免添加一个基本class。 例如:
```css
.animal {
@@ -486,7 +485,7 @@ The classic use case is to avoid adding a base class. For example, if you have
}
```
-and you want to have a subtype of animal which overrides the background color then you have two options, firstly change your HTML
+你希望有一个animal子类型并覆盖其背景颜色,那么你有两个选择,首先,一种是改变你的HTML
```html
Bear
@@ -501,7 +500,7 @@ and you want to have a subtype of animal which overrides the background color th
}
```
-or have simplified html and use extend in your less. e.g.
+或着简化HTML和在Less中使用Extend。 例如:
```html
Bear
@@ -518,11 +517,11 @@ or have simplified html and use extend in your less. e.g.
}
```
-#### Reducing CSS Size
+#### 11.2减少CSS大小
-Mixins copy all of the properties into a selector, which can lead to unnecessary duplication. Therefore you can use extends instead of mixins to move the selector up to the properties you wish to use, which leads to less CSS being generated.
+Mixins会将所有的属性复制到一个选择器,这可能会导致不必要的重复。 因此,可以使用Extend替代Mixins,将选择器移动到希望使用的属性上,这样会生成较少的CSS。
-Example - with mixin:
+例子 - 使用 Mixin:
```less
.my-inline-block() {
@@ -537,7 +536,7 @@ Example - with mixin:
}
```
-Outputs
+输出为
```css
.thing1 {
@@ -550,7 +549,7 @@ Outputs
}
```
-Example (with extends):
+例子 - 使用 Extend:
```less
.my-inline-block {
@@ -565,7 +564,7 @@ Example (with extends):
}
```
-Outputs
+编译为
```css
.my-inline-block,
@@ -576,17 +575,17 @@ Outputs
}
```
-#### Combining Styles / A More Advanced Mixin
+#### 11.3样式组合 / 更先进的 Mixin
-Another use-case is as an alternative for a mixin - because mixins can only be used with simple selectors, if you have two different blocks of html, but need to apply the same styles to both you can use extends to relate two areas.
+还有一个用例是替代mixin - 因为mixins只能与简单的选择器一起使用,如果你有两个不同的html块,但是需要使用相同的样式,你可以使用extends来关联两个区域。
-Example:
+例如:
```less
li.list> a {
- // list styles
+ // list 样式
}
button.list-style {
- &:extend(li.list> a); // use the same list styles
+ &:extend(li.list> a); // 使用同样的 list 样式
}
```
diff --git a/content/home/using-less.md b/content/home/using-less.md
index dddf5257..a4e76927 100644
--- a/content/home/using-less.md
+++ b/content/home/using-less.md
@@ -95,7 +95,7 @@ This will compile styles.less file and save the result to styles.css file. The o
> 在浏览器中使用less.js对开发很有帮助, 但不推荐用于生产环境
-客户端是最简单的Less入门方式,适用于开发, 但在生产环境, 重要的是性能和可靠性, _我们建议使用node.js或其他第三方工具来预编译_。
+客户端安装是Less最简单的安装方式,不过这种方式只适用于开发环境,因为在生产环境中,系统的性能和可靠性尤为重要, _所以我们建议使用node.js或其他第三方工具来预编译_。
首先,通过将`rel`属性设置为"`stylesheet/less`"来连接你的 `.less` 样式表:
From 71508ca0a0813861c1a1a78805d13d77f5a88793 Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: Wed, 6 Dec 2017 17:33:16 +0800
Subject: [PATCH 12/20] =?UTF-8?q?mixin=E5=92=8C=E6=A6=82=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/features-overview.md | 96 ++++++++++++++-------------
content/features/import-directives.md | 4 +-
content/features/mixins.md | 52 +++++++--------
data/features.yml | 14 ++--
4 files changed, 84 insertions(+), 82 deletions(-)
diff --git a/content/features-overview.md b/content/features-overview.md
index c7f1e6ee..d815fa0d 100644
--- a/content/features-overview.md
+++ b/content/features-overview.md
@@ -115,11 +115,11 @@ Less使您能够使用嵌套代替CSS中逐级书写。 假设我们有以下CSS
* [父选择器](#parent-selectors-feature)
-### Nested Directives and Bubbling
+### 4.嵌套指令和冒泡
-Directives such as `media` or `keyframe` can be nested in the same way as selectors. Directive is placed on top and relative order against other elements inside the same ruleset remains unchanged. This is called bubbling.
+像"media"或"keyframe"这样的指令可以像选择器一样嵌套。 指令放置在顶部,相对于同一规则集内其他元素的相对顺序保持不变。 这叫做冒泡。
-Conditional directives e.g. `@Media`, `@supports` and `@document` have also selectors copied into their bodies:
+条件指令,例如 `@ Media`,`@ supports`和`@ document`选择器会被复制到它们的主体中:
```less
.screen-color {
@media screen {
@@ -134,7 +134,7 @@ Conditional directives e.g. `@Media`, `@supports` and `@document` have also sele
}
```
-outputs:
+编译为
```css
@media screen {
@@ -154,7 +154,7 @@ outputs:
}
```
-Remaining non-conditional directives, for example `font-face` or `keyframes`, are bubbled up too. Their bodies do not change:
+其他的非条件指令,例如`font-face`或`keyframes`,也会冒泡。 它们的主体不会改变:
```less
#a {
color: blue;
@@ -165,7 +165,7 @@ Remaining non-conditional directives, for example `font-face` or `keyframes`, ar
}
```
-outputs:
+编译为
```less
#a {
@@ -179,44 +179,44 @@ outputs:
}
```
-### Operations
+### 5.运算
-Arithmetical operations `+`, `-`, `*`, `/` can operate on any number, color or variable. If it is possible, mathematical operations take units into account and convert numbers before adding, subtracting or comparing them. The result has leftmost explicitly stated unit type. If the conversion is impossible or not meaningful, units are ignored. Example of impossible conversion: px to cm or rad to %.
+算术运算`+`,```,*`,`/`可以在任何数字,颜色或变量上运行。 数学运算会尽可能将单位考虑在内并在加,减或比较之前转换为数字。 结果最左边明确指出的单位类型。 如果是无意义或无效的转换,则单位被忽略。 无法转换的示例:px到cm或rad到%。
```less
-// numbers are converted into the same units
-@conversion-1: 5cm + 10mm; // result is 6cm
-@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm
+// 数字运算被转换成相同的单位
+@conversion-1: 5cm + 10mm; // 结果为 6cm
+@conversion-2: 2 - 3cm - 5mm; // 结果为 -1.5cm
-// conversion is impossible
-@incompatible-units: 2 + 5px - 3cm; // result is 4px
+// 无效的转换
+@incompatible-units: 2 + 5px - 3cm; // 结果为 4px
-// example with variables
+// 带变量的例子
@base: 5%;
-@filler: @base * 2; // result is 10%
-@other: @base + @filler; // result is 15%
+@filler: @base * 2; // 结果为 10%
+@other: @base + @filler; // 结果为 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将按原样操作数字,并将明确指定的单位类型分配给结果。
```less
-@base: 2cm * 3mm; // result is 6cm
+@base: 2cm * 3mm; // 结果是 6cm
```
-Colors are split into their red, green, blue and alpha dimensions. The operation is applied to each color dimension separately. E.g., if the user added two colors, then the green dimension of the result is equal to sum of green dimensions of input colors. If the user multiplied a color by a number, each color dimension will get multiplied.
+颜色分为红色,绿色,蓝色和alpha值。 该操作分别应用于每个颜色维度。 例如,如果用户添加了两种颜色,则结果的绿色维度等于输入颜色的绿色维度的总和。 如果用户乘以一个数字的颜色,则每个颜色尺寸将相乘。
-Note: arithmetic operation on alpha is not defined, because math operation on colors do not have standard agreed upon meaning. Do not rely on current implemention as it [may change](https://github.com/less/less.js/issues/2694) in later versions.
+注意:没有定义对alpha的算术运算,因为对颜色的数学运算没有标准的约定意义。 不要依赖当前的实现,因为它可能会在更高版本中[更改](https://github.com/less/less.js/issues/2694)。
-An operation on colors always produces valid color. If some color dimension of the result ends up being bigger than `ff` or smaller than `00`, the dimension is rounded to either `ff` or `00`. If alpha ends up being bigger than `1.0` or smaller than `0.0`, the alpha is rounded to either `1.0` or `0.0`.
+对颜色的操作总是产生有效的颜色。 如果结果的某个颜色尺寸大于`ff`或小于`00`,那么这个尺寸被舍入为`ff`或`00`。 如果alpha结果大于`1.0`或小于`0.0`,则alpha被舍入为`1.0`或`0.0`。
```less
-@color: #224488 / 2; //results in #112244
-background-color: #112244 + #111; // result is #223355
+@color: #224488 / 2; //结果为 #112244
+background-color: #112244 + #111; // 结果为 #223355
```
-### Escaping
+### 6.转义
-Escaping allows you to use any arbitrary string as property or variable value. Anything inside `~"anything"` or `~'anything'` is used as is with no changes except [interpolation](#variables-feature-variable-interpolation).
+转义允许您使用任何任意字符串作为属性或变量值。 任何`~`或`~`任何内容都可以按照原样使用,除了[插值](#variables-feature-variable-interpolation)之外没有任何变化。
```less
.weird-element {
@@ -231,29 +231,29 @@ results in:
}
```
-### Functions
+### 7.函数
-Less provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.
+Less提供变换颜色,操作字符串和数学运算的各种函数。 具体在函数参考表中有完整记录。
-Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:
+使用函数非常简单。 以下示例使用百分比来转换0.5到50%,将基本颜色的饱和度增加5%,然后将背景颜色设置为减少25%并旋转8度的颜色:
```less
@base: #f04615;
@width: 0.5;
.class {
- width: percentage(@width); // returns `50%`
+ width: percentage(@width); // 返回 `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
```
-### Namespaces and Accessors
+### 8.命名空间和访问器
-(Not to be confused with [CSS `@namespace`](http://www.w3.org/TR/css3-namespace/) or [namespace selectors](http://www.w3.org/TR/css3-selectors/#typenmsp)).
+(不要混淆 [CSS `@namespace`](http://www.w3.org/TR/css3-namespace/) 和 [命名空间选择器](http://www.w3.org/TR/css3-selectors/#typenmsp)).
-Sometimes, you may want to group your mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in Less, say you want to bundle some mixins and variables under `#bundle`, for later reuse or distributing:
+有时,为了组织结构,你可能想要分组你的mixins,或者只是提供一些封装。 你可以在Less中很直观地做到这一点,比如你想在`#bundle`下捆绑一些mixin和变量,以便以后重用或分发:
```less
#bundle {
@@ -270,7 +270,7 @@ Sometimes, you may want to group your mixins, for organizational purposes, or ju
}
```
-Now if we want to mixin the `.button` class in our `#header a`, we can do:
+现在,如果我们要在`#header a`中混入`.button`类,我们可以这样做:
```less
#header a {
@@ -281,9 +281,11 @@ Now if we want to mixin the `.button` class in our `#header a`, we can do:
Note that variables declared within a namespace will be scoped to that namespace only and will not be available outside of the scope via the same syntax that you would use to reference a mixin (`#Namespace> .mixin-name`). So, for example, you can't do the following: (`#Namespace> @this-will-not-work`).
-### Scope
+请注意,在名称空间中声明的变量将仅限于该名称空间,当你想引用一个mixin (`#Namespace> .mixin-name`),相同的语法在作用域之外将会失效。例如,你不能这样使用:(`#Namespace> @this-will-not-work`)。
-Scope in Less is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on.
+### 9.作用域
+
+Less中的作用域与编程语言非常相似。 首先在本地查找变量和mixin,如果找不到,编译器将查找父范围,依此类推。
```less
@var: red;
@@ -291,45 +293,45 @@ Scope in Less is very similar to that of programming languages. Variables and mi
#page {
@var: white;
#header {
- color: @var; // white
+ color: @var; // 白色
}
}
```
-Variables and mixins do not have to be declared before being used so the following Less code is identical to the previous example:
+变量和mixin在使用之前不必声明,所以下面的Less代码和前面的例子是一样的:
```less
@var: red;
#page {
#header {
- color: @var; // white
+ color: @var; // 白色
}
@var: white;
}
```
-**See also**
+**参见**
-* [Lazy Loading](#variables-feature-lazy-loading)
+* [懒加载](#variables-feature-lazy-loading)
-### Comments
+### 10.注释
-Both block-style and inline comments may be used:
+可以使用块式和行内式注释:
```less
-/* One hell of a block
-style comment! */
+/* 块式风格
+ 注释 */
@var: red;
-// Get in line!
+// 行内式注释!
@var: white;
```
-### Importing
+### 11.导入
-Importing works pretty much as expected. You can import a `.less` file, and all the variables in it will be available. The extension is optionally specified for `.less` files.
+导入非常便捷。 你可以导入一个`.less`文件,可以使用其中的所有变量。 默认扩展名为`.less`文件。
```css
@import "library"; // library.less
diff --git a/content/features/import-directives.md b/content/features/import-directives.md
index cf9b67cf..46d750ad 100644
--- a/content/features/import-directives.md
+++ b/content/features/import-directives.md
@@ -1,4 +1,4 @@
-> Import styles from other style sheets
+> 从其他样式表导入样式
In standard CSS, `@import` at-rules must precede all other types of rules. But Less doesn't care where you put `@import` statements.
@@ -29,7 +29,7 @@ Examples:
The following options can be used to override this behavior.
-# Import Options
+# import选项
> Less offers several extensions to the CSS `@import` CSS at-rule to provide more flexibility over what you can do with external files.
Syntax: `@import (keyword) "filename";`
diff --git a/content/features/mixins.md b/content/features/mixins.md
index ca435b18..c5d4102e 100644
--- a/content/features/mixins.md
+++ b/content/features/mixins.md
@@ -1,6 +1,6 @@
-> "mix-in" properties from existing styles
+> 从现有样式的"混入"属性
-You can mix-in class selectors and id selectors, e.g.
+您可以混入类选择器和ID选择器,例如
```less
.a, #b {
@@ -13,7 +13,7 @@ You can mix-in class selectors and id selectors, e.g.
#b();
}
```
-which results in:
+编译为
```css
.a, #b {
color: red;
@@ -26,17 +26,17 @@ which results in:
}
```
-Notice that when you call the mixin, the parentheses are optional.
+请注意,当您调用mixin时,括号是可选的。
```less
-// these two statements do the same thing:
+// 这两个写法效果相同:
.a();
.a;
```
-## Not Outputting the Mixin
+## 1.不输出Mixin
-If you want to create a mixin but you do not want that mixin to be output, you can put parentheses after it.
+如果你想创建一个mixin,但你不想要输出mixin本身,你可以在后面加上括号。
```less
.my-mixin {
@@ -50,7 +50,7 @@ If you want to create a mixin but you do not want that mixin to be output, you c
.my-other-mixin;
}
```
-outputs
+编译为
```css
.my-mixin {
@@ -62,11 +62,11 @@ outputs
}
```
-## Selectors in Mixins
+## 2.Mixins中的选择器
-Mixins can contain more than just properties, they can contain selectors too.
+Mixins不仅可以包含属性,还可以包含选择器。
-For example:
+例子:
```less
.my-hover-mixin() {
@@ -79,7 +79,7 @@ button {
}
```
-Outputs
+编译为
```css
button:hover {
@@ -87,9 +87,9 @@ button:hover {
}
```
-## Namespaces
+## 3.命名空间
-If you want to mixin properties inside a more complicated selector, you can stack up multiple id's or classes.
+如果你想在更复杂的选择器中混入属性,你可以堆叠多个id或类。
```less
#outer {
@@ -103,10 +103,10 @@ If you want to mixin properties inside a more complicated selector, you can stac
}
```
-and again both `>` and whitespace are optional
+ `>` 和空格是可选的
```less
-// all do the same thing
+// 全部都是同样的效果
#outer> .inner;
#outer> .inner();
#outer .inner;
@@ -115,9 +115,9 @@ and again both `>` and whitespace are optional
#outer.inner();
```
-One use of this is known as namespacing. You can put your mixins under a id selector and this makes sure it won't conflict with another library.
+这种使用称为命名空间。 你可以把你的mixin放在一个id选择器下,这样可以确保它不会和另一个库冲突。
-Example:
+例子:
```less
#my-library {
@@ -125,15 +125,15 @@ Example:
color: black;
}
}
-// which can be used like this
+// 可以这样使用
.class {
#my-library> .my-mixin();
}
```
-## Guarded Namespaces
+## 4.命名空间警戒
-If namespace have a guard, mixins defined by it are used only if guard condition returns true. Namespace guard is evaluated exactly the same way as guard on mixin, so next two mixins work the same way:
+如果名称空间有一个警戒,那么只有在警戒条件返回true的情况下才能使用定义的mixins。 命名空间警戒的评估方式与mixin上的警戒完全相同,所以接下来的两个mixin的工作方式相同:
```less
#namespace when (@mode=huge) {
@@ -145,7 +145,7 @@ If namespace have a guard, mixins defined by it are used only if guard condition
}
```
-The `default` function is assumed to have the same value for all nested namespaces and mixin. Following mixin is never evaluated, one of its guards is guaranteed to be false:
+对于所有嵌套的命名空间和mixin,`default`函数被假定为相同的值。 mixin从来没有被评估过,其中一个警戒保证是假的:
```less
#sp_1 when (default()) {
@@ -155,11 +155,11 @@ The `default` function is assumed to have the same value for all nested namespac
}
```
-## The `!important` keyword
+## 5.`!important` 关键词
-Use the `!important` keyword after mixin call to mark all properties inherited by it as `!important`:
+mixin调用后使用`!important`关键字来标记所有由它继承的属性为:`!important`:
-Example:
+例子:
```less
.foo (@bg: #f5f5f5, @color: #900) {
@@ -174,7 +174,7 @@ Example:
}
```
-Results in:
+编译为
```css
.unimportant {
diff --git a/data/features.yml b/data/features.yml
index 994bae13..540bfe8f 100644
--- a/data/features.yml
+++ b/data/features.yml
@@ -29,19 +29,19 @@ published:
files: <%= features.base %>/mixins.md
mixins-parametric:
- title: Parametric Mixins
+ title: Mixins参数
files: <%= features.base %>/mixins-parametric.md
mixins-as-functions:
- title: Mixins as Functions
+ title: Mixins函数
files: <%= features.base %>/mixins-as-functions.md
detached-rulesets:
- title: Passing Rulesets to Mixins
+ title: 将规则集传递给Mixins
files: <%= features.base %>/detached-rulesets.md
import-directives:
- title: Import Directives
+ title: import指令
files: <%= features.base %>/import-directives.md
mixin-guards:
@@ -53,15 +53,15 @@ published:
files: <%= features.base %>/css-guards.md
loops:
- title: Loops
+ title: 循环
files: <%= features.base %>/loops.md
merge:
- title: Merge
+ title: 合并
files: <%= features.base %>/merge.md
parent-selectors:
- title: Parent Selectors
+ title: 父选择器
files: <%= features.base %>/parent-selectors.md
From b020a1f7b1afd9c9b93f9474cd05dac029fe3ee0 Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: Wed, 6 Dec 2017 18:58:25 +0800
Subject: [PATCH 13/20] =?UTF-8?q?=E5=8F=82=E6=95=B0=E6=B7=B7=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/features/mixins-parametric.md | 100 +++++++++++++-------------
1 file changed, 49 insertions(+), 51 deletions(-)
diff --git a/content/features/mixins-parametric.md b/content/features/mixins-parametric.md
index cf54ff2f..e41bdc00 100644
--- a/content/features/mixins-parametric.md
+++ b/content/features/mixins-parametric.md
@@ -1,8 +1,8 @@
-> How to pass arguments to mixins
+> 如何将参数传递给mixin
-Mixins can also take arguments, which are variables passed to the block of selectors when it is mixed in.
+Mixins也可以使用参数,这些参数是在混入时传递给选择器块的变量。
-For example:
+例子:
```less
.border-radius(@radius) {
@@ -12,7 +12,7 @@ For example:
}
```
-And here's how we can mix it into various rulesets:
+下是我们如何将其混入到各种规则集中:
```less
#header {
@@ -23,7 +23,7 @@ And here's how we can mix it into various rulesets:
}
```
-Parametric mixins can also have default values for their parameters:
+mixin参数也可以设定默认值:
```less
.border-radius(@radius: 5px) {
@@ -33,7 +33,7 @@ Parametric mixins can also have default values for their parameters:
}
```
-We can invoke it like this now:
+我们现在可以像这样调用它:
```less
#header {
@@ -41,9 +41,9 @@ We can invoke it like this now:
}
```
-And it will include a 5px border-radius.
+border-radius将会为5px。
-You can also use parametric mixins which don't take parameters. This is useful if you want to hide the ruleset from the CSS output, but want to include its properties in other rulesets:
+你也可以使用不带参数的参数mixins。 如果您希望从CSS输出中隐藏规则集,但希望将其属性包含在其他规则集中,则这非常有用:
```less
.wrap() {
@@ -56,7 +56,7 @@ You can also use parametric mixins which don't take parameters. This is useful i
pre { .wrap }
```
-Which would output:
+编译为:
```css
pre {
@@ -67,17 +67,17 @@ pre {
}
```
-### Mixins with Multiple Parameters
-Parameters are either *semicolon* or *comma* separated. It is recommended to use *semicolon*. The symbol comma has double meaning: it can be interpreted either as a mixin parameters separator or css list separator.
+### 1.多参数Mixins
+参数是*分号*或*逗号*分隔。 建议使用*分号*。 逗号有双重含义:它可以被解释为混合参数分隔符或CSS列表分隔符。
-Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists:
+使用逗号作为mixin分隔符使得不能再用逗号作为参数创建分隔列表。 另一方面,如果编译器在mixin调用或声明中看到至少一个分号,则假定参数以分号分隔,并且所有逗号都属于css列表:
-* two arguments and each contains comma separated list: `.name(1, 2, 3; something, else)`,
-* three arguments and each contains one number: `.name(1, 2, 3)`,
-* use dummy semicolon to create mixin call with one argument containing comma separated css list: `.name(1, 2, 3;)`,
-* comma separated default value: `.name(@param1: red, blue;)`.
+* 两个参数,每个都包含逗号分隔列表: `.name(1, 2, 3; something, else)`,
+* 三个参数,每个包含一个数字: `.name(1, 2, 3)`,
+* 使用分号模拟创建一个包含逗号分隔的CSS列表参数的mixin调用: `.name(1, 2, 3;)`,
+* 逗号分隔默认值: `.name(@param1: red, blue;)`.
-It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply. If you used the mixin with one parameter e.g. `.mixin(green);`, then properties of all mixins with exactly one mandatory parameter will be used:
+定义多个具有相同名称和参数的mixin是合法的。 Less将使用所有可以用属性。 如果你用了一个参数的mixin `.mixin(green);`,那么将使用具有一个必需参数属性的mixin:
```less
.mixin(@color) {
@@ -96,8 +96,7 @@ It is legal to define multiple mixins with the same name and number of parameter
.mixin(#008000);
}
```
-
-compiles into:
+编译为
```css
.some .selector div {
@@ -107,9 +106,9 @@ compiles into:
}
```
-### Named Parameters
+### 2.命名参数
-A mixin reference can supply parameters values by their names instead of just positions. Any parameter can be referenced by its name and they do not have to be in any special order:
+一个mixin引用可以通过它们的名字来提供参数值,而不仅仅是位置。 任何参数都可以通过它的名字来引用,而且它们不需要特殊的顺序:
```less
.mixin(@color: black; @margin: 10px; @padding: 20px) {
@@ -124,7 +123,7 @@ A mixin reference can supply parameters values by their names instead of just po
.mixin(#efca44; @padding: 40px);
}
```
-compiles into:
+编译为
```css
.class1 {
@@ -139,9 +138,9 @@ compiles into:
}
```
-### The `@arguments` Variable
+### 3. `@arguments` 变量
-`@arguments` has a special meaning inside mixins, it contains all the arguments passed, when the mixin was called. This is useful if you don't want to deal with individual parameters:
+`@arguments` 在mixin中有一个特殊的含义,它包含所有传入的参数,当mixin被调用时。 如果您不想处理个别参数,这很有用:
```less
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
@@ -154,7 +153,7 @@ compiles into:
}
```
-Which results in:
+编译为:
```css
.big-block {
@@ -164,30 +163,30 @@ Which results in:
}
```
-### Advanced Arguments and the `@rest` Variable
+### 4.高级参数和`@rest`变量
-You can use `...` if you want your mixin to take a variable number of arguments. Using this after a variable name will assign those arguments to the variable.
+如果你想让你的mixin获取可变数量的参数,你可以使用`...`。 在变量名后使用这个参数将把这些参数赋值给变量。
```less
-.mixin(...) { // matches 0-N arguments
-.mixin() { // matches exactly 0 arguments
-.mixin(@a: 1) { // matches 0-1 arguments
-.mixin(@a: 1; ...) { // matches 0-N arguments
-.mixin(@a; ...) { // matches 1-N arguments
+.mixin(...) { // 匹配0-N个参数
+.mixin() { // 精确匹配0个参数
+.mixin(@a: 1) { // 匹配0-1个参数
+.mixin(@a: 1; ...) { // 匹配0-N个参数
+.mixin(@a; ...) { // 匹配1-N个参数
```
-Furthermore:
+此外:
```less
.mixin(@a; @rest...) {
- // @rest is bound to arguments after @a
- // @arguments is bound to all arguments
+ // @在@a之后,@rest被绑定到参数上
+ // @arguments 会接受所有参数
}
```
-## Pattern-matching
+## 5.模式匹配
-Sometimes, you may want to change the behavior of a mixin, based on the parameters you pass to it. Let's start with something basic:
+有时,可能想要根据传递给它的参数来改变mixin的行为。 让我们从基本的东西开始:
```less
.mixin(@s; @color) { ... }
@@ -197,7 +196,7 @@ Sometimes, you may want to change the behavior of a mixin, based on the paramete
}
```
-Now let's say we want `.mixin` to behave differently, based on the value of `@switch`, we could define `.mixin` as such:
+现在,我们希望`.mixin`的行为不同,基于`@ switch`的值,我们可以这样定义`.mixin`:
```less
.mixin(dark; @color) {
@@ -211,7 +210,7 @@ Now let's say we want `.mixin` to behave differently, based on the value of `@sw
}
```
-Now, if we run:
+现在,如果运行:
```less
@switch: light;
@@ -221,7 +220,7 @@ Now, if we run:
}
```
-We will get the following CSS:
+编译为:
```css
.class {
@@ -230,19 +229,18 @@ We will get the following CSS:
}
```
-Where the color passed to `.mixin` was lightened. If the value of `@switch` was `dark`,
-the result would be a darker color.
+传到`.mixin`的颜色变浅了。 如果`@ switch`的值是`dark`,结果将是一个更深的颜色。
-Here's what happened:
+以下是发生的事情:
-* The first mixin definition didn't match because it expected `dark` as the first argument.
-* The second mixin definition matched, because it expected `light`.
-* The third mixin definition matched because it expected any value.
+* 第一个mixin的定义不匹配,因为它预计`dark`是第一个参数。
+* 第二个mixin的定义匹配,因为它期望`light`。
+* 第三个mixin的定义匹配,因为它预期任意值。
-Only mixin definitions which matched were used. Variables match and bind to any value.
-Anything other than a variable matches only with a value equal to itself.
+只有mixin匹配的结果被使用。 变量会匹配并绑定到任意值。
+除变量以外的任何内容只与等于它自己的值相匹配。
-We can also match on arity, here's an example:
+同样可以根据参数数量匹配,例如:
```less
.mixin(@a) {
@@ -253,5 +251,5 @@ We can also match on arity, here's an example:
}
```
-Now if we call `.mixin` with a single argument, we will get the output of the first definition,
-but if we call it with *two* arguments, we will get the second definition, namely `@a` faded to `@b`.
+现在,如果我们用一个参数调用`.mixin`,我们将得到第一个定义的输出,
+但是如果我们用*2个*参数来调用它,我们会得到第二个定义,即`@ a`渐变为`@ b`。
From c8b16fc86965f7417b6a9f223e2fa93f1a87d4a1 Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: Thu, 7 Dec 2017 14:29:06 +0800
Subject: [PATCH 14/20] =?UTF-8?q?=E8=AF=AD=E8=A8=80=E7=89=B9=E5=BE=81?=
=?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/features/css-guards.md | 13 ++-
content/features/detached-rulesets.md | 100 ++++++++--------
content/features/import-directives.md | 149 +++++++++++++-----------
content/features/loops.md | 18 +--
content/features/merge.md | 27 ++---
content/features/mixin-guards.md | 46 ++++----
content/features/mixins-as-functions.md | 37 +++---
content/features/parent-selectors.md | 36 +++---
8 files changed, 227 insertions(+), 199 deletions(-)
diff --git a/content/features/css-guards.md b/content/features/css-guards.md
index def084b9..f7777e9e 100644
--- a/content/features/css-guards.md
+++ b/content/features/css-guards.md
@@ -1,10 +1,10 @@
-> "if"'s around selectors
+> "if"在选择器周围
-Released [v1.5.0]({{ less.master.url }}CHANGELOG.md)
+发布 [v1.5.0]({{ less.master.url }}CHANGELOG.md)
-Guards can also be applied to css selectors, which is syntactic sugar for declaring the mixin and then calling it immediately.
+Guard 也可以应用于CSS选择器, 这是用于声明mixin的语法糖,然后立即调用它。
-For instance, before 1.5.0 you would have had to do this:
+例如,在1.5.0之前,你将不得不这样做:
```less
.my-optional-style() when (@my-option = true) {
@@ -15,7 +15,7 @@ For instance, before 1.5.0 you would have had to do this:
.my-optional-style();
```
-Now, you can apply the guard directly to a style.
+现在,可以直接将guard应用于某种样式。
```less
button when (@my-option = true) {
@@ -23,7 +23,8 @@ button when (@my-option = true) {
}
```
-You can also achieve an `if` type statement by combining this with the `&` feature, allowing you to group multiple guards.
+也可以通过与`&`功能结合起来来实现一个`if`类型的语句,允许您将多个guard分组。
+
```less
& when (@my-option = true) {
button {
diff --git a/content/features/detached-rulesets.md b/content/features/detached-rulesets.md
index f2232788..244a29ce 100644
--- a/content/features/detached-rulesets.md
+++ b/content/features/detached-rulesets.md
@@ -1,30 +1,30 @@
-> Allow wrapping of a css block, defined in a mixin
+> 允许在mixin中定义一个包裹的css块
-Released [v1.7.0]({{ less.master.url }}CHANGELOG.md)
+发布 [v1.7.0]({{ less.master.url }}CHANGELOG.md)
-A detached ruleset is a group of css properties, nested rulesets, media declarations or anything else stored in a variable. You can include it into a ruleset or another structure and all its properties are going to be copied there. You can also use it as a mixin argument and pass it around as any other variable.
+分离的规则集是一组css属性,嵌套的规则集,媒体查询或存储在变量中的其他内容。 你可以将它包含到一个规则集或其他结构中,它所有的属性都将被复制到过去。 你也可以用它作为一个mixin参数,并把它作为任何其他变量传递。
-Simple example:
+例子:
````less
-// declare detached ruleset
+// 声明分离的规则集
@detached-ruleset: { background: red; };
-// use detached ruleset
+// 使用分离的规则集
.top {
@detached-ruleset();
}
````
-compiles into:
+编译为:
````css
.top {
background: red;
}
````
-Parentheses after a detached ruleset call are mandatory. The call `@detached-ruleset;` would NOT work.
+调用分离的规则集必需使用括号。 不能用`@ detached-ruleset;`调用。
-It is useful when you want to define a mixin that abstracts out either wrapping a piece of code in a media query or a non-supported browser class name. The rulesets can be passed to mixin so that the mixin can wrap the content, e.g.
+当你想要定义一个mixin来抽象出在媒体查询中包含的一段代码或者不支持的浏览器类名时, 规则集可以传递给mixin,以便mixin可以包裹内容。
```less
.desktop-and-old-ie(@rules) {
@@ -41,7 +41,7 @@ header {
}
```
-Here the `desktop-and-old-ie` mixin defines the media query and root class so that you can use a mixin to wrap a piece of code. This will output
+这里`desktop-and-old-ie` mixin定义了媒体查询和根class,这样你就可以使用一个mixin来包裹一段代码。编译为
```css
header {
@@ -57,7 +57,7 @@ html.lt-ie9 header {
}
```
-A ruleset can be now assigned to a variable or passed in to a mixin and can contain the full set of Less features, e.g.
+一个规则集可以立刻分配给一个变量,或者被传递给一个混合,并且可以包含一整套Less特征,
```less
@my-ruleset: {
@@ -67,8 +67,7 @@ A ruleset can be now assigned to a variable or passed in to a mixin and can cont
};
```
-You can even take advantage of [media query bubbling](#features-overview-feature-media-query-bubbling-and-nested-media-queries), for instance
-
+你甚至可以使用 [媒体查询冒泡](#features-overview-feature-media-query-bubbling-and-nested-media-queries), 例如
```less
@my-ruleset: {
.my-selector {
@@ -82,7 +81,7 @@ You can even take advantage of [media query bubbling](#features-overview-feature
}
```
-which will output
+编译为
```css
@media (orientation: portrait) and tv {
@@ -92,61 +91,61 @@ which will output
}
```
-A detached ruleset call unlocks (returns) all its mixins into caller the same way as mixin calls do. However, it does NOT return variables.
+分离的规则集调用解锁(返回)与mixin调用将其所有mixin解锁(调用)到调用者中是相同的方式。 但是,它不返回变量。
-Returned mixin:
+返回 mixin:
````less
-// detached ruleset with a mixin
+// 带mixin的分离规则集
@detached-ruleset: {
.mixin() {
color:blue;
}
};
-// call detached ruleset
+// 调用分离的规则集
.caller {
@detached-ruleset();
.mixin();
}
````
-Results in:
+编译为:
````css
.caller {
color: blue;
}
````
-Private variables:
+私有变量:
````less
@detached-ruleset: {
- @color:blue; // this variable is private
+ @color:blue; //这是个私有变量
};
.caller {
- color: @color; // syntax error
+ color: @color; // 语法报错
}
````
-## Scoping
-A detached ruleset can use all variables and mixins accessible where it is *defined* and where it is *called*. Otherwise said, both definition and caller scopes are available to it. If both scopes contains the same variable or mixin, declaration scope value takes precedence.
+## 1.作用域
+一个分离的规则集可以使用所有的变量和mixin,它们在*被定义*和*被调用*处被访问。即定义和调用者作用域都可用。 如果两个作用域都包含相同的变量或mixin,则当前声明的作用域中的值优先。
-*Declaration scope* is the one where detached ruleset body is defined. Copying a detached ruleset from one variable into another cannot modify its scope. The ruleset does not gain access to new scopes just by being referenced there.
+*声明作用域*被定义为分离规则主题。将分离规则集从一个变量复制到另一个变量时,不能修改其范围。 规则集不能仅通过在那里引用就可访问新的作用域。
-Lastly, a detached ruleset can gain access to scope by being unlocked (imported) into it.
+最后,分离的规则集可以通过解锁(导入)的方式来访问作用域。
-#### Definition and Caller Scope Visibility
-A detached ruleset sees the caller's variables and mixins:
+#### 1-1.定义和调用作用域可见性
+分离的规则集可以看到调用者的变量和mixin:
````less
@detached-ruleset: {
- caller-variable: @caller-variable; // variable is undefined here
- .caller-mixin(); // mixin is undefined here
+ caller-variable: @caller-variable; // 变量在这里未定义
+ .caller-mixin(); // mixin在这里未定义
};
selector {
- // use detached ruleset
+ // 使用分离规则集
@detached-ruleset();
- // define variable and mixin needed inside the detached ruleset
+ // 在分离的规则集内定义需要的变量和mixin
@caller-variable: value;
.caller-mixin() {
variable: declaration;
@@ -154,7 +153,7 @@ selector {
}
````
-compiles into:
+编译为
````css
selector {
caller-variable: value;
@@ -162,37 +161,38 @@ selector {
}
````
-Variable and mixins accessible form definition win over those available in the caller:
+变量和mixins可访问到的外部定义优先于调用者中可用的定义:
+
````less
@variable: global;
@detached-ruleset: {
- // will use global variable, because it is accessible
- // from detached-ruleset definition
+ // 使用全局变量,因为其可以访问
+ // 从分离规则集定义
variable: @variable;
};
selector {
@detached-ruleset();
- @variable: value; // variable defined in caller - will be ignored
+ @variable: value; // 在调用者中定义的变量将被忽略
}
````
-compiles into:
+编译为:
````css
selector {
variable: global;
}
````
-#### Referencing *Won't* Modify Detached Ruleset Scope
-A ruleset does not gain access to new scopes just by being referenced there:
+#### 1-2.引用*不会*修改分离规则集的作用域
+规则集不能仅仅通过引用而访问新的作用域:
````less
@detached-1: { scope-detached: @one @two; };
.one {
@one: visible;
.two {
- @detached-2: @detached-1; // copying/renaming ruleset
- @two: visible; // ruleset can not see this variable
+ @detached-2: @detached-1; // 复制/重命名规则集
+ @two: visible; // 规则集不能访问这个变量
}
}
@@ -202,32 +202,32 @@ A ruleset does not gain access to new scopes just by being referenced there:
}
````
-throws an error:
+报错:
````
ERROR 1:32 The variable "@one" was not declared.
````
-#### Unlocking *Will* Modify Detached Ruleset Scope
-A detached ruleset gains access by being unlocked (imported) inside a scope:
+#### 1-3.解锁*将*修改分离规则集的作用域
+分离的规则集通过在范围内解锁(导入)来获得访问权限:
````less
#space {
.importer-1() {
- @detached: { scope-detached: @variable; }; // define detached ruleset
+ @detached: { scope-detached: @variable; }; // 定义分离规则集
}
}
.importer-2() {
- @variable: value; // unlocked detached ruleset CAN see this variable
- #space> .importer-1(); // unlock/import detached ruleset
+ @variable: value; // 解锁分离的规则集CAN可以看到这个变量
+ #space> .importer-1(); // 解锁/导入分离的规则集
}
.use-place {
- .importer-2(); // unlock/import detached ruleset second time
+ .importer-2(); // 再次解锁/导入分离的规则集
@detached();
}
````
-compiles into:
+编译为:
````css
.use-place {
scope-detached: value;
diff --git a/content/features/import-directives.md b/content/features/import-directives.md
index 46d750ad..47bef119 100644
--- a/content/features/import-directives.md
+++ b/content/features/import-directives.md
@@ -1,8 +1,8 @@
> 从其他样式表导入样式
-In standard CSS, `@import` at-rules must precede all other types of rules. But Less doesn't care where you put `@import` statements.
+在标准CSS中,`@import` 规则必须在所有其他类型规则之前。 但 不关心你把`@ import`语句放在哪里。
-Example:
+例如:
```less
.foo {
@@ -11,141 +11,158 @@ Example:
@import "this-is-valid.less";
```
-## File Extensions
+## 1.文件扩展名
`@import` statements may be treated differently by Less depending on the file extension:
-* If the file has a `.css` extension it will be treated as CSS and the `@import` statement left as-is (see the [inline option](#import-options-inline) below).
-* If it has _any other extension_ it will be treated as Less and imported.
-* If it does not have an extension, `.less` will be appended and it will be included as a imported Less file.
+根据Less文件扩展名的不同,会用不同方式处理`@import`语句:
-Examples:
+* 如果文件具有`.css`扩展名,那么它将被视为CSS并且`@ import`语句保持原样 (参见 [内联选项](#import-options-inline) below).
+* 如果为_其他扩展名_它将被视为Less文件并被导入。
+* 如果没有扩展名,则会追加".less",并将其作为Less文件导入。
+
+例如:
```less
-@import "foo"; // foo.less is imported
-@import "foo.less"; // foo.less is imported
-@import "foo.php"; // foo.php imported as a Less file
-@import "foo.css"; // statement left in place, as-is
+@import "foo"; // foo.less 被导入
+@import "foo.less"; // foo.less 被导入
+@import "foo.php"; // foo.php 作为Less文件被导入
+@import "foo.css"; // 保留原本的导入声明
```
-The following options can be used to override this behavior.
+以下配置项可用于覆盖此行为。
-# import选项
+# import配置项
> Less offers several extensions to the CSS `@import` CSS at-rule to provide more flexibility over what you can do with external files.
-Syntax: `@import (keyword) "filename";`
+Less提供了几个CSS`@import`规则扩展项,在使用外部文件时提供更多的灵活性。
+
+语法: `@import (keyword) "filename";`
+
+以下导入指令已经被实现:
+
+* `reference`: 使用一个Less文件,但不输出它
+* `inline`: 在输出中包含源文件,但不处理它
+* `less`: 将文件视为Less文件,而不管文件扩展名是什么
+* `css`: 将文件视为css文件,而不管文件扩展名是什么
+* `once`: 只包含文件一次(默认行为)
+* `multiple`: 包含文件多次
+* `optional`: 当找不到文件时继续编译
-The following import directives have been implemented:
+> 每个`@import`允许多个关键字,您必须使用逗号分隔关键字:
-* `reference`: use a Less file but do not output it
-* `inline`: include the source file in the output but do not process it
-* `less`: treat the file as a Less file, no matter what the file extension
-* `css`: treat the file as a CSS file, no matter what the file extension
-* `once`: only include the file once (this is default behavior)
-* `multiple`: include the file multiple times
-* `optional`: continue compiling when file is not found
+示例: `@import (optional, reference) "foo.less";`
-> More than one keyword per `@import` is allowed, you will have to use commas to separate the keywords:
+## 1.reference
+> 使用`@import (reference))`导入外部文件,但不会将导入的样式添加到编译后的输出中,除非被引用。
-Example: `@import (optional, reference) "foo.less";`
-## reference
-> Use `@import (reference)` to import external files, but without adding the imported styles to the compiled output unless referenced.
-Released [v1.5.0]({{ less.master.url }}CHANGELOG.md)
+发布 [v1.5.0]({{ less.master.url }}CHANGELOG.md)
-Example: `@import (reference) "foo.less";`
+示例: `@import (reference) "foo.less";`
-Imagine that `reference` marks every directive and selector with a _reference flag_ in the imported file, imports as normal, but when the CSS is generated, "reference" selectors (as well as any media queries containing only reference selectors) are not output. `reference` styles will not show up in your generated CSS unless the reference styles are used as [mixins](#mixins-feature) or [extended](#extend-feature).
+想象一下,`reference`在导入的文件中用_reference flag_标记每个指令和选择器,正常导入,但是当生成CSS时,不会输出"引用"选择器(以及任何只包含引用选择器的媒体查询)。 除非使用引用样式,`reference`样式不会显示在生成的CSS中作为 [mixins](#mixins-feature) 或 [继承](#extend-feature).
-Additionally, **`reference`** produces different results depending on which method was used (mixin or extend):
-* **[extend](#extend-feature)**: When a selector is extended, only the new selector is marked as _not referenced_, and it is pulled in at the position of the reference `@import` statement.
-* **[mixins](#mixins-feature)**: When a `reference` style is used as an [implicit mixin](#mixins-feature), its rules are mixed-in, marked "not reference", and appear in the referenced place as normal.
+此外,**`reference`**根据不同使用方法(mixin或extend)产生不同的结果:
+* **[继承](#extend-feature)**: 当一个选择器继承时,只有新的选择器被标记为_not referenced_,并且出现在引入`@ import`语句的位置。
+* **[mixins](#mixins-feature)**: 当`reference`样式被用作[隐式mixin](#mixins-feature)时,它的规则被混入,标记为"not reference",并以正常的方式出现在引用的位置。
-### reference example
-This allows you to pull in only specific, targeted styles from a library such as [Bootstrap](https://github.com/twbs/bootstrap) by doing something like this:
+
+
+### 1-1.reference 示例
+这样就可以通过执行如下操作从库[Bootstrap] [Bootstrap](https://github.com/twbs/bootstrap)中只引用特定的目标样式:
```less
.navbar:extend(.navbar all) {}
```
-And you will pull in only `.navbar` related styles from Bootstrap.
+你将只从Bootstrap中提取`.navbar`相关的样式。
+
+
+## 2.inline
+> 使用 `@import (inline)`输出中包含外部文件,但不处理它们。
-## inline
-> Use `@import (inline)` to include external files, but not process them.
-Released [v1.5.0]({{ less.master.url }}CHANGELOG.md)
+发布 [v1.5.0]({{ less.master.url }}CHANGELOG.md)
-Example: `@import (inline) "not-less-compatible.css";`
+示例: `@import (inline) "not-less-compatible.css";`
-You will use this when a CSS file may not be Less compatible; this is because although Less supports most known standards CSS, it does not support comments in some places and does not support all known CSS hacks without modifying the CSS.
+当CSS文件可能不兼容Less时,你会使用这个; 虽然Less支持大多数已知的标准CSS,但它不支持某些地方的注释,并且不支持所有已知的CSS hacks。
-So you can use this to include the file in the output so that all CSS will be in one file.
+所以你可以使用这个在输出中包含这个文件,这样所有的CSS都会在一个文件中。
-## less
-> Use `@import (less)` to treat imported files as Less, regardless of file extension.
+## 3.less
+> 忽略文件扩展名,使用`@import (less)`将导入的文件视为Less。
-Released [v1.4.0]({{ less.master.url }}CHANGELOG.md)
-Example:
+
+发布 [v1.4.0]({{ less.master.url }}CHANGELOG.md)
+
+示例:
```less
@import (less) "foo.css";
```
-## css
-> Use `@import (css)` to treat imported files as regular CSS, regardless of file extension. This means the import statement will be left as it is.
+## 4.css
+> 使用`@import(css)`将输入的文件视为普通的CSS,而忽略文件的扩展名。 这意味着导入声明将保持原样。
+
+
-Released [v1.4.0]({{ less.master.url }}CHANGELOG.md)
+发布 [v1.4.0]({{ less.master.url }}CHANGELOG.md)
-Example:
+示例:
```less
@import (css) "foo.less";
```
-outputs
+编译为
```less
@import "foo.less";
```
-## once
-> The default behavior of `@import` statements. It means the file is imported only once and subsequent import statements for that file will be ignored.
+## 5.once
+> `@import`语句的默认行为。 这意味着该文件只导入一次,该文件的后续import语句将被忽略。
-Released [v1.4.0]({{ less.master.url }}CHANGELOG.md)
-This is the default behavior of `@import` statements.
+发布 [v1.4.0]({{ less.master.url }}CHANGELOG.md)
-Example:
+这是`@import`语句的默认行为。
+
+示例:
```less
@import (once) "foo.less";
-@import (once) "foo.less"; // this statement will be ignored
+@import (once) "foo.less"; // 此声明将会被忽略
```
-## multiple
-> Use `@import (multiple)` to allow importing of multiple files with the same name. This is the opposite behavior to once.
+## 6.multiple
+> 使用`@import (multiple)` 来导入多个具有相同名称的文件。 与once的行为相反。
+
+
-Released [v1.4.0]({{ less.master.url }}CHANGELOG.md)
+发布 [v1.4.0]({{ less.master.url }}CHANGELOG.md)
-Example:
+示例:
```less
-// file: foo.less
+// 文件: foo.less
.a {
color: green;
}
-// file: main.less
+// 文件: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
```
-Outputs
+编译为
```less
.a {
@@ -156,7 +173,7 @@ Outputs
}
```
-## optional
-> Use `@import (optional)` to allow importing of a file only when it exists. Without the `optional` keyword Less throws a FileError and stops compiling when importing a file that can not be found.
+## 7.optional
+> 使用`@import (optional)`只允许在文件存在的情况下导入文件。 如果没有`optional`关键字Less引发FileError并在导入无法找到的文件时停止编译。
-Released [v2.3.0]({{ less.master.url }}CHANGELOG.md)
+发布 [v2.3.0]({{ less.master.url }}CHANGELOG.md)
diff --git a/content/features/loops.md b/content/features/loops.md
index 4879ceae..100434f9 100644
--- a/content/features/loops.md
+++ b/content/features/loops.md
@@ -1,21 +1,21 @@
-> Creating loops
+> 创建循环
-In Less a mixin can call itself. Such recursive mixins, when combined with [Guard Expressions](#mixin-guards-feature) and [Pattern Matching](#mixins-parametric-feature-pattern-matching), can be used to create various iterative/loop structures.
+在Less中一个mixin可以调用自己。 这种递归mixins结合[Guard Expressions](#mixin-guards-feature)和[Pattern Matching](#mixins-parametric-feature-pattern-matching),可以用来创建各种迭代/循环结构。
-Example:
+示例:
```less
.loop(@counter) when (@counter> 0) {
- .loop((@counter - 1)); // next iteration
- width: (10px * @counter); // code for each iteration
+ .loop((@counter - 1)); // 下一次迭代
+ width: (10px * @counter); // 每次迭代的code
}
div {
- .loop(5); // launch the loop
+ .loop(5); // 启动循环
}
```
-Output:
+编译为
```css
div {
@@ -27,7 +27,7 @@ div {
}
```
-A generic example of using a recursive loop to generate CSS grid classes:
+使用递归循环生成CSS网格类的一般示例:
```less
.generate-columns(4);
@@ -40,7 +40,7 @@ A generic example of using a recursive loop to generate CSS grid classes:
}
```
-Output:
+编译为
```css
.column-1 {
diff --git a/content/features/merge.md b/content/features/merge.md
index b671c2c7..f6c3912c 100644
--- a/content/features/merge.md
+++ b/content/features/merge.md
@@ -1,14 +1,15 @@
-> Combine properties
+> 组合属性
-The `merge` feature allows for aggregating values from multiple properties into a comma or space separated list under a single property. `merge` is useful for properties such as background and transform.
+`merge`功能允许将多个属性的值汇总到单个属性下的逗号或空格分隔列表中。 `merge`对于诸如背景和变换之类的属性非常有用的。
-### Comma
-> Append property value with comma
+### 1.逗号
-Released [v1.5.0]({{ less.master.url }}CHANGELOG.md)
+> 用逗号追加属性值
-Example:
+发布 [v1.5.0]({{ less.master.url }}CHANGELOG.md)
+
+示例:
```less
.mixin() {
@@ -19,7 +20,7 @@ Example:
box-shadow+: 0 0 20px black;
}
```
-Outputs
+编译为
```css
.myclass {
@@ -27,13 +28,13 @@ Outputs
}
```
-### Space
+### 2.空格
-> Append property value with space
+> 用空格追加属性值
-Released [v1.7.0]({{ less.master.url }}CHANGELOG.md)
+发布 [v1.7.0]({{ less.master.url }}CHANGELOG.md)
-Example:
+示例:
```less
.mixin() {
@@ -44,7 +45,7 @@ Example:
transform+_: rotate(15deg);
}
```
-Outputs
+编译为
```css
.myclass {
@@ -52,4 +53,4 @@ Outputs
}
```
-To avoid any unintentional joins, `merge` requires an explicit `+` or `+_` flag on each join pending declaration.
\ No newline at end of file
+为了避免任何不必要的连接,`merge`需要在每个连接等待声明中都显式地使用 `+`'或`+_`标志。
\ No newline at end of file
diff --git a/content/features/mixin-guards.md b/content/features/mixin-guards.md
index 949d4799..3f481007 100644
--- a/content/features/mixin-guards.md
+++ b/content/features/mixin-guards.md
@@ -1,10 +1,14 @@
-> Conditional mixins
+> 附带条件的 mixins
Guards are useful when you want to match on _expressions_, as opposed to simple values or arity. If you are familiar with functional programming, you have probably encountered them already.
+当你想在匹配_表达式_,而不是简单的值或数量时,Guard很有。 如果你熟悉函数式编程,你可能已经遇到过它们了。
+
In trying to stay as close as possible to the declarative nature of CSS, Less has opted to implement conditional execution via **guarded mixins** instead of `if`/`else` statements, in the vein of `@media` query feature specifications.
-Let's start with an example:
+为了尽量保持CSS的声明性,Less选择通过**guarded mixins**而不是`if` /`else`语句来实现条件执行的格式。
+
+从一个例子开始:
```less
.mixin (@a) when (lightness(@a)>= 50%) {
@@ -18,14 +22,14 @@ Let's start with an example:
}
```
-The key is the `when` keyword, which introduces a guard sequence (here with only one guard). Now if we run the following code:
+关键是`when`关键字,它引入了一个guard序列(这里只有一个guard)。 如果我们运行下面的代码:
```less
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
```
-Here's what we'll get:
+得到的结果为:
```css
.class1 {
@@ -38,24 +42,24 @@ Here's what we'll get:
}
```
-### Guard Comparison Operators
+### 1.Guard 比较运算符
-The full list of comparison operators usable in guards are: `>`, `>=`, `=`, `=<`, `<`. Additionally, the keyword `true` is the only truthy value, making these two mixins equivalent: +在guard中可用的所有比较运算符:`>`,`> =`,`=`,`= <`,`<`。 此外,关键字 `true`是唯一的真值,以下两个mixin等价: ```less .truth (@a) when (@a) { ... } .truth (@a) when (@a = true) { ... } ``` -Any value other than the keyword `true` is falsy: +除关键字"true"以外的任何值都是假的: ```less .class { - .truth(40); // Will not match any of the above definitions. + .truth(40); // 不符合上述任何一个定义。 } ``` -Note that you can also compare arguments with each other, or with non-arguments: +请注意,也可以参数相互比较或者与非参数比较: ```less @media: mobile; @@ -67,38 +71,38 @@ Note that you can also compare arguments with each other, or with non-arguments: .max (@a; @b) when (@a < @b) { width: @b } ``` -### Guard Logical Operators +### 2.Guard 逻辑运算符 -You can use logical operators with guards. The syntax is based on CSS media queries. +您可以使用guard逻辑运算符。 该语法基于CSS媒体查询。 -Use the `and` keyword to combine guards: +使用`and和`关键字组合guard: ```less .mixin (@a) when (isnumber(@a)) and (@a> 0) { ... }
```
-You can emulate the *or* operator by separating guards with a comma `,`. If any of the guards evaluate to true, it's considered a match:
+可以通过用逗号`,`分隔guard来模拟*or*操作符。 如果任何一名guards为真,则认为是匹配:
```less
.mixin (@a) when (@a> 10), (@a < -10) { ... } ``` -Use the `not` keyword to negate conditions: +使用`not`关键字否定条件: ```less .mixin (@b) when not (@b> 0) { ... }
```
-### Type Checking Functions
+### 3.类型检查功能
-Lastly, if you want to match mixins based on value type, you can use the `is` functions:
+最后,如果你想基于值类型来匹配mixins,你可以使用`is`函数:
```less
.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }
```
-Here are the basic type checking functions:
+这里是基本的类型检查功能:
* `iscolor`
* `isnumber`
@@ -106,18 +110,18 @@ Here are the basic type checking functions:
* `iskeyword`
* `isurl`
-If you want to check if a value is in a specific unit in addition to being a number, you may use one of:
+如果你想检查一个值是否在一个特定的单位,除了是一个数字,你可以使用以下:
* `ispixel`
* `ispercentage`
* `isem`
* `isunit`
-### Conditional Mixins
+### 4.附带条件的 Mixins
-_(**FIXME**)_ Additionally, the `default` function may be used to make a mixin match depending on other mixing matches, and you may use it to create "conditional mixins" similar to `else` or `default` statements (of `if` and `case` structures respectively):
+_(**FIXME**)_此外,可以使用`default`函数使一个mixin匹配依赖于另一个mixin匹配,可以使用它来创建类似于`else` 或`default`的"条件mixins" 语句(分别是 `if`和`case`结构):
```less
.mixin (@a) when (@a> 0) { ... }
-.mixin (@a) when (default()) { ... } // matches only if first mixin does not, i.e. when @a <= 0 +.mixin (@a) when (default()) { ... } // 只有当第一个mixin不匹配,即@a <= 0时才匹配 ``` diff --git a/content/features/mixins-as-functions.md b/content/features/mixins-as-functions.md index ffed0ff5..462c348e 100644 --- a/content/features/mixins-as-functions.md +++ b/content/features/mixins-as-functions.md @@ -1,8 +1,8 @@ -> Return variables or mixins from mixins
+> 从mixin返回变量或mixin
-Variables and mixins defined in a mixin are visible and can be used in caller's scope. There is only one exception, a variable is not copied if the caller contains a variable with the same name (that includes variables defined by another mixin call). Only variables present in callers local scope are protected. Variables inherited from parent scopes are overridden.
+在mixin中定义的变量和mixin是可见的,可用于调用者的作用域。 只有一个例外,如果调用者包含相同名称的变量(包括在另一个mixin调用中定义的变量)时,变量不会被复制。 只有调用者本地作用域中的变量才受保护。 从父范围继承的变量会被覆盖。
-Example:
+例子:
```less
.mixin() {
@@ -17,7 +17,7 @@ Example:
}
```
-Results in:
+编译为
```css
.caller {
@@ -28,7 +28,9 @@ Results in:
Thus variables defined in a mixin can act as its return values. This allows us to create a mixin that can be used almost like a function.
-Example:
+因此,在mixin中定义的变量可以作为其返回值。 这使我们可以像创建函数一样创建一个mixin。
+
+例子:
```less
.average(@x, @y) {
@@ -36,12 +38,12 @@ Example:
}
div {
- .average(16px, 50px); // "call" the mixin
- padding: @average; // use its "return" value
+ .average(16px, 50px); // "调用" mixin
+ padding: @average; // 使用其"返回"值
}
```
-Results in:
+编译为
```css
div {
@@ -49,8 +51,8 @@ div {
}
```
-Variables defined directly in callers scope cannot be overridden. However, variables defined in callers parent scope is not protected and will be
-overridden:
+在当前作用域中定义的变量不能被覆盖。 但是,在其父作用域中定义的变量不受保护并会被覆盖:
+
````less
.mixin() {
@size: in-mixin;
@@ -62,31 +64,32 @@ overridden:
.mixin();
}
-@size: globaly-defined-value; // callers parent scope - no protection
+@size: globaly-defined-value; // 调用者父作用域 - 不受保护
````
-Results in:
+编译为
````css
.class {
margin: in-mixin in-mixin;
}
````
-Finally, mixin defined in mixin acts as return value too:
+最后,mixin中定义的mixin也作为返回值:
+
````less
-.unlock(@value) { // outer mixin
- .doSomething() { // nested mixin
+.unlock(@value) { // 外层 mixin
+ .doSomething() { // 嵌套 mixin
declaration: @value;
}
}
#namespace {
.unlock(5); // unlock doSomething mixin
- .doSomething(); //nested mixin was copied here and is usable
+ .doSomething(); //嵌套的mixin被复制到这里,可用
}
````
-Results in:
+编译为:
````css
#namespace {
declaration: 5;
diff --git a/content/features/parent-selectors.md b/content/features/parent-selectors.md
index 67a7a826..6ec6ffd2 100644
--- a/content/features/parent-selectors.md
+++ b/content/features/parent-selectors.md
@@ -1,6 +1,6 @@
-> Referencing parent selectors with `&`
+> 用`&`引用父选择器
-The `&` operator represents the parent selectors of a [nested rule](#features-overview-feature-nested-rules) and is most commonly used when applying a modifying class or pseudo-class to an existing selector:
+`&`运算符表示[嵌套规则](#features-overview-feature-nested-rules)中的父选择器,常用于在已存在选择器上修改类或伪类。
```less
a {
@@ -11,7 +11,7 @@ a {
}
```
-results in:
+编译为:
```css
a {
@@ -23,9 +23,9 @@ a:hover {
}
```
-Notice that without the `&`, the above example would result in `a :hover` rule (a descendant selector that matches hovered elements inside of `` tags) and this is not what we typically would want with the nested `:hover`.
+注意,如果没有 `&`,上面的例子会导致`a:hover`规则(匹配``标签内的悬停元素的后代选择器),嵌套`:hover`不是我们通常想要的。
-The "parent selectors" operator has a variety of uses. Basically any time you need the selectors of the nested rules to be combined in other ways than the default. For example another typical use of the `&` is to produce repetitive class names:
+"父选择器"操作符有多种用途。 基本上任何时候,嵌套规则的选择器需要以其他非默认的方式进行组合。 例如 `&`的另一个典型用法是产生重复的类名:
```less
.button {
@@ -42,7 +42,7 @@ The "parent selectors" operator has a variety of uses. Basically any time you ne
}
```
-output:
+编译为
```css
.button-ok {
@@ -56,9 +56,9 @@ output:
}
```
-### Multiple `&`
+### 1.复合 `&`
-`&` may appear more than once within a selector. This makes it possible to repeatedly refer to a parent selector without repeating its name.
+`&`可能在选择器中多次出现。 可以实现多次引用父选择器名称而不用重复书写其名称
```less
.link {
@@ -80,7 +80,7 @@ output:
}
```
-will output:
+编译为
```css
.link + .link {
@@ -98,7 +98,7 @@ will output:
```
-Note that `&` represents all parent selectors (not just the nearest ancestor) so the following example:
+请注意`&` 代表所有的父选择器(不只是最近的祖先),所以下面的例子:
```less
.grand {
@@ -122,7 +122,7 @@ Note that `&` represents all parent selectors (not just the nearest ancestor) so
}
```
-results in:
+编译为:
```css
.grand .parent> .grand .parent {
@@ -141,10 +141,10 @@ results in:
```
-### Changing Selector Order
+### 2.改变选择器顺序
-It can be useful to prepend a selector to the inherited (parent) selectors. This can be done by putting the `&` after current selector.
-For example, when using Modernizr, you might want to specify different rules based on supported features:
+将选择器预先添加到继承的(父)选择器可能很有用。 可以通过在当前选择器之后放置 `&` 来完成。
+例如,使用Modernizr库时,可能需要根据支持的功能指定不同的规则:
```less
.header {
@@ -159,6 +159,8 @@ For example, when using Modernizr, you might want to specify different rules bas
The selector `.no-borderradius &` will prepend `.no-borderradius` to its parent `.header .menu` to form the`.no-borderradius .header .menu` on output:
+`.no-borderradius &`选择器会将`.no-borderradius`添加到其父级`.header .menu`中,以`.no-borderradius .header .menu`形式输出:
+
```css
.header .menu {
border-radius: 5px;
@@ -169,9 +171,9 @@ The selector `.no-borderradius &` will prepend `.no-borderradius` to its parent
```
-### Combinatorial Explosion
+### 3.超级组合
-`&` can also be used to generate every possible permutation of selectors in a comma separated list:
+`&` 也可以用来在逗号分隔列表中生成每个选择器可能的排列组合:
```less
p, a, ul, li {
@@ -182,7 +184,7 @@ p, a, ul, li {
}
```
-This expands to all possible (16) combinations of the specified elements:
+这种会扩展指定元素所有可能的(16)的组合:
```css
p,
From 48184f5dff077a74a0c5af4a6f98a77a309c5293 Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: Thu, 7 Dec 2017 14:35:35 +0800
Subject: [PATCH 15/20] fix
---
content/features/parent-selectors.md | 2 --
1 file changed, 2 deletions(-)
diff --git a/content/features/parent-selectors.md b/content/features/parent-selectors.md
index 6ec6ffd2..51f48377 100644
--- a/content/features/parent-selectors.md
+++ b/content/features/parent-selectors.md
@@ -157,8 +157,6 @@ a:hover {
}
```
-The selector `.no-borderradius &` will prepend `.no-borderradius` to its parent `.header .menu` to form the`.no-borderradius .header .menu` on output:
-
`.no-borderradius &`选择器会将`.no-borderradius`添加到其父级`.header .menu`中,以`.no-borderradius .header .menu`形式输出:
```css
From 4f211692dd51c3e68d9a60a2aaa316124da829c2 Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: Thu, 7 Dec 2017 14:57:39 +0800
Subject: [PATCH 16/20] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
templates/functions.hbs | 4 +-
templates/includes/nav-main.hbs | 65 ++++++++++++++++-----------------
2 files changed, 34 insertions(+), 35 deletions(-)
diff --git a/templates/functions.hbs b/templates/functions.hbs
index 9be50956..78a4e186 100644
--- a/templates/functions.hbs
+++ b/templates/functions.hbs
@@ -1,7 +1,7 @@
---
-title: Functions
+title: 函数手册
slug: functions
-lead: Function reference
+lead: 函数手册
---
{{!-- Functions
diff --git a/templates/includes/nav-main.hbs b/templates/includes/nav-main.hbs
index 5d6775ef..b5836d3f 100644
--- a/templates/includes/nav-main.hbs
+++ b/templates/includes/nav-main.hbs
@@ -21,9 +21,7 @@
-
+
\ No newline at end of file
From f547106d5a9e38ea090eb1ec11278f7c70c55ca1 Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: Thu, 7 Dec 2017 15:02:03 +0800
Subject: [PATCH 17/20] =?UTF-8?q?=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
templates/functions.hbs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/templates/functions.hbs b/templates/functions.hbs
index 78a4e186..9ad218d7 100644
--- a/templates/functions.hbs
+++ b/templates/functions.hbs
@@ -1,5 +1,5 @@
---
-title: 函数手册
+title: 函数
slug: functions
lead: 函数手册
---
From b1aaa58733ba0a194128c10f238b669f3dd557cd Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: Fri, 8 Dec 2017 17:29:14 +0800
Subject: [PATCH 18/20] =?UTF-8?q?=E6=9D=82=E9=A1=B9=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/functions/misc-functions.md | 106 ++++++++++++++--------------
data/functions.yml | 18 ++---
templates/functions.hbs | 4 +-
3 files changed, 64 insertions(+), 64 deletions(-)
diff --git a/content/functions/misc-functions.md b/content/functions/misc-functions.md
index 1e02a25e..595af9dc 100644
--- a/content/functions/misc-functions.md
+++ b/content/functions/misc-functions.md
@@ -1,92 +1,92 @@
### color
-> Parses a color, so a string representing a color becomes a color.
+> 解析颜色,将表示颜色的字符串转换为颜色值。
-Parameters: `string`: a string of the specified color.
+参数: `string`:表示颜色值的字符串。
-Returns: `color`
+返回值: `color`
-Example: `color("#aaa");`
+示例: `color("#aaa");`
-Output: `#aaa`
+编译为: `#aaa`
### image-size
-> Gets the image dimensions from a file.
+> 从文件中获取图像尺寸。
-Parameters: `string`: the file to get the dimensions for.
+参数: `string`: 所需获取尺寸的文件。
-Returns: `dimension`
+返回值: `dimension`
-Example: `image-size("file.png");`
+示例: `image-size("file.png");`
-Output: `10px 10px`
+编译为: `10px 10px`
-Note: this function needs to be implemented by each environment. It is currently only available in the node environment.
+注意:这个功能需要由每个环境来实现。 它目前仅在node环境中可用。
-Added in: v2.2.0
+添加版本: v2.2.0
### image-width
-> Gets the image width from a file.
+> 从文件中获取图像宽度。
-Parameters: `string`: the file to get the dimensions for.
+参数: `string`: 所需获取尺寸的文件。
-Returns: `dimension`
+返回值: `dimension`
-Example: `image-width("file.png");`
+示例: `image-width("file.png");`
-Output: `10px`
+编译为: `10px`
-Note: this function needs to be implemented by each environment. It is currently only available in the node environment.
+注意:这个功能需要由每个环境来实现。 它目前仅在node环境中可用。
-Added in: v2.2.0
+添加版本: v2.2.0
### image-height
-> Gets the image height from a file.
+>从文件中获取图像高度。
-Parameters: `string`: the file to get the dimensions for.
+参数: `string`: 所需获取尺寸的文件。
-Returns: `dimension`
+返回值: `dimension`
-Example: `image-height("file.png");`
+示例: `image-height("file.png");`
-Output: `10px`
+编译为: `10px`
-Note: this function needs to be implemented by each environment. It is currently only available in the node environment.
+注意:这个功能需要由每个环境来实现。 它目前仅在node环境中可用。
-Added in: v2.2.0
+添加版本: v2.2.0
### convert
-> Convert a number from one unit into another.
+> 将数字从一个单位转换为另一个单位。
-The first argument contains a number with units and second argument contains units. If the units are compatible, the number is converted. If they are not compatible, the first argument is returned unmodified.
+第一个参数为一个带单位的数字,第二个参数为单位。 如果这些单位是兼容的,则数字被转换。 如果它们不兼容,则第一个参数将不被修改。
-See [unit](#misc-functions-unit) for changing the unit without conversion.
+参见 [单位](#misc-functions-unit)不做转换的情况下改变单位。
-_Compatible unit groups_:
+_可转换的单位_:
-* lengths: `m`, `cm`, `mm`, `in`, `pt` and `pc`,
-* time: `s` and `ms`,
-* angle: `rad`, `deg`, `grad` and `turn`.
+* 长度: `m`, `cm`, `mm`, `in`, `pt`, `pc`,
+* 时间: `s`, `ms`,
+* 角度: `rad`, `deg`, `grad`, `turn`.
-Parameters:
-* `number`: a floating point number with units.
-* `identifier`, `string` or `escaped value`: units
+参数:
+* `number`: 带单位的浮点数。
+* `identifier`, `string`或者 `escaped value`: 单位
-Returns: `number`
+返回值: `number`
-Example:
+示例:
```less
convert(9s, "ms")
convert(14cm, mm)
-convert(8, mm) // incompatible unit types
+convert(8, mm) // 不可转换的单位类型
```
-Output:
+编译为:
```
9000ms
@@ -97,29 +97,29 @@ Output:
### data-uri
-> Inlines a resource and falls back to `url()` if the ieCompat option is on and the resource is too large, or if you use the function in the browser. If the MIME type is not given then node uses the mime package to determine the correct mime type.
+> 如果用ieCompat选项打开并且资源太大,或者如果在浏览器中使用该函数,则将资源内联进样式表并返回到`url()`。 如果没有指定MIME类型,node将使用MIME包来决定正确的MIME类型。
-Parameters:
-* `mimetype`: (Optional) A MIME type string.
-* `url`: The URL of the file to inline.
+参数:
+* `mimetype`: (可选)MIME类型字符串。
+* `url`: 要内联的文件的URL。
-If there is no mimetype, data-uri function guesses it from filename suffix. Text and svg files are encoded as utf-8 and anything else is encoded as base64.
+如果没有指定mimetype,data-uri函数会从文件名后缀中猜出来。 Text文本和SVG文件按照utf-8编码,其他都会按base64编码。
-If user provided mimetype, the function uses base64 if mimetype argument ends with ;base64. For example, `image/jpeg;base64` is encoded into base64 while `text/html` is encoded into utf-8.
+如果提供了mimetype,且mimetype参数以base64结尾,则函数使用base64。 例如,`image / jpeg; base64`按照编base64码,而`text / html`按照utf-8编码。
-Example: `data-uri('../data/image.jpg');`
+示例: `data-uri('../data/image.jpg');`
-Output: `url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');`
+编译为: `url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');`
-Output in browser: `url('../data/image.jpg');`
+浏览器中编译为: `url('../data/image.jpg');`
-Example: `data-uri('image/jpeg;base64', '../data/image.jpg');`
+示例: `data-uri('image/jpeg;base64', '../data/image.jpg');`
-Output: `url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');`
+编译为: `url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');`
-Example: `data-uri('image/svg+xml;charset=UTF-8', 'image.svg');`
+示例: `data-uri('image/svg+xml;charset=UTF-8', 'image.svg');`
-Output: `url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");`
+编译为: `url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");`
### default
diff --git a/data/functions.yml b/data/functions.yml
index c8edd7a0..38713cf5 100644
--- a/data/functions.yml
+++ b/data/functions.yml
@@ -11,39 +11,39 @@ base: content/functions
published:
misc-functions:
- title: Misc Functions
+ title: 杂项函数
files: <%= functions.base %>/misc-functions.md
string-functions:
- title: String Functions
+ title: 字符串函数
files: <%= functions.base %>/string-functions.md
list-functions:
- title: List Functions
+ title: 列表函数
files: <%= functions.base %>/list-functions.md
math-functions:
- title: Math Functions
+ title: 数学函数
files: <%= functions.base %>/math-functions.md
type-functions:
- title: Type Functions
+ title: 类型函数
files: <%= functions.base %>/type-functions.md
color-definition:
- title: Color Definition Functions
+ title: 颜色定义函数
files: <%= functions.base %>/color-definition.md
color-channel:
- title: Color Channel Functions
+ title: 颜色通道函数
files: <%= functions.base %>/color-channel.md
color-operations:
- title: Color Operation Functions
+ title: 颜色操作函数
files: <%= functions.base %>/color-operations.md
color-blending:
- title: Color Blending Functions
+ title: 颜色混合函数
files: <%= functions.base %>/color-blending.md
diff --git a/templates/functions.hbs b/templates/functions.hbs
index 9ad218d7..c42c8bd5 100644
--- a/templates/functions.hbs
+++ b/templates/functions.hbs
@@ -9,9 +9,9 @@ lead: 函数手册
-
Functions
+
函数
-
Built-in functions supported by Less.
+
Less支持的内置函数。
From f42ef91c19ec4ed2544e94dae770ebf1c8eaa12b Mon Sep 17 00:00:00 2001
From: woolyang <249877448@qq.com>
Date: 2017年12月11日 19:22:53 +0800
Subject: [PATCH 19/20] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=87=BD=E6=95=B0?=
=?UTF-8?q?=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
content/functions/list-functions.md | 32 ++--
content/functions/math-functions.md | 242 +++++++++++++-------------
content/functions/misc-functions.md | 100 +++++------
content/functions/string-functions.md | 78 ++++-----
content/functions/type-functions.md | 86 ++++-----
5 files changed, 269 insertions(+), 269 deletions(-)
diff --git a/content/functions/list-functions.md b/content/functions/list-functions.md
index dc594482..22782ed5 100644
--- a/content/functions/list-functions.md
+++ b/content/functions/list-functions.md
@@ -1,21 +1,21 @@
### length
-> Returns the number of elements in a value list.
+> 返回值列表中的元素数。
-Parameters: `list` - a comma or space separated list of values.
-Returns: an integer number of elements in a list
+参数: `list` - 逗号或空格分隔的值列表。
+返回值: 列表中的整数个元素。
-Example: `length(1px solid #0080ff);`
-Output: `3`
+示例: `length(1px solid #0080ff);`
+编译为: `3`
-Example:
+示例:
```less
@list: "banana", "tomato", "potato", "peach";
n: length(@list);
```
-Output:
+编译为:
```
n: 4;
@@ -23,24 +23,24 @@ n: 4;
### extract
-> Returns the value at a specified position in a list.
+> 返回列表中指定位置的值。
-Parameters:
-`list` - a comma or space separated list of values.
-`index` - an integer that specifies a position of a list element to return.
-Returns: a value at the specified position in a list.
+参数:
+`list` - 逗号或空格分隔的值列表。
+`index` - 一个整数,指定要返回的列表元素的位置。
+返回值: 列表中指定位置的值。
-Example: `extract(8px dotted red, 2);`
-Output: `dotted`
+示例: `extract(8px dotted red, 2);`
+编译为: `dotted`
-Example:
+示例:
```less
@list: apple, pear, coconut, orange;
value: extract(@list, 3);
```
-Output:
+编译为:
```
value: coconut;
diff --git a/content/functions/math-functions.md b/content/functions/math-functions.md
index c94e9c36..be8c15a9 100644
--- a/content/functions/math-functions.md
+++ b/content/functions/math-functions.md
@@ -1,88 +1,88 @@
### ceil
-> Rounds up to the next highest integer.
+> 向上取整。
-Parameters: `number` - a floating point number.
+参数: `number` - 一个浮点数。
-Returns: `integer`
+返回值: `integer`
-Example: `ceil(2.4)`
+示例: `ceil(2.4)`
-Output: `3`
+编译为: `3`
### floor
-> Rounds down to the next lowest integer.
+> 向下取整。
-Parameters: `number` - a floating point number.
+参数: `number` - 一个浮点数。
-Returns: `integer`
+返回值: `integer`
-Example: `floor(2.6)`
+示例: `floor(2.6)`
-Output: `2`
+编译为: `2`
### percentage
-> Converts a floating point number into a percentage string.
+> 将浮点数转换为百分比字符串。
-Parameters: `number` - a floating point number.
+参数: `number` - 一个浮点数。
-Returns: `string`
+返回值: `string`
-Example: `percentage(0.5)`
+示例: `percentage(0.5)`
-Output: `50%`
+编译为: `50%`
### round
-> Applies rounding.
+> 四舍五入
-Parameters:
-* `number`: A floating point number.
-* `decimalPlaces`: Optional: The number of decimal places to round to. Defaults to 0.
+参数:
+* `number`: 一个浮点数。
+* `decimalPlaces`: 可选:四舍五入到的小数位数。 默认为0。
-Returns: `number`
+返回值: `number`
-Example: `round(1.67)`
+示例: `round(1.67)`
-Output: `2`
+编译为: `2`
-Example: `round(1.67, 1)`
+示例: `round(1.67, 1)`
-Output: `1.7`
+编译为: `1.7`
### sqrt
-> Calculates square root of a number. Keeps units as they are.
+> 计算一个数字的平方根,同时保持单位原样。
-Parameters: `number` - floating point number.
+参数: `number` - 一个浮点数。
-Returns: `number`
+返回值: `number`
-Example:
+示例:
```less
sqrt(25cm)
```
-Output:
+编译为:
```css
5cm
```
-Example:
+示例:
```less
sqrt(18.6%)
```
-Output:
+编译为:
```js
4.312771730569565%;
@@ -91,32 +91,32 @@ Output:
### abs
-> Calculates absolute value of a number. Keeps units as they are.
+> 计算一个数字的绝对值。 保持单位原样。
-Parameters: `number` - a floating point number.
+参数: `number` - 一个浮点数。
-Returns: `number`
+返回值: `number`
-Example #1: `abs(25cm)`
+示例 #1: `abs(25cm)`
-Output: `25cm`
+编译为: `25cm`
-Example #2: `abs(-18.6%)`
+示例 #2: `abs(-18.6%)`
-Output: `18.6%;`
+编译为: `18.6%;`
### sin
-> Calculates sine function.
+> 计算正弦函数。
-Assumes radians on numbers without units.
+假设数字弧度上没有单位。
-Parameters: `number` - a floating point number.
+参数: `number` - 一个浮点数。
-Returns: `number`
+返回值: `number`
-Example:
+示例:
```less
sin(1); // sine of 1 radian
@@ -124,7 +124,7 @@ sin(1deg); // sine of 1 degree
sin(1grad); // sine of 1 gradian
```
-Output:
+编译为:
```
0.8414709848078965; // sine of 1 radian
@@ -135,15 +135,15 @@ Output:
### asin
-> Calculates arcsine (inverse of sine) function.
+> 计算反正弦函数。
-Returns number in radians e.g. a number between `-π/2` and `π/2`.
+以弧度返回数字 介于`-π/2`和`π/2`之间的数字。
-Parameters: `number` - floating point number from `[-1, 1]` interval.
+参数: `number` - `[-1,1]`区间内的浮点数。
-Returns: `number`
+返回值: `number`
-Example:
+示例:
```less
asin(-0.8414709848078965)
@@ -151,7 +151,7 @@ asin(0)
asin(2)
```
-Output:
+编译为:
```
-1rad
@@ -162,42 +162,42 @@ NaNrad
### cos
-> Calculates cosine function.
+> 计算余弦函数。
-Assumes radians on numbers without units.
+假设数字弧度上没有单位。
-Parameters: `number` - a floating point number.
+参数: `number` - 一个浮点数。
-Returns: `number`
+返回值: `number`
-Example:
+示例:
```less
-cos(1) // cosine of 1 radian
-cos(1deg) // cosine of 1 degree
-cos(1grad) // cosine of 1 gradian
+cos(1) // 1弧度的余弦
+cos(1deg) // 1度的余弦
+cos(1grad) // 1百分度的余弦
```
-Output:
+编译为:
```
-0.5403023058681398 // cosine of 1 radian
-0.9998476951563913 // cosine of 1 degree
-0.9998766324816606 // cosine of 1 gradian
+0.5403023058681398 // 1弧度的余弦
+0.9998476951563913 // 1度的余弦
+0.9998766324816606 // 1百分度的余弦
```
### acos
-> Calculates arccosine (inverse of cosine) function.
+> 计算反余弦函数。
-Returns number in radians e.g. a number between 0 and π.
+以弧度返回数字 介于0和π之间的数字。
-Parameters: `number` - a floating point number from [-1, 1] interval.
+参数: `number` - `[-1,1]`区间内的浮点数。
-Returns: `number`
+返回值: `number`
-Example:
+示例:
```less
acos(0.5403023058681398)
@@ -205,7 +205,7 @@ acos(1)
acos(2)
```
-Output:
+编译为:
```
1rad
@@ -216,50 +216,50 @@ NaNrad
### tan
-> Calculates tangent function.
+> 计算正切函数。
-Assumes radians on numbers without units.
+假设数字弧度上没有单位。
-Parameters: `number` - a floating point number.
+参数: `number` - 一个浮点数。
-Returns: `number`
+返回值: `number`
-Example:
+示例:
```less
-tan(1) // tangent of 1 radian
-tan(1deg) // tangent of 1 degree
-tan(1grad) // tangent of 1 gradian
+tan(1) // 1弧度的正弦
+tan(1deg) // 1度的余弦
+tan(1grad) // 1百分度的余弦
```
-Output:
+编译为:
```
-1.5574077246549023 // tangent of 1 radian
-0.017455064928217585 // tangent of 1 degree
-0.015709255323664916 // tangent of 1 gradian
+1.5574077246549023 // 1弧度的正弦
+0.017455064928217585 // 1度的余弦
+0.015709255323664916 // 1百分度的余弦
```
### atan
-> Calculates arctangent (inverse of tangent) function.
+> 计算反正切函数。
-Returns number in radians e.g. a number between `-π/2` and `π/2`.
+以弧度返回数字 介于`-π/2`和`π/2`之间的数字。
-Parameters: `number` - a floating point number.
+参数: `number` - 一个浮点数。
-Returns: `number`
+返回值: `number`
-Example:
+示例:
```less
atan(-1.5574077246549023)
atan(0)
-round(atan(22), 6) // arctangent of 22 rounded to 6 decimal places
+round(atan(22), 6) // 22反正切值,四舍五入到小数点后6位
```
-Output:
+编译为:
```
-1rad
@@ -270,19 +270,19 @@ Output:
### pi
-> Returns π (pi);
+> 返回 π (pi);
-Parameters: `none`
+参数: `none`
-Returns: `number`
+返回值: `number`
-Example:
+示例:
```less
pi()
```
-Output:
+编译为:
```
3.141592653589793
@@ -291,17 +291,17 @@ Output:
### pow
-> Returns the value of the first argument raised to the power of the second argument.
+> 返回指数计算值。
-Returned value has the same dimension as the first parameter and the dimension of the second parameter is ignored.
+返回值与第一个参数具有相同的尺寸,第二个参数的尺寸将被忽略。 该函数也能够处理负数和浮点数。
-Parameters:
-* `number`: base -a floating point number.
-* `number`: exponent - a floating point number.
+参数:
+* `number`: 基数 - 一个浮点数。
+* `number`: 指数 - 一个浮点数。
Returns: `number`
-Example:
+示例:
```less
pow(0cm, 0px)
@@ -311,7 +311,7 @@ pow(-25, 0.5)
pow(-25%, -0.5)
```
-Output:
+编译为:
```
1cm
@@ -324,17 +324,17 @@ NaN%
### mod
-> Returns the value of the first argument modulus second argument.
+> 返回余数。
-Returned value has the same dimension as the first parameter, the dimension of the second parameter is ignored. The function is able to handle also negative and floating point numbers.
+返回值与第一个参数具有相同的尺寸,第二个参数的尺寸将被忽略。 该函数也能够处理负数和浮点数。
-Parameters:
-* `number`: a floating point number.
-* `number`: a floating point number.
+参数:
+* `number`: 一个浮点数。
+* `number`: 一个浮点数。
-Returns: `number`
+返回值: `number`
-Example:
+示例:
```less
mod(0cm, 0px)
@@ -342,7 +342,7 @@ mod(11cm, 6px);
mod(-26%, -5);
```
-Output:
+编译为:
```
NaNcm;
@@ -353,33 +353,33 @@ NaNcm;
### min
-> Returns the lowest of one or more values.
+> 返回一个或多个值的最小值。
-Parameters: `value1, ..., valueN` - one or more values to compare.
+参数: `value1, ..., valueN` - 一个或多个值进行比较。
-Returns: the lowest value.
+返回值: 最小值
-Example: `min(5, 10);`
+示例: `min(5, 10);`
-Output: `5`
+编译为: `5`
-Example: `min(3px, 42px, 1px, 16px);`
+示例: `min(3px, 42px, 1px, 16px);`
-Output: `1px`
+编译为: `1px`
### max
-> Returns the highest of one or more values.
+> 返回一个或多个值的最大值。
-Parameters: `value1, ..., valueN` - one or more values to compare.
+参数: `value1, ..., valueN` - 一个或多个值进行比较。
-Returns: the highest value.
+返回值: 最大值
-Example: `max(5, 10);`
+示例: `max(5, 10);`
-Output: `10`
+编译为: `10`
-Example: `max(3%, 42%, 1%, 16%);`
+示例: `max(3%, 42%, 1%, 16%);`
-Output: `42%`
+编译为: `42%`
diff --git a/content/functions/misc-functions.md b/content/functions/misc-functions.md
index 595af9dc..54f14f59 100644
--- a/content/functions/misc-functions.md
+++ b/content/functions/misc-functions.md
@@ -123,9 +123,9 @@ convert(8, mm) // 不可转换的单位类型
### default
-> Available only inside guard conditions and returns `true` only if no other mixin matches, `false` otherwise.
+> 仅可在guard条件下使用,在没有其他mixin匹配的情况下返回"true",否则返回"false"。
-Example:
+示例:
```less
.mixin(1) {x: 11}
@@ -140,7 +140,7 @@ div.special {
.mixin(1);
}
```
-Output:
+编译为:
```css
div {
@@ -153,6 +153,8 @@ div.special {
It is possible to use the value returned by `default` with guard operators. For example `.mixin() when not(default()) {}` will match only if there's at least one more mixin definition that matches`.mixin()` call:
+可以使用`default`返回的值给guard操作符。 例如`.mixin() when not(default()) {}`只会在匹配至少一个`.mixin()`mixin时定义才会调用:
+
```less
.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default()) {padding: (@value / 5)}
@@ -166,7 +168,7 @@ div-2 {
.mixin(100%);
}
```
-result:
+编译为:
```css
div-1 {
@@ -178,7 +180,7 @@ div-2 {
}
```
-It is allowed to make multiple `default()` calls in the same guard condition or in a different conditions of a mixins with the same name:
+允许在相同的guard条件下或在具有相同名称的mixins的不同条件下进行多个`default()`调用:
```less
div {
@@ -188,19 +190,19 @@ div {
.m(1); // OK
}
```
-However Less will throw a error if it detects a *potential* conflict between multiple mixin definitions using `default()`:
+然而,如果使用`default()`检测到多个mixin定义之间的*潜在*冲突,Less会抛出错误:
```less
div {
.m(@x) when (default()) {}
.m(@x) when not(default()) {}
- .m(1); // Error
+ .m(1); // 报错
}
```
-In above example it is impossible to determine what value each `default()` call should return since they recursively depend on each other.
+在上面的例子中,因为它们递归地相互依赖,不能确定每个`default()`调用应该返回什么值。
-Advanced multiple `default()` usage:
+多重`default()` 高级用法:
```less
.x {
@@ -217,7 +219,7 @@ Advanced multiple `default()` usage:
&-baz {.m('baz')}
}
```
-Result:
+编译为:
```css
.x-blue {
@@ -234,9 +236,9 @@ Result:
}
```
-The `default` function is available as a Less built-in function _only inside guard expressions_. If used outside of a mixin guard condition it is interpreted as a regular CSS value:
+`default`函数作为Less内置函数_只能在guard表达式中使用_。 如果在mixin guard条件之外使用,则将其解释为常规CSS值:
-Example:
+示例:
```less
div {
@@ -244,7 +246,7 @@ div {
bar: default(42);
}
```
-Result:
+编译为:
```css
div {
@@ -256,68 +258,68 @@ div {
### unit
-> Remove or change the unit of a dimension
+> 删除或更改尺寸的单位
-Parameters:
-* `dimension`: A number, with or without a dimension.
-* `unit`: (Optional) the unit to change to, or if omitted it will remove the unit.
+参数:
+* `dimension`: 一个带尺寸或者不带尺寸的数字。
+* `unit`: (可选)要更改的单位,或者如果省略,将删除单位。
-See [convert](#misc-functions-convert) for changing the unit with conversion.
+参见 [转换](#misc-functions-convert) 用于转换单位。
-Example: `unit(5, px)`
+示例: `unit(5, px)`
-Output: `5px`
+编译为: `5px`
-Example: `unit(5em)`
+示例: `unit(5em)`
-Output: `5`
+编译为: `5`
### get-unit
-> Returns units of a number.
+> 返回一个数字的单位。
-If the argument contains a number with units, the function returns its units. The argument without units results in an empty return value.
+如果参数包含带有单位的数字,则该函数返回其单位。 没有单位的参数会返回一个空值。
-Parameters:
-* `number`: a number with or without units.
+参数:
+* `number`: 一个带尺寸或者不带单位的数字。
-Example: `get-unit(5px)`
+示例: `get-unit(5px)`
-Output: `px`
+编译为: `px`
-Example: `get-unit(5)`
+示例: `get-unit(5)`
-Output: ` //nothing`
+编译为: ` //nothing`
### svg-gradient
-> Generates multi-stop svg gradients.
+> 生成多颜色svg渐变。
-Svg-gradient function generates multi-stop svg gradients. It must have at least three parameters. First parameter specifies gradient type and direction and remaining parameters list colors and their positions. The position of first and last specified color are optional, remaining colors must have positions specified.
+Svg-gradient函数生成多颜色Svg-gradient。 它必须至少有三个参数。 第一个参数指定渐变类型和方向,其余参数列表颜色及其位置。 第一个和最后一个指定颜色的位置是可选的,其余颜色必须指定位置。
-The direction must be one of `to bottom`, `to right`, `to bottom right`, `to top right`, `ellipse` or `ellipse at center`. The direction can be specified as both escaped value `~'to bottom'` and space separated list of words `to bottom`.
+方向必须是 `to bottom`, `to right`, `to bottom right`, `to top right`, `ellipse` 或者 `ellipse at center` 其中之一。方向可以被指定为转义值`~'to bottom'` 和空格分隔的词语列表`to bottom`。
-The direction must be followed by two or more color stops. They can be supplied either inside a list or you can specify each color stops in separate argument.
+方向必须跟着两个或更多的颜色。 它们可以在列表中提供,也可以在不同的参数中指定每种颜色。
-Parameters - colors stops in list:
-* `escaped value` or `list of identifiers`: direction
-* `list` - all colors and their positions in list
+参数 - 颜色在列表中:
+* `escaped value` 或 `list of identifiers`: 方向
+* `list` - 所有的颜色和他们在列表中的位置
-Parameters - color stops in arguments:
-* `escaped value` or `list of identifiers`: direction
-* `color [percentage]` pair: first color and its relative position (position is optional)
-* `color percent` pair: (optional) second color and its relative position
+参数 - 颜色在参数中:
+* `escaped value` 或 `list of identifiers`: 方向
+* `color [percentage]` : 第一种颜色及其相对位置(位置可选)
+* `color percent` : (可选)第二种颜色及其相对位置
* ...
-* `color percent` pair: (optional) n-th color and its relative position
-* `color [percentage]` pair: last color and its relative position (position is optional)
+* `color percent` : (可选)第n种颜色及其相对位置
+* `color [percentage]` : 最后一个颜色及其相对位置(位置可选)
-Returns: `url` with "URI-Encoded" svg gradient.
+返回值:带有"URI编码"的渐变的`url`。
-Example - colors stops in list:
+示例 - 多颜色在列表中:
```less
div {
@list: red, green 30%, blue;
@@ -325,22 +327,22 @@ div {
}
```
-equivalent - color stops in arguments:
+等同于颜色在参数中:
```less
div {
background-image: svg-gradient(to right, red, green 30%, blue);
}
```
-both result in:
+同样的结果:
```css
div {
background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0000%22%2F%3E%3Cstop%20offset%3D%2230%25%22%20stop-color%3D%22%23008000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23gradient)%22%20%2F%3E%3C%2Fsvg%3E');
}
```
-Note: in versions before 2.2.0 the result is `base64` encoded .
+注意:在2.2.0之前的版本中,结果是`base64`编码。
-Generated background image has red color on the left, green at 30% of its width and ends with a blue color. Base64 encoded part contains following svg-gradient:
+生成的背景图像左侧为红色,宽度为30%时为绿色,结束时为蓝色。 Base64编码的部分包含以下svg-gradient:
```xml