Less ( 变数、import )

虽然原生的 CSS 已经有变数和 import 等功能，但 Less 在这些功能上表现得又更为强大，这篇教学会介绍如何在 Less 中使用变数和 import。

快速导览：

• Less 变数
  • Less 变数替换属性值
  • Less 变数替换选择器名称或内容
  • Less 变数取值
  • Less 变数搭配 @media
• 使用 @import 加载其他 Less 文件

Less 变数

原生 CSS 使用“--”开头作为变数或自订属性的识别符号，而 Less 则是使用“@”开头作为变数的识别符号，变数名称按照基命名规则，*使用英文字母大小写开头，可搭配数字或底线，使用变数虽然很简单，但 Less 变数和原生 CSS 变数有“本质差异”：

CSS 变数：直接在 CSS 中使用，在纯 CSS 中“会”看到变数名称，参考“CSS 变数”。 Less 变数：转换成 CSS 之后会变成对应的数值，在纯 CSS 中“不会”看到变数名称。

Less 变数替换属性值

Less 变数的数值可放入 CSS 各种属性值，转换后会将这些数值放入对应的位置。

/********** Less 寫法 **********/
@color1: blue;
@color2: red;
@size30: 30px;
a {color: @color1;}
a:hover {color: @color2;}
h2 {font-size: 30px;}


/********** 轉換成 CSS **********/
a {color: blue;}
a:hover {color: red;}
h2 {font-size: 30px;}

Less 变数替换选择器名称或内容

Less 变数除了可以取代属性值，也可以使用“@{變數名稱}]”替代选择器“名称”，下方会将元素的 class 名称替换为变数的写法。

/********** Less 寫法 **********/
@name1: apple;
@name2: oxxo;
h2.@{name1} {color: red;}       /* 注意替換名稱的寫法 */
h2.@{name1}-123 {color: blue;}
h2.@{name2} {font-size: 30px;}
h2.@{name2}-123 {font-size: 20px;}


/********** 轉換成 CSS **********/
h2.apple {color: red;}
h2.apple-123 {color: blue;}
h2.oxxo {font-size: 30px;}
h2.oxxo-123 { font-size: 20px;}

使用同样的做法也可以替换属性内容，下方的范例会将图片 url() 的内容使用变数的方式呈现。

/********** Less 寫法 **********/
@website: "https://steam.oxxostudio.tw/";
.banner {
  background: url("@{website}img/oxxo.jpg");
}


/********** 轉換成 CSS **********/
.banner {
  background: url("https://steam.oxxostudio.tw/img/oxxo.jpg");
}

由于 Less 变数使用“字串”的方式替换内容，如果有比较复杂的需求 ( 例如渐层色 )，就需要采用替换变数替换变数内容的做法，才能产生正确的结果。

/********** Less 寫法 **********/
@name1: apple;
@name2: oxxo;
h2.@{name1} {color: red;}       /* 注意替換名稱的寫法 */
h2.@{name1}-123 {color: blue;}
h2.@{name2} {font-size: 30px;}
h2.@{name2}-123 {font-size: 20px;}


/********** 轉換成 CSS **********/
h2.apple {color: red;}
h2.apple-123 {color: blue;}
h2.oxxo {font-size: 30px;}
h2.oxxo-123 { font-size: 20px;}

使用同样的做法也可以替换属性内容，下方的范例会将图片 url() 的内容使用变数的方式呈现。

/********** Less 寫法 **********/
@color1: red;
@color2: blue;
@bg: linear-gradient(to right, @color1, @color2);
.main {
  background: @bg;
}


/********** 轉換成 CSS **********/
.main {
  background: linear-gradient(to right, red, blue);
}

Less 变数取值

Less 变数不一定要在使用之前宣告，使用后再宣告也不会发生错误，下方范例会在使用 @color 之后才宣告变数，仍然会产生正确的结果。

/********** Less 寫法 **********/
h1{color: @color}
@color: red;      /* 放在後方才宣告 */


/********** 轉換成 CSS **********/
h1 {color: red;}

Less 的变数取值和 CSS 相同，会取用最靠近元素的变数，例如同层级有变数就会先采用这个变数，如果同层级没有变数，就会向父层级取用变数，下方范例会展示不同层级中都有相同名称但不同内容的变数，最后取用结果就会采用最靠近元素的变数。

