I wanted to do some things with LESS but it's not working as I want.
I have this code :
.pl, #pl {
&-logo {
max-width: 100%;
height: auto;
&-test1:extend(.pl-logo) {
background-image: url('url');
}
&-test2:extend(.pl-logo) {
background-image: url('url');
}
&-test3:extend(.pl-logo) {
background-image: url('url');
}
}
}
But it's not working, I just have :
.pl-logo, #pl-logo {
max-width: 100%;
height: auto;
}
.pl-logo-test1, #pl-logo-test1 {
background-image: url('url');
}
.pl-logo-test2, #pl-logo-test2 {
background-image: url('url');
}
.pl-logo-test3, #pl-logo-test3 {
background-image: url('url');
}
Instead :
.pl-logo, .pl-logo-test1, .pl-logo-test2, .pl-logo-test3, #pl-logo {
max-width: 100%;
height: auto;
}
.pl-logo-test1, #pl-logo-test1 {
background-image: url('url');
}
.pl-logo-test2, #pl-logo-test2 {
background-image: url('url');
}
.pl-logo-test3, #pl-logo-test3 {
background-image: url('url');
}
I thought LESS more evolutive, is my code wrong or LESS does not compile correctly ?
Is there an other way to do what I want ?
Thank you
As already made clear by Harry, you can not extend dynamically formed selectors and How do I extend a class/mixin which has dynamically formed selector will provide you some solutions.
Alternatively you could try to change your HTML and use two classes the .pl-logo, #pl-logo base classes and the test* style classes:
< class="pl-logo test2">
Now you can use the following Less code:
.pl, #pl {
&-logo {
max-width: 100%;
height: auto;
&.test1 {
background-image: url('url');
}
&.test2 {
background-image: url('url');
}
&.test3 {
background-image: url('url');
}
}
}
Th above compiles into CSS as follows:
.pl-logo,
#pl-logo {
max-width: 100%;
height: auto;
}
.pl-logo.test1,
#pl-logo.test1 {
background-image: url('url');
}
.pl-logo.test2,
#pl-logo.test2 {
background-image: url('url');
}
.pl-logo.test3,
#pl-logo.test3 {
background-image: url('url');
}
In the above .pl-logo.test1 means having both the pl-logo and test1 classes. (#pl-logo.test1 having id=pl-logo and class=test1, see: How to combine class and ID in CSS selector?)
Or when you can not change your HTML use attribute selectors:
[class^="pl-logo-"], [class*=" pl-logo-"], [id^="pl-logo-"], [id*=" pl-logo-"] {
max-width: 100%;
height: auto;
}
.pl, #pl {
&-logo {
&.test1 {
background-image: url('url');
}
&.test2 {
background-image: url('url');
}
&.test3 {
background-image: url('url');
}
}
}
Related
I want to pass a class according to a props without having to duplicate the scss code
indeed if I duplicate the code by putting the class it works but I would only like to modify certain value by adding the appropriate class
components
``` :class="[
theme === 'darkModeTheme'
? 'darkModeTheme'
: theme === 'toggleLanguage'
? 'toggleLanguage'
: ''
]"
// props
theme: { type: String }
```
here is an example of the scss
```
&:checked {
background: color(menu);
background-repeat: no-repeat;
background-size: 80px 40px;
.darkModeTheme { //class to be taken into account if defined on the component to call
background: url("../../../assets/img/sky-stars.jpg");
}
&::before {
.toggleLanguage {
background-image: url("~#/assets/img/en.png");
}
// background-image: url("~#/assets/img/en.png");
left: 40px;
}
}
&:before {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
left: 0;
background-size: 30px;
background-repeat: no-repeat;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
#include easeOut;
cursor: pointer;
// background-image: url("~#/assets/img/fr.svg");
.darkModeTheme { //class to be taken into account if defined on the component to call
background-image: color(toggleTheme);
}
.toggleLanguage { //class to be taken into account if defined on the component to call
background-image: url("~#/assets/img/fr.svg");
}
}```
In your template, the dynamic class should be defined like
:class="{
'darkModeTheme': theme === 'darkModeTheme',
'toggleLanguage': theme === 'toggleLanguage'
}"
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;
}
I am looking for an online tool, command line tool, or Windows application to convert flat selector rules to nested in a LESS file.
Before:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
After:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
You can use CSS 2 LESS:
Pasting your CSS code in left pane, you'll obtain the following LESS on the right one:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
that is exactly what do you expect
I am starting out with Less and one of the reasons I wanted to is because of the ligthen() function. So my first attempt was to do something with that.
This is my HTML
<div class="box blue">
<div class="boxbar">Foo</div>
blue
</div>
I finally got it working, but I doubt it's supposed be like this:
#blue: #468ACE;
#green: #41A53D;
#red: #9C2525;
#purple: #8938BF;
div
{
padding: 10px;
}
.blue {
background-color: #blue;
.boxbar { background-color: lighten(#blue, 10%); }
}
.green {
background-color: #green;
.boxbar { background-color: lighten(#green, 10%); }
}
.red {
background-color: #red;
.boxbar { background-color: lighten(#red, 10%); }
}
.purple {
background-color: #purple;
.boxbar { background-color: lighten(#purple, 10%); }
}
.boxbar
{
height: 10px;
}
How can I refactor this? Surely it must be easier to say "get your parent color, and lighten it a bit". I tried a couple of things: inherit (was worth a shot!), have the lightened versions inside .boxcar. But this obviously compiled to .boxcar .blue.. which is not what I want and I ended with what you can see here.. it works.. but it doesn't feel right. Then I would need to write code for every new color I introduce..
I am not completely sure what your desired solution would be ... but maybe something like making a mixin would help you from having to write so much stuff out.
LESS:
.bgmixin(#color) {
(~".#{color}") {
background-color: ##color;
.boxbar {
background-color: lighten(##color, 10%);
}
}
}
#blue: #468ACE;
#green: #41A53D;
#red: #9C2525;
.bgmixin("blue");
.bgmixin("green");
.bgmixin("red");
CSS:
.blue{
background-color: #468ace;
}
.blue .boxbar {
background-color: #6ea3d9;
}
.green{
background-color: #41a53d;
}
.green .boxbar {
background-color: #59c055;
}
.red{
background-color: #9c2525;
}
.red .boxbar{
background-color: #c52f2f;
}
Update:
In LESS>=1.4 you would want to use something like this to interpolate the class name from the color name:
.bgmixin(#color) {
#classname: ~"#{color}";
.#{classname} {
background-color: ##color;
.boxbar {
background-color: lighten(##color, 10%);
}
}
}
How can I create this class with less?
.class {
display: none;
}
a:hover .class {
display: block;
}
Like this?
.class {
display: none;
a:hover & {
display: block;
}
}
.class {
display: none;
&:hover {
display: block;
}
}
I am assuming from your given CSS code that your HTML structure is like so:
<a>
<div class="class">Content</div>
</a>
You'll be happy to know that what you want to achieve is fairly easy using Less; here's the code shown below:
a {
&:hover {
.class {
//Apply styling here
}
}
}
I hope this helps.