less 语法特性翻译稿 - 特性快速预览部分

原文地址

http://lesscss.cn/features/

概述

作为CSS的一种扩展语法，Less不仅仅向后兼容CSS，新的特性也是基于CSS现有语法。这使得学习Less变得容易，如果你有所怀疑，那可以回到相对简陋的CCS。

变量Variables

这里有些一眼就能看懂的例子：

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

输出

#header {
  color: #6c94be;
}

小心，变量实际上是“常量”，他们只能被定义一次。

混入器 Mixins

混入是一种把打包好的一些属性从一个rule-set中包含到另外一个rule-set。我们有下面一个Class

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

我们希望这些属性也可以插入到其他的rule-set中。简单，我们只需要把它的名字丢到我们想要这些属性的地方就行了。就像下面这样。

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

输出

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

所有.bordered 这个类的属性都会出现#menu a 和 .post a 中。（你也可以用#ids当做混入器。）后面还有关于混入器更加详尽的用法解析，这里只是简单介绍。

规则嵌套 Nested Rules

Less 允许你用嵌套的方式代替逗号，or in combination with cascading。我们有下面的一些CSS。

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

在Less中你可以这样写

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

这样的代码更加的简洁，并且可以暗示你的HTML代码结构。

你也可以绑定伪类和混入器来使用这个特性。下面是一个经典的clearfix hack，使用一个混入器来实现。（& 符号将会被当前选择器的父选择器名字替代，比如这里是.classfix）

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

输出

.clearfix {
  display: block;
  zoom: 1;
}
.clearfix:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

嵌套指令和冒泡 Nested Directives and Bubbling

一些CSS指令像media 或者 keyframe 也可以像选择器一样被折叠。指令将被放在最顶端而其他在同一个rule-set的元素排序方式按照之前的顺序不变。这种行为叫做冒泡。

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

输出

@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

其他一些没有条件的指令，比如font-face，keyframe，也会向上冒泡。但是他们的内容不会改变。

#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}

输出：

#a {
  color: blue;
}
@font-face {
  src: made-up-url;
}
#a {
  padding: 2 2 2 2;
}

操作符号 Operations

算数操作符 +, -, *, /，可以操作任何数字、颜色或者值。如果有可能，数学操作符可以将单位带入算式并且在加减或比较他们之前转换他们。结果的单位采用算式中从左到右最明确的单位的第一个。如果转换无法进行或者没有意义，单位将被忽略。无法转换的单位比如 px 和 cm，rad和%。

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

乘除法不转换数字。在多数情况下这是没有意义的 - 一个长度乘以另一个长度将得到一个面积但是CSS并不支持设定一个面积。Less会基于数字本身去操作这些方程并且给结果一个明确的单位。

@base: 2cm * 3mm; // result is 6cm

颜色将被切割成红，绿，蓝和透明四个色值。运算操作将被分别用于每个色值中，比如用户将2个颜色相加，绿色的色值等于两个输入颜色的绿色色值之和。如果用户将一个数字乘上颜色，每个色值都会被乘以这个数字。

注意：基于alpha的数学运算并没有被定义。因为基于颜色的数学运算并没有一个标准的定义。不要寄期望于将来的某个版本可能改变这个问题。

一个基于颜色的运算经常会返回一个非法的颜色。如果某个颜色的色值大于FF或者小于00，颜色值会被设置到FF或者00。同样如果alpha值大于1或者小于0，也会被设置到1或者0。

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

逃逸 Escaping

逃逸允许你使用任何的字符串作为属性和值。任何在~"一些字符" 或者 ~'一些字符' 这样的结构里面的“一些字符”将不会被原原本本的用在样式上，除了变量。

.weird-element {
  content: ~"^//* some horrible but needed css hack";
}

输出（一些特殊字符被完整保留，双斜线也没有被当做注释）

.weird-element {
  content: ^//* some horrible but needed css hack;
}

函数 Functions

http://less.bootcss.com/functions/ 【函数文档】

Less提供了各种各样的函数，比如修改颜色，字符串操作或者数学运算。他们在函数相关的文档中有详细介绍。

他们用起来非常简单。下面的例子使用percentage函数将0.5转换为50%，将base颜色的饱和度提高了5%，然后将一个明亮度提高25，旋转8度（ spun by 8 degrees 调整色相）的颜色设置到了背景上。

命名空间和接收器 Namespaces and Accessors

（不要和CSS中的@namespace 或者 namespace selectors混淆）

有时候，你可能希望将你的混入器分组，或者组织代码结构，或者为了封装。你可以凭直觉在Less里面做这些事情。比如你想把一些样式做成多个集合在一个叫做#bundle的混入器中，但是使用的时候，你只想用它下面中的一个。

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}

现在我们想将.button类的样式混入到#header a 中， 我们可以这样：

#header a {
  color: orange;
  #bundle > .button;
}

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).

注意：在命名空间中定义的变量只会在命名空间中有效，而在外部是不可用的。这个不会翻译。其表达意思应该是：不用用变量来引用命名空间的调用或者mixins的调用。

作用域 Scope

Less中的作用域和其他编程语言很相似。首先Less在本地环境查找 变量 和 混入器，如果没找到，编译器会前往父级查找，如此反复。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

注释 Comments

Less中行注释和块注释都是支持的，而css不支持行注释

/* One hell of a block
style comment! */
@var: red;

// Get in line!
@var: white;

引入 Importing

引入可以完美的工作。你可以引入一个.less文件，所有变量都会生效。扩展名.less是可选的。

@import "library"; // library.less
@import "typo.css";

至此Less主要特性的概况已经介绍完毕，详细的各个特性介绍请参考另一篇译文（翻译中）