编程知识 cdmana.com

Less mixing with parameters

Last section we learned Less The mixture of , It's easy to mix and use . In this section, we'll learn how to mix , Mixing can take one or more parameters , Multiple parameters are separated by commas or semicolons . In general, we use semicolons to separate parameters , Because in Less Chinese comma has two meanings , Can be said Mixins Parameter separator or CSS List separator .

Banded ginseng Mixins

In a statement Mixins when , The parameter needs to be added with a @ Prefix .

Example :

For example, it states a hybrid .xkd , This blend has a @num Parameters :

.xkd(@num){
  border-radius: @num;
  border-top: @num;
}

.good{
  .xkd(10px);
}

Translate it into CSS Code :

.good {
  border-radius: 10px;
  border-top: 10px;
}

In the above code border-radius and border-top The value of the property is unknown , By the incoming @num Parameter determination . So when you refer to this mix , You need to assign a value to the parameter , Otherwise, an error will be reported when compiling the code .

Default parameters

We can give Mixins Set the default value of the parameters in , So if we introduce Mixins No parameters are passed in when , The value of the default parameter will be used .

Example :

For example, the following code :

.xkd(@num:5px; @fontsize:14px){
  border-radius: @num;
  font-size: @fontsize;
}
.one{
  .xkd();
}
.two{
  .xkd(10px, 28px); 
}

Translate it into CSS Code :

.one {
  border-radius: 5px;
  font-size: 14px;
}
.two {
  border-radius: 10px;
  font-size: 28px;
}

You can see in the above code ,.one Introduction in .xkd The specified parameter is not assigned a value when , The output uses the value of the default parameter .

and .two Introduction in .xkd The parameter is assigned a value of , Finally, the parameter value assigned when introducing is used .

Parameter sequence

Mixins The parameters in can be defined in a different order , It is defined by its parameter name .

Example :
.mixin(@color: red; @fontSize: 14px) {
  color: @color;
  font-size: @fontSize;
}
.one{
  .mixin(@color: #ccc, @fontSize: 18px);
}
.two{
  .mixin(@fontSize: 22px,#eee; );
}

Translate it into CSS Code :

.one {
  color: #ccc;
  font-size: 18px;
}
.two {
  color: red;
  font-size: 22px, #eee;
}

@arguments Variable

If you use mixing with parameters , You don't want to use a single parameter , have access to @arguments ,@arguments Variables can include all the parameters passed .

Example :
.xkd(@a:10; @b:20px; @c:10px; @d:20px) {
  padding:@arguments;
}

.one{
  .xkd();
}
.two{
  .xkd(20px, 40px, 20px, 40px);
}

Translate it into CSS Code :

.one {
  padding: 10 20px 10px 20px;
}
.two {
  padding: 20px 40px 20px 40px;
}

The remaining parameters

Mixins You can use a variable number of parameters in ,... Can represent the rest of the parameters .

Example :
.xkd(@rest...) {
  border: @rest;
}

.good{
  .xkd(1px; solid; #000);
}

Translate it into CSS Code :

.good {
  border: 1px solid #000;
}

summary

In this section, we learned how to take a reference Mixins, Include default parameters 、@arguments 、 Residual parameters, etc , This sum JavaScript The parameters of the function in are very similar , Master the usage of these parameters , It can be used more flexibly Mixins.

See more :https://www.9xkd.com/

版权声明
本文为[Do you know]所创,转载请带上原文链接,感谢

Scroll to Top