基础系列-less学习-1

发表于 2019-04-30 更新于 2021-05-07 分类于前端，基础

本文字数： 8.3k 阅读时长 ≈ 14 分钟

1. &（表示父级选择器）

就近原则

a {
  color: blue;
  &:hover {
    color: green;
  }
}

编译后：

a {
  color: blue;
}

a:hover {
  color: green;
}

重复类名

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

编译后：

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

多个&

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

编译后：

.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

改变选择器的顺序

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & { // .no-borderradius .header .menu
      background-image: url('images/button-background.png');
    }
  }
}

罗列所有组合

p, a, ul, li {
  border-top: 2px dotted #366;
  & + & { // p + p, p + a, p + ul...
    border-top: 0;
  }
}

注意

&表示所有父选择器

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

编译后：

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}

2.Mixin

混合使用已存在的属性值

可以混合使用类选择器和id选择器

.a, #b { // 类选择器和id选择器
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

编译后：

.a, #b { 
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

不在css中输出的混合用法

.my-mixin {
  color: black;
}
.my-other-mixin() { // 只是在less中声明，并没有实际的类与之对应
  background: white;
}
.class {
  .my-mixin();
  .my-other-mixin();
}

编译后：

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

选择器混用

.my-hover-mixin() { // 一个mixin中可以包含多个选择器或属性
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

编译后：

button:hover {
  border: 1px solid red;
}

namespace

如果在更复杂的选择器中混合属性，可以堆叠多个id或类

#outer() {
  .inner {
    color: red;
  }
}

.c {
  #outer > .inner();
}

#my-library {
  .my-mixin() {
    color: black;
  }
}
// which can be used like this
.class {
  #my-library.my-mixin();
}

使用方式

// all do the same thing
#outer > .inner();
#outer .inner();
#outer.inner();

参数混合

.border-radius(@radius) { // 默认值 .border-radius(@radius: 5px)
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
// use
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

多个参数用分号分隔。

可以定义多个名称和参数相同的mixin是合法的。

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

命名参数

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

@arguments参数，类似js中的函数arguments参数用法。

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

编译后：

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

模式匹配

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

// use
@switch: light;

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

编译后:

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

namespaces and accessors

如果在某个class中想使用某个Mixin中的样式或者修改

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

/* 使用Mixin中的部分样式 */
#header a {
  color: orange;
  #bundle.button();  // can also be written as #bundle > .button
}

3.At-rule与冒泡

At-rule: CSS样式声明，以@开头， @charset(标识符)

At-rule:

@charset – 定义被样式表使用的字符集，例如@charset “UTF-8”;

@import – 导入外部的CSS样式表，例如@import “./common.less”

@namespace – 命名空间，对于XML HTML(XHTML)元素可以用作CSS中的选择器，例如：

/* Namespace for XHTML */
@namespace url(http://www.w3.org/1999/xhtml);

/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);

嵌套At-rule：

@media – 条件组规则。如果设备符合标准定义的条件查询则使用该媒体，常用

@font-face – 描述了一个将从外部下载的字体

@keyframes – 描述了中间步骤在CSS动画的序列

@page – 用于在打印文档时修改某些CSS属性

@supports – 条件组规则，如果浏览器满足给出的规则，则把它应用到内容中，特征查询。

@document – 条件组规则，如果被用到文档的CSS样式表满足了给定的标准，那么将被应用到所有的内容中。

常用例子：

/* iPhone in Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .module { width: 100%; }
}

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

@keyframes pulse {
  0% {
    background-color: #001f3f;
  }
  100% {
    background-color: #ff4136;
  }
}

/* Check one supported condition */
@supports (display: flex) {
  .module { display: flex; }
}

/* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
  .module { display: flex; }
}

Less中使用At-rule

@media或@supports的规则可以与选择器相同的方式嵌套，编译后At-rule会在外部，其他样式顺序不变。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

编译后，冒泡：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

4.运算

运算后的结果单位以最左边有单位的数据为最终的运算结果单位

calc()

calc()宾部队数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

5.转义

转义允许使用任意字符串作为属性或变量值，使用方法像正常属性一样，除了插值

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

编译为：

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

Less3.5后，

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

6.函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。

可以使用 js 函数进行编写

7.Maps 映射

Less 3.5+

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

编译后：

.button {
  color: blue;
  border: 1px solid green;
}

8.Scope(作用域)

在子元素找不到可用的变量会在父级中查找继承。变量声明不用提前声明。

9.注释

/* 一个块注释
 * style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;

10.变量

可以声明变量的如选择器名、属性名、urls、@import

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

// 选择器
// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

// urls
// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

// @import
// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

//properties
@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

重新声明变量

@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}

定义两次变量时，从当前作用域向上搜索，使用变量的最后一个定义。

属性值作为变量

less 3.0.0+

.widget {
  color: #efefef;
  background-color: $color;
}

如果有两个相同的属性声明，最后使用的是最后属性使用的值

.block {
  color: red; 
  .inner {
    background-color: $color; // blue
  }
  color: blue;  
}

11.Exend(继承，扩展)

less的选择器伪类，扩展选择器，很强大的一个功能，待详细研究。

例如

nav ul {
  &:extend(.inline); 
    // 将选择器扩展到.inline类，无论.inline类出现在何处，声明块将保持原样
  background: blue;
}
.inline {
  color: red;
}

编译后：

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

12.合并

可以将多个属性的值合并到单个属性下的都好或空格分隔列表中。对于背景、变换等属性很有用。

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

编译后：

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}