less语法

作为CSS的一种扩展，LESSCSS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS的语法。这样的设计使得学习LESS很轻松，而且你可以在任何时候回退到CSS。

变量

很容易理解：

@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.";

如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用。这与CSS的机制类似，最后一次定义的值会成为这个属性的值。

比如：

@var: 0;
.class1 {
    @var: 1;
    .class {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

会编译成：

.class1 .class {
    three: 3;
}
.class {
    one: 1;
}

变量是“按需加载”（lazy loaded）的，因此不必强制在使用之前声明。

下面是一个有效的LESS代码片段：

lazy-eval {
    width: @var;
}

@var: @a;
@a: 9%;

下面这个片段也是有效的：

.lazy-eval-scope {
    width: @var;
    @a: 9%;
}

@var: @a;
@a: 100%;

这两个片段都会编译成：

.lazy-eval-scope {
    width: 9%;
}

混合（Mixins）

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

多参数混合

多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。

使用逗号作为参数分隔符意味着可以将逗号分隔的一组值作为一个变量处理。换句话说，如果编译器在混合的定义或者是调用中找到至少一个分号，就会假设参数是使用分号分隔的，所有的逗号都属于参数中的一组值的分隔符。

2个参数，每个参数都含有通过逗号分隔的一组值的情况：.name(1, 2, 3; something, else)。

3个参数，每个参数只含一个数字的情况：.name(1, 2, 3)。

使用一个象征性的分号可以创建一个只含一个参数，但参数包含一组值的混合：.name(1, 2, 3;)。

逗号分隔的一组值参数的默认值：.name(@param1: red, blue;)。

使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时，LESS会应用到所有可以应用的混合上。比如你调用混合时只传了一个参数.mixin(green)，那么所有只强制要求一个参数的混合都会被调用：

.mixin(@color) {
    color-1: @color;
}
.mixin(@color; @padding:2) {
    color-2: @color;
    padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
    color-3: @color;
    padding-3: @padding;
    margin: @margin @margin @margin @margin;
}
.some .selector div {
    .mixin(#008000);
}

编译结果：

.some .selector div {
    color-1: #008000;
    color-2: #008000;
    padding-2: 2;
}

@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 表示所有参数
}

　!important关键字

调用时在混合后面加上!important关键字表示将混合带来的所有属性标记为!important：

.mixin (@a: 0) {
    border: @a;
    boxer: @a;
}
.unimportant {
    .mixin(1);
}
.important {
    .mixin(2) !important;
}

编译成：

.unimportant {
    border: 1;
    boxer: 1;
}
.important {
    border: 2 !important;
    boxer: 2 !important;
}

模式匹配与Guard表达式

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 (@a) {
    color: @a;
}
.mixin (@a, @b) {
    color: fade(@a, @b);
}

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

Guards

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

为了尽可能地符合 CSS 的语言结构，LESS 选择使用 guard混合（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关键字是唯一被判断为真的值，也就是这两个混合是相等的：

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

其他不为 true 的值都判为假：

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

多个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 }

如果需要根据值的类型匹配混合，可以使用 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 query也可以使用同样的方式进行嵌套。

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

&也可以用在混合中用于指示嵌套这个混合的父选择器。

运算

任何数字、颜色或者变量都可以参与运算，运算应该被包裹在括号中。来看一组例子：

@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);

函数

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 }

导入（Import）

在LESS中，你既可以导入CSS文件，也可以导入LESS文件。但只有导入的LESS文件才会被处理（编译），导入的CSS文件会保持原样。如果你希望导入一个CSS文件，保留.css后缀即可：

@import "lib.css";

编译过程中，对导入CSS文件只做一处处理：将导入的语句提到最前，紧跟在@charset之后。

例如输入的文件有导入语句：

h1 { color: green; }
@import "import/official-branding.css?urlParameter=23";

导入语句将被提到最前：

@import "import/official-branding.css?urlParameter=23";
h1 { color: green; }

被导入的LESS文件会被复制到含导入语句的文件中，然后一起编译。导入和被导入的文件共享所有的混合、命名空间、变量以及其它结构。

另外，如果导入语句是通过media query指定的，那么导入的语句编译之后会被包裹在@Media声明中。

例如有被导入的文件library.less：

@imported-color: red;
h1 { color: green; }