/********** Less 寫法 **********/
@color: red;
  
.apple {
  @color: blue;
  color: @color;
  .oxxo {
    @color: green;
    color: @color;
    .banana {
      @color: yellow;
      h2 {
        color: @color;
      }
    }
  }
}
h2 {
  color: @color;
}


/********** 轉換成 CSS **********/
.apple {color: blue;}
.apple .oxxo {color: green;}
.apple .oxxo .banana h2 {color: yellow;}
h2 {color: red;}

Less 变数可以赋值给不同的 Less 变数，也可以搭配原生的 CSS 变数共同使用，下方范例会呈现不同变数之间互相赋值的效果。

/********** Less 寫法 **********/
@color1: red;
@color2: @color1;
:root {
  --oxxo: @color2;
  @color3: var(--oxxo);
}
.apple {color: @color2;}
.oxxo {color: var(--oxxo);}


/********** 轉換成 CSS **********/
:root {--oxxo: red;}
.apple {color: red;}
.oxxo {color: var(--oxxo);}

Less 变数除了使用宣告的方式赋予数值，3.0 版本之后也可以使用“样式”作为变数，使用方式需要改用“$”开头作为识别符号，使用时同样会取用最靠近元素的变数作为属性值，下方范例会使用 color 样式作为变数。

/********** Less 寫法 **********/
.apple {
  color: red;
  background-color: $color;
  .oxxo {
    background-color: $color;
    .banana {
      color: blue;
      background-color: $color;
    }
  }
}


/********** 轉換成 CSS **********/
.apple {
  color: red;
  background-color: red;
}
.apple .oxxo {
  background-color: red;
}
.apple .oxxo .banana {
  color: blue;
  background-color: blue;
}

Less 变数搭配 @media

@media 是使用 CSS 制作 RWD 网页必备的技能，如果将 Less 变数搭配 @media，就能透过巢状结构撰写 @media，转换后就会将 @media 独立成原本 CSS 的格式。

/********** Less 寫法 **********/
@min768: (min-width: 768px);
@min1024: (min-width: 1024px);
.apple {
  @media @min768 {
    font-size: 1.2rem;
  }
}
.oxxo {
  @media @min1024 {
    font-size: 1.2rem;
  }
}


/********** 轉換成 CSS **********/
@media (min-width: 768px) {
  .apple {
    font-size: 1.2rem;
  }
}
@media (min-width: 1024px) {
  .oxxo {
    font-size: 1.2rem;
  }
}

如果巢状结构中的 @media 里还包覆着其他 @media，转换后会自动变成 and 的形式。

/********** Less 寫法 **********/
@min768: (min-width: 768px);
@max1024: (max-width: 1024px);
.apple {
  @media @min768 {
  @media @max1024 {
    font-size: 1.2rem;
  }
  }
}


/********** 轉換成 CSS **********/
@media (min-width: 768px) and (max-width: 1024px) {
  .apple {
    font-size: 1.2rem;
  }
}

使用 @import 加载其他 Less 文件

Less 和原生的 CSS 一样都有提供“@import”功能，为了区隔和原生 CSS 的 @import，Less 额外提供“加载选项”的设定，使用的语法为“@import (選項) 載入的檔案”。

使用“once”选项默认值时，则后方名同的文件就会被忽略。

/********** Less 寫法 **********/
@import "apple.less";
@import "apple.less";   /* 這行會被忽略 */
@import (once) "oxxo.less";
@import (once) "oxxo.less";   /* 這行會被忽略 */

如果使用“multiple”选项默认值时，则会重复加载相关内容。

/********** oxxo.less 內容 **********/
a {color: red;}

/********** Less 寫法 **********/
@import (multiple) "oxxo.less";
@import (multiple) "oxxo.less";

/********** 轉換成 CSS **********/
a {color: red;}
a {color: red;}   /* 重複載入 */

如果要在 Less 中使用原生 CSS 的 @import，则需要特别标注“css”选项下方写法：

/********** Less 寫法 **********/
@import (css) "oxxo.css";

/********** 轉換成 CSS **********/
 @import "oxxo.css";

小结

这篇教学所介绍的 Less 变数用法，和原生 CSS 的变数有着本质上的不同，但相对来说如果程序码非常复杂，使用 Less 变数就能大幅简化这些程序码，也更容易进行管理。

意见反馈