How can I translate the following conditional to LESS?
.mixin(#width) {
width: (!#width ? auto : #width);
}
Results should be like:
[no value is passed]
LESS: .mixin();
CSS: width: auto;
[value is passed]
LESS: .mixin(200px);
CSS: width: 200px;
You can use default parameter values to accomplish this:
.mixin(#width: auto) {
width: #width;
}
Related
Please help me to modify mixin and create compatible function.
Here is my mixin, it can accept optonal parameter !important true or false, and if !important is true then output height as
height: 16px !important; for example:
#mixin svg-size($size, !important: true) {
svg {
height: $size foo();
width: $size foo();
}
}
Call mixin:
#include svg-size(16px, true);
Output:
svg {
height: 16px !important;
width: 16px !important;
}
I also need a proper name for that kind of function
How about conditionally-important as the function name and use some basic at-rules for flow control returning !important if true?
#function conditionally-important ($important) {
#if $important {
#return !important;
}
#return null;
}
#mixin svg-size($size, $is-important: true) {
svg {
height: $size conditionally-important($is-important);
width: $size conditionally-important($is-important);
}
}
// Calling as important
#include svg-size(16px, true);
// Output
svg {
height: 16px !important;
width: 16px !important;
}
// Calling as not important
#include svg-size(16px, false);
// Output
svg {
height: 16px;
width: 16px;
}
I try change color of div by clicked on him, but the event not responded,
what I'm doing wrong?
here is my code
HTML:
<div class="demo" #click="attachRed != attachRed" :class="{ red: attachRed }"></div>
script:
'
export default {
data() {
return {
attachRed: false
}}
'
style:
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
.red {
background-color: red;
}
It is
#click="attachRed = !attachRed
Not
#click="attachRed != attachRed
The != symbol is a test operator, and is read as "not equal," so what you have is "attachRed is not equal to attachRed." You should use the assignment operator of just = and negate the right-hand value. It should read "attachRed is assigned to NOT (!) attachRed."
I am using PrimeNG Steps. How to remove the numbers in steps?
I tried using the Default CSS Property.
component has no option for this ,but you can use css to hide the innerHtml by after pseudo-element
style.scss (global style)
p-steps{
.ui-steps-number {
overflow: hidden
}
.ui-steps-number::after {
content: '';
background: currentColor;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
color: #007ad9 !important;
}
.ui-steps .ui-steps-item .ui-steps-number {
color: #ccc !important;
}
}
demo 🚀
the style above will change the style for all p-steps components but you can use custom styleClass like this
template
<p-steps styleClass="dot-theme" [model]="items"
[(activeIndex)]="activeIndex" [readonly]="false">
</p-steps>
style.scss
.dot-theme {
.ui-steps-number {
overflow: hidden
}
.ui-steps-number::after {
content: '';
background: currentColor ;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.ui-state-highlight .ui-steps-number {
color: #007ad9 !important;
}
.ui-steps-number {
color: #ccc !important;
}
}
demo 🌟
You can simply hide the text setting it's colour to transparent:
.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
color: transparent;
}
In-stead of defining multiple variables separately like:
$logo_text_color: $white
$menu_link_color: $white
$menu_icon_color: $white
Is there any way to define them together at a time; something like this?
$logo_text_color, $menu_icon_color, $menu_link_color: $white
Finally I have found a solution...
SASS:
=els($a: 1, $b: 2, $c: 3)
height: $a + px
width: #{$b}px
content: abc
.cool
+els
.things
+els($a: 100)
.stuff
+els($c: 29)
.other
+els($c: 29, $b: 54)
CSS:
.cool {
height: 1px;
width: 2px;
content: abc;
}
.things {
height: 100px;
width: 2px;
content: abc;
}
.stuff {
height: 1px;
width: 2px;
content: abc;
}
.other {
height: 1px;
width: 54px;
content: abc;
}
I have the following 2 mixins with different names in the same scope and defining the same variables - #width and #height:
.myMixin1 {
#width: 100%;
#height: 400px;
}
.myMixin2 {
#width: 75%;
#height: 200px;
}
I reference both the above mixins from within the same style rule:
.myClass {
.myMixin1;
.myMixin2;
width: #width;
height: #height;
}
This compiles to:
.myClass {
width: 100%;
height: 400px;
}
instead of
.myClass {
width: 75%;
height: 200px;
}
My question is:
Since .myMixin2 is referenced last, shouldn't the class pick up the property values from this mixin?
I figured this out:
Variables are not copied if the caller of the mixins contains variables with the same name defined by another mixin call. LESS Docs
After .myMixin1 is called, the caller already contains the variables #width and #height. Hence, a reference to .myMixin2 does not copy over the variables with the same name.