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主要特性的概况已经介绍完毕，详细的各个特性介绍请参考另外一篇译文（翻译中）