mix-in class selectors

语言特性 | Less 中文网 http://lesscss.cn/features/#mixins-feature

Mixins

"mix-in" properties from existing styles

You can mix-in class selectors and id selectors, e.g.

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

which results in:

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

Notice that when you call the mixin, the parentheses are optional.

// these two statements do the same thing:
.a();
.a;

Mixin – Pug 中文文档 https://pug.bootcss.com/language/mixins.html

混入 Mixin

混入是一种允许您在 Pug 中重复使用一整个代码块的方法。

//- 定义

mixin list

ul

li foo

li bar

li baz

//- 使用

+list

+list

<ul>

<li>foo</li>

<li>bar</li>

<li>baz</li>

</ul>

<ul>

<li>foo</li>

<li>bar</li>

<li>baz</li>

</ul>

它们会被编译成函数形式，您可以传递一些参数：

mixin pet(name)

li.pet= name

ul

+pet('猫')

+pet('狗')

+pet('猪')

<ul>

<li class="pet">猫</li>

<li class="pet">狗</li>

<li class="pet">猪</li>

</ul>

混入的块

混入也可以把一整个代码块像内容一样传递进来：

mixin article(title)

.article

.article-wrapper

h1= title

if block

block

else

p 没有提供任何内容。

+article('Hello world')

+article('Hello world')

p 这是我

p 随便写的文章

<div class="article">

<div class="article-wrapper">

<h1>Hello world</h1>

<p>没有提供任何内容。</p>

</div>

</div>

<div class="article">

<div class="article-wrapper">

<h1>Hello world</h1>

<p>这是我</p>

<p>随便写的文章</p>

</div>

</div>

混入的属性

mixin link(href, name)

//- attributes == {class: "btn"}

a(class!=attributes.class href=href)= name

+link('/foo', 'foo')(class="btn")

<a class="btn" href="/foo">foo</a>

提示

attributes 里的值已经被（作为标签属性）转义了，所以您可能需要用 != 的方式赋值以避免发生二次转义（详细解释可以查阅不转义的属性）。

您也可以直接用 &attributes 方法来传递 attributes 参数：

mixin link(href, name)

a(href=href)&attributes(attributes)= name

+link('/foo', 'foo')(class="btn")

<a class="btn" href="/foo">foo</a>

提示

+link(class="btn") 这种写法也是允许的，且等价于 +link()(class="btn")，因为 Pug 会判断括号内的内容是属性还是参数。但我们鼓励您使用后者的写法，明确地传递空的参数，确保第一对括号内始终都是参数列表。

剩余参数

您可以用剩余参数（rest arguments）语法来表示参数列表最后传入若干个长度不定的参数，比如：

mixin list(id, ...items)

ul(id=id)

each item in items

li= item

+list('my-list', 1, 2, 3, 4)

<ul id="my-list">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

Mixin - MDN Web Docs Glossary: Definitions of Web-related terms | MDN https://developer.mozilla.org/en-US/docs/Glossary/Mixin

Mixin

A mixin is a class or interface in which some or all of its methods and/or propertiesare unimplemented, requiring that another class or interface provide the missing implementations. The new class or interface then includes both the properties and methods from the mixin as well as those it defines itself. All of the methods and properties are used exactly the same regardless of whether they're implemented in the mixin or the interface or class that implements the mixin.

The advantage to mixins is that they can be used to simplify the design of APIs in which multiple interfaces need to include the same methods and properties.

For example, the WindowOrWorkerGlobalScope mixin is used to provide methods and properties that need to be available on both the Window and WorkerGlobalScope interfaces. The mixin is implemented by both of those interfaces.

lessc src/style/picker-arrow_.less src/style/picker-arrow_.wxss

快速入门 | Less.js 中文文档 https://less.bootcss.com/

混合（Mixins）

Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set. So say we have the following class:

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

<font color=red>Getting started | Less.js http://lesscss.org/</font>

使用方法 | Less 中文网 http://lesscss.cn/usage/

Node.js 环境中使用 Less ：

npm install -g less

> lessc styles.less styles.css

混合（Mixins）

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

less入门教程 - xin.wang的博客 - CSDN博客 https://blog.csdn.net/wangxin1982314/article/details/80351021

.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded-corners;
}

#footer {
.rounded-corners(10px);
}

#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

less

git commit -a -m "M 1、对TODO中完成项划线；2、picker-箭头less代码修改：在符合语法、实现功能的基本前提下，尽量使得代码清晰明了，可读性强，可维护性强；";git push origin master:master

.f(@margin-top: 10px, @border-color: #2aabe5 transparent transparent transparent, @border-width: 0 10px 10px 10px) {

margin-top: @margin-top;

width: 0;

height: 0;

border-style: solid;

border-color: @border-color;

border-width: @border-width;

}

.g(@left: 200rpx) {

position: absolute;

top: 60px;

z-index: 100;

left:@left;

}

.picker-arrow_left_ {

.g(@left: 200rpx)

}

.picker-arrow_right_ {

.g(@left: 620rpx)

}

.picker-arrow_head_ {

.f(@margin-top: 0, @border-color: transparent transparent #2aabe5 transparent, @border-width: 0 10px 10px 10px)

}

.picker-arrow_foot_ {

.f(@margin-top: 10px, @border-color: #2aabe5 transparent transparent transparent, @border-width: 10px 10px 0 10px)

}

css

.picker-arrow_left_ {

position: absolute;

top: 60px;

z-index: 100;

left: 200rpx;

}

.picker-arrow_right_ {

position: absolute;

top: 60px;

z-index: 100;

left: 620rpx;

}

.picker-arrow_head_ {

margin-top: 0;

width: 0;

height: 0;

border-style: solid;

border-color: transparent transparent #2aabe5 transparent;

border-width: 0 10px 10px 10px;

}

.picker-arrow_foot_ {

margin-top: 10px;

width: 0;

height: 0;

border-style: solid;

border-color: #2aabe5 transparent transparent transparent;

border-width: 10px 10px 0 10px;

}

 

 

 小程序 less  wxss   混合 Mixins  picker样式优化       箭头样式的实现原理

 

 

 

lessc src/style/picker-arrow_.less src/style/picker-arrow_.wxss

 

 

 

 

随动箭头

<view>

<picker-view indicator-style="height: 50rpx;" style="width: 100%; height: 150px;position: relative;font-size:18px;" @change="onPickerChange">

<view class="picker-arrow_">

<view class="picker-arrow_head_" style="display:{{pickerItemHeadFoot[0][0] ? 'none':'block'}}"></view>

<view class="picker-arrow_foot_" style="display:{{pickerItemHeadFoot[0][1] ? 'none':'block'}}"></view>

</view>

<view class="picker-arrow_ picker-arrow_right_one_">

<view class="picker-arrow_head_" style="display:{{pickerItemHeadFoot[1][0] ? 'none':'block'}}"></view>

<view class="picker-arrow_foot_" style="display:{{pickerItemHeadFoot[1][1] ? 'none':'block'}}"></view>

</view>

<picker-view-column>

<view wx:for="{{bizArea}}" style="line-height: 34px">{{item[0]}}</view>

</picker-view-column>

<picker-view-column>

<view wx:for="{{bizType}}" style="line-height: 34px">{{item[0]}}</view>

</picker-view-column>

</picker-view>

</view>

可优化:

onTap(e)  k-v 传值；

不传参，各个子页面调用时候传参

问题:

是否不显示的情况下为block？

px rpx  统一

.question-mark {
@c: #adadad; 
line-height: 20px;
border: 1px solid @c;
color:@c; 
}