table of Contents
1.4 less direct style can be inherited in other selectors
1.5 Mixin defaults and uncertain parameters
1.6 Mixin determination condition
1. Mix (Mixin)
1.1 Mixin definition
Mixin is defined as less official website: mixing (Mixin) A is a set of attributes from a rule set comprising a method according to another set of rules (or mixed) to.
But I feel a little difficult to understand this argument, we can easily understand that the function can be encapsulated CSS code, called in other selector, improve reusability and maintainability of the code.
Mixins bit like a function, in the definition, by name calling. (Also supports dynamic parameter passing)
You can mix a defined class A relaxed introduction to another class B in order to achieve a simple class B inherits all the attributes of the class A, we can also take the call parameters, just use the same function
Look at a simple example:
.color {
background-color:#58a;
color:18px;
}Application of this class (class)
.box {
width:100px;
height:50px;
.color();
}
.wrap {
width:100px;
height:50px;
border:1px solid red;
.color();
}In this way the color can be applied to the class of the .box and .wrap ..
Next we detail the specific methods defined and invoked Mixins like look.
1.2 Mixin definition
There are two defined mixing ways, one is to define the parameters, the other parameters are defined.
-
No defined parameters
Mixed name () {
Css code package
}
-
Definition of parameters
. Compound names (1 @ parameters: default value of the parameter, the parameter @ 2: ...... parameter's default value) {
Css code package
}
1.3 calls mixed
grammar
Selector{
Mixed name (@ parameters)
}
// 使用混入
@baseColor: #369;
.box p {
.error(@baseColor, 30px)
}Example calls
It is noteworthy that in the absence of parameters, can also call without parentheses.
.size {
width: 100px;
height: 100px;
border:1px solid green;
}
#box{
.size(); //加括号调用
background-color: #58a;
}
.wrap {
.size; //没有参数的情况下不加括号也可以
background-color: skyblue;
}If you need Mixin dynamic parameters, you must pass parameters in parentheses:
.init(@width,@height,@color) {
width:@width;
height: @height;
color:@color;
}
@width:200px;
@height:200px;
@color:red;
.box1{
.init(@width, @height, @color);
background-color: skyblue;
}
.wrap {
.init(300px,100px,red);
border:1px solid blue;
}The results are as follows:
1.4 less direct style can be inherited in other selectors
.box {
width:100px;
height:100px;
color:white;
}
.wrap {
.box; //.wrap会直接继承.box中已写的样式
backgorund-color:blue;
}Mixin in addition to writing style selection, you can also write variables
//Mixin里除了可以写样式,选择器, 还可以写变量
.mixin() {
@width: 100%;
@height: 200px;
}
.box1 {
.mixin();
width: @width;
height: @height;
border:1px solid red;
}Mixin addition to returning variables can also return Mixin.
// Mixins 里除了返回变量,还可以返回Mixins
#box(@color){
.wrap(){
width:500px;
height:100px;
background:@color;
}
}
.box1{
#box(red); // 执行第一个Mixin是为了能够使用里面的Mixin
.wrap(); // 第二个执行Mixin里面的Mixin
}3.5 selector can be used in the Mixin
.hover(@color){
&:hover{
background:@color;
}
}
.wrap{
width: 100px;
height: 100px;
background: red;
&:hover > span{ //注意在此处的&与冒号之间不能有空格,等价 于.wrap:hover >span
background:skyblue;
}
// .hover(skyblue) //如果只是当前元素添加hover效果,而不是给当前元素的子元素或兄弟元素添加,那么&可省略
}Alone add style to hover box element
.hover(@color){
&:hover{
background:@color;
}
}
.box1{
width: 200px;
height: 200px;
margin-top:20px;
background: skyblue;
&:hover{
background:red;
}
// .hover(red); //上下两种弄方式等效
}1.5 Mixin defaults and uncertain parameters
-
Defaults:
mixin can use the default value, if in the absence of arguments passed, then the default value.
If not set the default value, the value will be given in the MIxin without parameters, a default value is equal to the number of arguments passed and the number of parameters must be provided when the.
.size(@width : 100px, @height : 100px , @color : pink){
width: @width;
height: @height;
background-color: @color;
}
.box1 {
.size(50px,50px,#58a); //使用自己所传入的参数
border:3px solid pink;
}
.wrap {
.size; //使用已经设置的默认参数
color:#fff;
}-
Uncertain parameters
... is @reset remaining parameters, all the parameters will be added to the remaining are in @arguments
// ... 就是@reset 剩余参数, 会将剩余的所有参数都加到@arguments里
.boxShadow(...){
box-shadow: @arguments;
}
.box1{
.boxShadow(1px,4px,30px,red);
}
// @arguments是处理第一个实参外的所有实参的集合
.boxShadow(@width,...){
box-shadow: @arguments;
}
.wrap{
.boxShadow( 50px,1px,4px,30px,red);
}After compiling the results into css:
.box1 {
box-shadow: 1px 4px 30px red;
}
.wrap {
box-shadow: 50px 1px 4px 30px red;
}
1.6 Mixin determination condition
Less is not if / else but with one less when, and, not with "" syntax.
1. when expressed when using Mixin When the latter condition must be met
#box(@width, @height, @color) when (@width > 100px){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(101px,50px,pink)
}2. If there are two conditions must be met, and use
// 这里必须满足传递的宽度和颜色必须同时同满足条件才能执行Mixin
#box(@width, @height, @color) when (@width > 100px) and (@color = pink){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(100px,50px,skyblue)
}3. If you need to exclude certain conditions in order to use Mixin, use not
// 这里排除颜色为pink ,除了pink颜色值都可以运行Mixin
#box(@width, @height, @color) when not (@color = pink){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(100px,50px,skyblue)
}4. If a plurality of conditions are required as long as the implementation Mixin, commas
// 虽然不满足宽度大于等于100px,但是满足为了颜色是skyblue 所以Mixin会执行
#box(@width, @height, @color) when (@width >= 100px),(@color = skyblue){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(50px,50px,skyblue)
}1.7 Pattern Matching
Style display according to conditions similar to JS in the switch, in some cases, we want to change the default rendering mix based on the passed parameters.
such as:
Equivalent to the same definition of a hybrid name, depending on the mix of other names incoming perform different mix points, but there is a common branch, any one branch will be called
_ Represents Match all, often used to define a common portion
grammar:
Pattern matching definitions
Public section
.fun (@_, @color){
// common part of any branch will be executed
}
.fun( s1,@color){
// s1 branch unique codes
}
Use pattern matching
h1 {
.fun(s2, @color)
}
// 三角形公用代码
.sjx(@_, @color, @size) {
width: 0;
left: 0;
display: block;
border: @size solid transparent;
}
// 左三角形
.sjx(l, @color, @size) {
border-left-color: @color;
}
// 右三角形
.sjx(r, @color, @size) {
border-right-color: @color;
}
// 上三角形
.sjx(t, @color, @size) {
border-top-color: @color;
}
// 下三角形
.sjx(b, @color, @size) {
border-bottom-color: @color;
}
.trangle1 {
.sjx(t,#00a8ff, 20px) //通过传入不同的参数来产生不同方向的三角形
}
.trangle2 {
.sjx(b, pink, 20px)
}
.trangle3 {
.sjx(r, purple, 20px)
}
.trangle4 {
.sjx(l,#4cd137, 20px)
} 
2. Nesting (important)
2.1 nested definitions
CSS styles have a hierarchical relationship, CSS hierarchy is determined by the structure of HTML.
2.2 using nested advantage
-
For use in selecting progeny having the parent-child relationship and the relationship
-
Reduce the amount of code,
-
Code structure clearer
Example 2.3
.border {
border:1px solid #58a;
}
.container {
width: 200px;
height: 300px;
.border();
ul {
list-style: none;
padding:0;
margin:0;
.border();
li {
width: 100px;
height: 80px;
background-color: khaki;
margin-top:20px;
span {
font-size: 20px;
color:green;
}
}
}
.box {
width: 200px;
height: 50px;
.border();
margin-top:30px;
background-color: lightcoral;
}
}After compiling css code:
.border {
border: 1px solid #58a;
}
.container {
width: 200px;
height: 300px;
border: 1px solid #58a;
}
.container ul {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #58a;
}
.container ul li {
width: 100px;
height: 80px;
background-color: khaki;
margin-top: 20px;
}
.container ul li span {
font-size: 20px;
color: green;
}
.container .box {
width: 200px;
height: 50px;
border: 1px solid #58a;
margin-top: 30px;
background-color: lightcoral;
}