主样式文件导入了上面的library.less：

@import "library.less" screen and (max-width: 400px); // 通过media query指定的import
@import "library.less"; // 无media query的import

.class {
    color: @importedColor; // 使用导入的变量
}

将会编译出：

// 对应通过media query指定的import
@media screen and (max-width: 400px) {
    h1 { color: green; }
}

// 对应无media query的import
h1 { color: green; }
.class {
    // 使用导入的变量
    color: #ff0000;
}

LESS文件的导入语句并不强制要求在顶部，它可以被入在规则内部、混合中或者其它的结构中。

例如放在规则内部：

pre {
    @import "library.less";
    color: @importedColor;
}

在library.less中定义的变量和规则都会被投篮到pre的规则中：

pre {
    color: #ff0000; // 定义在library.less中的变量可用
}
pre h1 { // 定义在library.less中的样式规则被嵌套到pre中
    color: green;
}

在v1.3.0 - v1.3.3中，@import允许多次导入同一个文件，可以使用@import-once让同一文件只导入一次。

在v1.4.0中，移除了@import-once，@import的行为就是同一文件只导入一次了。这意味着，如果代码是这样的：

@import “file.less”; @import “file.less”;

那么第二个文件将被忽略。

任何不以.css结尾的文件都被认为是less文件，将被处理。另外，如果文件名没有后缀，LESS会自动在结尾加上.less。下面两种写法是等价的：

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

在v1.4.0中，你可以强制某个文件使用特写的方式来处理，比如：

@import (css) "lib";

将会输出：

@import "lib";

而

@import (less) "lib.css";

会将lib.css引入，并当作LESS文件处理。如果你指定了某个文件是less但是没有包含后缀名，LESS将不会自动添加后缀。

字符串插值

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

@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();
}

在避免编译的值中间也可以像字符串一样插入变量：

.class {
    @what: "Stuff";
    filter: ~"ms:[email protected]{what}()";
}

选择器插值

如果需要在选择器中使用 LESS 变量，只需通过使用和字符串插件一样的 @{selector} 即可，例如：

@name: blocked;
[email protected]{name} {
    color: black;
}

输出：

.blocked {
    color: black;
}

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

media query作为变量

如果你希望在media query中使用LESS变量，你可以直接使用普通的变量方式。例如：

@singleQuery: ~"(max-width: 500px)";
@media screen, @singleQuery {
    set {
        padding: 3 3 3 3;
    }
}

被编译为：

@media screen, (max-width: 500px) {
    set {
        padding: 3 3 3 3;
    }
}

