你的分享就是我们的动力 ---﹥

less学习-语法

时间:2013-06-17 13:52来源:www.chengxuyuans.com 点击:

语法

LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,所以学习 LESS 是一件轻而易举的事情,果断学习之!

变量

很容易理解:

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

    #header { color: @light-blue; }

输出:

#header { color: #6c94be; }

甚至可以用变量名定义为变量:

@fnord: "I am fnord.";
    @var: 'fnord';
    content: @@var;

解析后:

content: "I am fnord.";

请注意 LESS 中的变量为完全的 ‘常量’,所以只能定义一次。

混合

在 LESS 中我们可以定义一些通用的属性集为一个 class,然后在另一个 class 中去调用这些属性,下面有这样一个 class:

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

那如果我们现在需要在其他 class 中引入那些通用的属性集,那么我们只需要在任何 class 中像下面这样调用就可以了:

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

.bordered class 里面的属性样式都会在 #menu a.post a 中体现出来:

#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;
    }

任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入。

带参数混合

在 LESS 中,你还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    }

然后在其他 class 中像这样调用它:

#header {
    .border-radius(4px);
    }
    .button {
    .border-radius(6px);
    }

我们还可以像这样给参数设置默认值:

.border-radius (@radius: 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    }

所以现在如果我们像这样调用它的话:

#header {
    .border-radius;
    }

radius 的值就会是 5px。

你也可以定义不带参数属性集合,如果你想隐藏这个属性集合,不让它暴露到 CSS 中去,但是你还想在其他的属性集合中引用,你会发现这个方法非常的好用:

.wrap () {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
    }

    pre { .wrap }

输出:

pre {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
    }

@arguments 变量

@arguments包含了所有传递进来的参数。 如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
    box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    }
    .box-shadow(2px, 5px);

将会输出:

  box-shadow: 2px 5px 1px #000;
    -moz-box-shadow: 2px 5px 1px #000;
    -webkit-box-shadow: 2px 5px 1px #000;

高级参数用法与 @rest 变量

如果需要在 mixin 中不限制参数的数量,可以在变量名后添加 ...,表示这里可以使用 N 个参数。

