从2022年7月26日开始,你可以通过安装HuijiLesser零件来使用less语法为站点编辑样式。

其他文档:

灰机皮肤更新

从2022年9月26日开始,具有开发者权限、且相应站点已安装HuijiLesser的用户可以直接从左边栏唤起huijiLesser。

简介

Less是一种需要预处理的CSS语法。

与CSS的差异

  • Less无法在浏览器中直接运行。在HuijiLesser零件中,Less样式会被编译为CSS样式然后提交到零件(或是临时插入到当前页面)。
  • Less支持双斜杠单行注释(// 单行注释)和块注释语法(/* 多行注释 */

与SASS的差异

  • 具体说,与SCSS的差异不大。如果你能熟练地写SCSS,那使用less就完全没难度。

HuijiLesser与less.js的差异

  • 由于运作方式原因,HuijiLesser不支持@import语法。
  • HuijiLesser的less编译器版本为4.1.3,该版本号会在你查询less官方文档时用到。

Less特性

嵌套

在CSS中,我们通常需要反复书写嵌套元素的选择器。该方法非常不利于维护。但在less中源生支持嵌套功能。例如:

/* less */
.content-entry {
    display:block;
    >.content-entry-title {font-weight:bold;}
    a {color:red}
}
/* 编译结果 */
.content-entry {
  display: block;
}
.content-entry > .content-entry-title {
  font-weight: bold;
}
.content-entry a {
  color: red;
}

嵌套中支持多数CSS选择器。另外,Less支持一个“父选择器”的符号&

“父选择器”代表的是从根选择器到当前选择器的选择器链。因此该符号可以加在新选择器的前面或后面,或在该选择器上扩展其他选择器。

示例如下:

/* less */
.buttongroup {
  .buttonlink {
    background:#333;
    &.primary { // 添加同级的class选择器
      background:red;
    }
    &:hover { // 添加同级伪类
      background:#666;
    }
    &-nobg { // 变更选择器(即将buttonlink变为buttonlink-nobg)
      background:transparent;
    }
    .quote & { // 在选择器链前加.quote
      background:unset;
    }
  }
}

/* 编译结果 */

.buttongroup .buttonlink {
  background: #333;
}
.buttongroup .buttonlink.primary {
  background: red;
}
.buttongroup .buttonlink:hover {
  background: #666;
}
.buttongroup .buttonlink-nobg {
  background: transparent;
}
.quote .buttongroup .buttonlink {
  background: unset;
}

变量

CSS变量类似,Less也有自己的变量定义。不同之处在于,Less变量将会在编译后消失,从而无法被其他less项目(及其他CSS)使用。例如:

/* less */
@main-color:#333;
#huiji-body {
    color:@main-color;
}
/* 编译结果 */
#huiji-body {
  color: #333;
}

在多数情况下,我们不建议使用Less变量语法,而建议使用CSS变量代替。但请注意,CSS变量无法参与less函数和运算功能。

混入(mixin)

可以将另一个选择器中的所有样式混入当前选择器。例如:

/* less */
.button-default {
    display:inline-block;
    padding:12px 6px;
    color:#FFF;
    background-color:#333;
}
.button-primary {
    .button-default();
    background-color:#FF5B00;
    font-weight:bold;
}
/* 编译结果 */
.button-default {
  display: inline-block;
  padding: 12px 6px;
  color: #FFF;
  background-color: #333;
}
.button-primary {
  display: inline-block;
  padding: 12px 6px;
  color: #FFF;
  background-color: #333;
  background-color: #FF5B00;
  font-weight: bold;
}

@规则的嵌套

在Css中,@规则通常需要写在样式表的顶层,这样对于嵌套深层的元素很难维护(需要完整写一遍选择器路径)。在Less中可以使用类似选择器的方式使用@规则。例如:

/* less */
.container {
    width:720px;
    .component {
      width:320px;
      font-size:14px;
      @media (max-width:320px) {
          font-size:12px;
          >span {
          padding:4px;
          }
    }
  }
}
/* 编译结果 */
.container {
  width: 720px;
}
.container .component {
  width: 320px;
  font-size: 14px;
}
@media (max-width: 320px) {
  .container .component {
    font-size: 12px;
  }
  .container .component > span {
    padding: 4px;
  }
}

更多特性

请参考简明语法教程

示例

灰机的多个单页APP(例如上述HuijiLesser零件、朱雀青龙模型查看器和新版灰机首页)样式均使用Less编写(虽然你看到的是编译结果)。

在本页面的这个子页面中列出了在部落与弯刀Wiki中一个组件的Less样式和编译结果。

迁移

HuijiLesser本质上是在站点样式表(Mediawiki:Common.css)的基础上增加了一个零件样式表(Gadget:HuijiLesser.css),因此不存在迁移的必要。但是如果你想将现有的CSS转换为等价的Less样式表(以在未来通过Less维护),以下工具可能可以帮到你:

avatar
0

好耶!

1个月