变量必须包含完整的media query。这样写会导致报错：@media screen and @partial {。

在1.4.0中，在开启严格运算模式的情况下，你也可以在media query的条件中插入变量。如@media screen, (max-width: @width) {。

JavaScript求值

在LESS中还可以使用JavaScript表达式来求值。我们不建议谨慎使用这个特性，因为它会使得LESS在其它平台的可编译性变低，也会使得LESS更难维护。如果可能，试着想想能否用一个函数来完成相同的事情，在github上这样的库很多。我们有计划开放对函数的扩展。但，如果你仍然想用的话，你可以通过反引号的方式使用：

@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%);
时间： 2024-10-05 17:15:53

less语法的相关文章

SqlServer给一个表增加多个字段语法

添加字段语法 alter table table_name add column_name +字段类型+ 约束条件 给一个表增加多个字段: use NatureData go alter table XunHu add MaleCount varchar(50) null, FemaleCount varchar(50) null, SubadultCount varchar(50) null, LarvaeCount varchar(50) null, TraceType varchar(50

MySQL（九）之数据表的查询详解（SELECT语法）二

上一篇讲了比较简单的单表查询以及MySQL的组函数,这一篇给大家分享一点比较难得知识了,关于多表查询,子查询,左连接,外连接等等.希望大家能都得到帮助! 在开始之前因为要多表查询,所以搭建好环境: 1)创建数据表suppliers 前面已经有一张表是book表,我们在建立一张suppliers(供应商)表和前面的book表对应. 也就是说 让book中s_id字段值指向suppliers的主键值,创建一个外键约束关系. 其实这里并没有达到真正的外键约束关系,只是模拟,让fruits中的s_id中

linux shell基础语法

1.第一个Shell脚本 打开文本编辑器,新建一个文件,扩展名为sh(sh代表shell),扩展名并不影响脚本执行,见名知意就好,如果你用php写shell 脚本,扩展名就用php好了. 输入一些代码: #!/bin/bash echo "Hello World !" "#!" 是一个约定的标记,它告诉系统这个脚本需要什么解释器来执行,即使用哪一种Shell.echo命令用于向窗口输出文本. 运行Shell脚本有两种方法. 1.1作为可执行程序 将上面的代码保存为t

Linux C中内联汇编的语法格式及使用方法（Inline Assembly in Linux C）

在阅读Linux内核源码或对代码做性能优化时,经常会有在C语言中嵌入一段汇编代码的需求,这种嵌入汇编在CS术语上叫做inline assembly.本文的笔记试图说明Inline Assembly的基本语法规则和用法(建议英文阅读能力较强的同学直接阅读本文参考资料中推荐的技术文章 ^_^). 注意:由于gcc采用AT&T风格的汇编语法(与Intel Syntax相对应,二者的区别参见这里),因此,本文涉及到的汇编代码均以AT&T Syntax为准. 1. 基本语法规则 内联汇编(或称嵌入汇

Python基本语法

Python基本语法 1.第一个Python代码 print('Hello Word!') 2.注释 1.定义:注释即解释,主要用于提示相关代码的信息. 2.注释分类:单行注释和多行注释 单行注释:# 注释内容 多行注释:''' 注释内容 ''' 或 """ 注释内容 """ 3.变量 1.定义:变量就是可以改变的量 2.命名规则: 1.汉字变量名能用,不推荐使用 2.数字不能开头 3.不可以使用特殊字符,除_ 4.变量区分大小写 5.可以使用关

Java基础语法（1）

一.Java概述 1.1Java语言平台 图1-1  java语言平台 注:开发者都是安装javaSE平台的软件. 1.2.跨平台性 平台:指的是操作系统(Windows,Linux,Mac) 跨平台:Java程序可以在任意操作系统上运行,一次编写到处运行 原理:实现跨平台需要依赖Java的虚拟机 JVM (Java Virtual Machine) 图1-2 跨平台版本 1.3      JVM   JRE   JDK说明   -A:什么是JVM JVM是java虚拟机(JVM Java Vi

eclipse使用与java语法规则

eclipse的使用 1.运行点击"三角图标"或右键Run As运行2.3. java语法规范 1.括号要成对出现2.每句代码应该有分号结束3.java语法区分大小写4.一个文件只能写一个带有public的class声明,还必须和文件名一致.一个文件中不可以有多个带有public的修饰符号5.名称写的时候不要包含关键字和非法字符(字母和下划线开头可以,也可以用数字结尾)6.java代码的语法全部都是半角符号7.学会规范的写代码. 写代码的好习惯: 1.常按保存,写完一句或几句就按一次C

js基本语法总结（一）

1.js简介 a)js是一种网页脚本语言,使得浏览器可以与网页互动. js的一种基于对象和事件驱动,具有安全性能的脚本语言,脚本语言就是在客户端的浏览器就可以互动响应处理程序的语言,而不需要服务器的处理和响应. js也可以与服务器交互响应,而服务器语言(asp.php.jsp)需要将命令上传服务器,经服务器处理后回传处理结果. js可以嵌入到html文件,不需要经过web服务器就可以对用户操作作出响应,使得网页与用户很好的交互,利用客户端电脑的资源适当减少服务器端的压力,并减少用户的等待时间.

sass语法基础知识

文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.而本教程中所说的所有sass文件都指后缀名为scss的文件.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. //文件后缀名为sass的语法 body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法 b

JSON语法

JSON基于JavaScript对象字面量 所谓字面量,是对数据值的具体表示.它的字面意思与其想要表达的意思是完全一致的.因为数据交换格式的核心是数据,所以JSON中并不会涉及JavaScript对象字面量中的函数.JSON所基于的JavaScript对象字面量单纯指对象字面量及其属性的语法表示. 名称--值对 JSON中使用冒号(:)来分割名称和值,名称始终在左侧,值始终在右侧. 正确的JSON语法 1.名称始终需要被双引号包裹,而不能使用单引号: 2.为了获得最大可移植性,定义名称时应尽可能