.mixin (...) {        // 匹配 0-N 个参数
    .mixin () {           // 不匹配任何参数
    .mixin (@a: 1) {      // 匹配 0-1 个参数
    .mixin (@a: 1, ...) { // 匹配 0-N 个参数
    .mixin (@a, ...) {    // 匹配 1-N 个参数

此外:

.mixin (@a, @rest...) {
    // @rest 表示 @a 之后的参数
    // @arguments 表示所有参数
    }

Pattern-matching and Guard expressions

LESS 提供了通过参数值控制 mixin 行为的功能,让我们先从最简单的例子开始:

.mixin (@s, @color) { ... }

    .class {
    .mixin(@switch, #888);
    }

如果要根据 @switch 的值控制 .mixin 行为,只需按照下面的方法定义 .mixin

.mixin (dark, @color) {
    color: darken(@color, 10%);
    }
    .mixin (light, @color) {
    color: lighten(@color, 10%);
    }
    .mixin (@_, @color) {
    display: block;
    }

现在运行:

@switch: light;

    .class {
    .mixin(@switch, #888);
    }

将会得到以下 CSS:

.class {
    color: #a2a2a2;
    display: block;
    }

导入给 .mixin 的颜色将执行 lighten 函数,如果 @switch 的值是 dark,那么则会执行 darken 函数输出颜色。

以下是整个过程如何发生的:

  • 第一条 mixin 没有匹配,因为不满足 dark 条件;
  • 第二条 mixin 可以被匹配,因为它满足了 light 条件;
  • 第三条 mixin 也可以被匹配,因为它接受任何参数。

只有满足匹配要求的 mixin 才可以被使用。变量可以使用任何值,而变量之外的参数只有它们的值完全相等时才可以匹配成功。

我们也可以根据参数的数量进行匹配,比如:

.mixin (@a) {
    color: @a;
    }
    .mixin (@a, @b) {
    color: fade(@a, @b);
    }

调用 .mixin 时,如果使用了一个参数,输出第一条 .mixin,使用了两个参数,则输出第二条。

Guards

与上面匹配值,或者参数数量的情况不同,Guards 被用来匹配表达式 (expressions)。如果你很熟悉编程函数的用法,相信你已经掌握它的用法了。

为了尽可能地符合 CSS 的语言结构,LESS 选择使用 guarded mixins (类似于 @media 的工作方式)执行条件判断,而不是加入 if/else 声明。

首先通过下面的例子开始介绍:

.mixin (@a) when (lightness(@a) >= 50%) {
    background-color: black;
    }
    .mixin (@a) when (lightness(@a) < 50%) {
    background-color: white;
    }
    .mixin (@a) {
    color: @a;
    }

要点在于关键词 when,它引入了一条 guard 条件 (这里只用到一个 guard)。现在如果运行下面的代码:

.class1 { .mixin(#ddd) }
    .class2 { .mixin(#555) }

将会得到以下输出结果:

.class1 {
    background-color: black;
    color: #ddd;
    }
    .class2 {
    background-color: white;
    color: #555;
    }

Guards 支持的运算符包括:> >= = =< <。说明一下,“true”关键字是唯一被判断为真的值,它使这两个mixin相等:

.truth (@a) when (@a) { ... }
    .truth (@a) when (@a = true) { ... }

其他不等于 true 的值是无效的:

.class {
    .truth(40); // 不会匹配上面的 mixin
    }

Guards 通过 ‘,’ 逗号表示分隔,如果 guards 的结果为 true,匹配成立:

.mixin (@a) when (@a > 10), (@a < -10) { ... }

注意:也可以比较参数,或者不设定参数:

@media: mobile;

    .mixin (@a) when (@media = mobile) { ... }
    .mixin (@a) when (@media = desktop) { ... }

    .max (@a, @b) when (@a > @b) { width: @a }
    .max (@a, @b) when (@a < @b) { width: @b }

如果需要根据值的类型 (value type) 匹配 mixin,可以使用 is* 函数:

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
    .mixin (@a, @b: black) when (iscolor(@b)) { ... }

几个检查基本类型的函数:

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

如果需要检查一个值,准确的说是数字使用了哪个单位,可以使用下面三个函数:

  • ispixel
  • ispercentage
  • isem

最后,你可以使用关键词 and 在 guard 中加入额外的条件:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

或者,使用关键词 not 否定条件:

.mixin (@b) when not (@b > 0) { ... }

嵌套规则

LESS 可以让我们以 嵌套 的方式编写层叠样式。 让我们先看下下面这段 CSS:

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

在 LESS 中, 我们就可以这样写:

#header {
    color: black;

    .navigation {
    font-size: 12px;
    }
    .logo {
    width: 300px;
    &:hover { text-decoration: none }
    }
    }

或者这样写:

#header        { color: black;
    .navigation  { font-size: 12px }
    .logo        { width: 300px;
    &:hover    { text-decoration: none }
    }
    }

代码更简洁了,而且感觉跟 DOM 结构格式有点像。

注意 & 符号的使用 — 如果你想写串联选择器,而不是写后代选择器,就可以用到 & 了。这点对伪类尤其有用如 :hover:focus

例如:

.bordered {
    &.float {
    float: left;
    }
    .top {
    margin: 5px;
    }
    }

会输出:

.bordered.float {
    float: left;
    }
    .bordered .top {
    margin: 5px;
    }

嵌套 Media Queries

Media queries 允许像选择器那样进行嵌套。

.one {
    @media (width: 400px) {
    font-size: 1.2em;
    @media print and color {
    color: blue;
    }
    }
    }

输出:

@media (width: 400px) {
    .one {
    font-size: 1.2em;
    }
    }
    @media (width: 400px) and print and color {
    .one {
    color: blue;
    }
    }

& 的高级用法

嵌套的外层含有多个选择器的情况下,& 符号可以交替输出他们的顺序。

例如:

.child, .sibling {
    .parent & {
    color: black;
    }
    & + & {
    color: red;
    }
    }

输出:

.parent .child,
    .parent .sibling {
    color: black;
    }
    .child + .child,
    .child + .sibling,
    .sibling + .child,
    .sibling + .sibling {
    color: red;
    }

& 也可以用在 mixin 中表示嵌套这个 mixin 的父选择器。

运算

任何数字、颜色或者变量都可以参与运算,来看一组例子:

@base: 5%;
    @filler: @base * 2;
    @other: @base + @filler;

    color: #888 / 4;
    background-color: @base-color + #111;
    height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望,它能够分辨出颜色和单位。如果像下面这样单位运算的话:

@var: (1px + 5);

LESS 会输出 6px

括号也同样允许使用:

width: ((@var + 5) * 2);

并且可以在复合属性中进行运算:

border: (@width * 2) solid black;

函数

LESS 提供了多种函数用于控制颜色变化、处理字符串、算术运算等等。这些函数会在下面的函数列表部分详细介绍。

函数的用法非常简单,下面这个例子将介绍如何将 0.5 转换为 50%;颜色饱和度增加 5%;以及颜色亮度降低 25% 色相值增加 8 等用法:

@base: #f04615;
    @width: 0.5;

    .class {
    width: percentage(0.5); // returns `50%`
    color: saturate(@base, 5%);
    background-color: spin(lighten(@base, 25%), 8);
    }

命名空间

有时候,你可能为了更好组织 CSS 或者单纯是为了更好的封装,将一些变量或者混合模块打包起来,你可以像下面这样在 #bundle 中定义一些属性集之后可以重复使用:

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

你只需要在 #header a 中像这样引入 .button

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

作用域

LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止。

@var: red;

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

    #footer {
    color: @var; // red
    }

注释

CSS 的注释格式在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */
    .class { color: black }

LESS 同样也支持双斜线的注释,但是编译成 CSS 的时候自动过滤掉:

// Hi, I'm a silent comment, I won't show up in your CSS
    .class { color: white }

Importing

你可以在 main 文件中通过下面的格式导入 .less 文件, .less 后缀可带可不带:

@import "lib.less";
    @import "lib";

如果你想导入一个 CSS 文件而且不想 LESS 对它进行处理,只需要使用 .css 后缀就可以:

@import "lib.css";

这样 LESS 就会跳过它不去处理它。

为了避免重复导入文件,使用 @import-once 限制文件只允许被导入一次。

@import-once "lib.less";
    @import-once "lib.less"; // will be ignored

LESS 1.4.0 版将默认执行 @import-once

字符串插值

变量可以用类似 ruby 和 php 的方式嵌入到字符串中,像 @{name} 这样的结构:

@base-url: "http://assets.fnord.com";
    background-image: url("@{base-url}/images/bg.png");

避免编译

有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法。

要输出这样的值我们可以在字符串前加上一个 ~,例如:


    .class {
    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
    }

我们可以将要避免编译的值用 “ ” 包裹起来,输出结果为:


    .class {
    filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
    }

Selector Interpolation

如果需要在选择器中使用 LESS 变量,只需通过 @{selector} 插值语句导入变量,例如:

@name: blocked;
    .@{name} {
    color: black;
    }

输出:

.blocked {
    color: black;
    }

注意:(~"@{name}") 语句可以在 LESS 1.3.1 等之前版本中使用,但 1.4.0 版将不再支持这种用法。

JavaScript evaluation

JavaScript 表达式也可以在 .less 文件中使用,可以通过反引号的方式使用(但是不建议使用):

@var: `"hello".toUpperCase() + '!'`;

输出:

@var: "HELLO!";

注意你也可以同时使用字符串插值和避免编译:

@str: "hello";
    @var: ~`"@{str}".toUpperCase() + '!'`;

输出:

@var: HELLO!;

它也可以访问 JavaScript 环境:

@height: `document.body.clientHeight`;

如果你想将一个 JavaScript 字符串解析成16进制的颜色值,你可以使用 color 函数:

@color: color(`window.colors.baseColor`);
    @darkcolor: darken(@color, 10%);

转载注明地址:http://www.chengxuyuans.com/css/64757.html