I have a form:
<form class="my-form">
<input type="text" class="my-form__input">
My SASS is currently set up something like:
.my-form {
// Some styles
&__input {
//Some styles
}
&__button {
//Some styles
}
}
However, I want to target inputs that are text types and have my class, eg in CSS:
input[type=text].my-form__input
Is there a way to get the above CSS output whilst keeping my SASS structure above?
.my-form {
// Some styles
&__input {
//Some styles
&[type="text"] { // generates .my-form__input[type="text"]
border: 2px solid red;
}
}
&__button {
//Some styles
}
}
Related
I need to dynamically change a p-card component in my APP. But it's simply not working...
Heres what I've tried so far :
<div class="card-image-comp">
<p-card [class.activeCard]="profileCardSelected === 1" (click)="selectProfileType(1)">
<img src="../../../assets/icons/person.png">
</p-card>
<p>Paciente</p>
</div>
<div>
<p-card [class.activeCard]="profileCardSelected === 2" (click)="selectProfileType(2)">
<img src="../../../assets/icons/estetoscopio.png">
</p-card>
<p>Profissional de Saúde</p>
</div>
...
My function:
selectProfileType(numCard: number){
this.profileCardSelected = numCard;
}
This part is working just fine, the issue is that the component is not obeying it's new class.
I've tried the normal stuff:
.activeCard {
background-color: black;
}
...
div {
.activeCard {
background-color: black;
}
}
...
.personalCardComp {
.activeCard {
background-color: black;
}
}
... and even some nasty stuff
:host {
::ng-deep .activeCard {
background-color: black;
}
}
...
:host {
::ng-deep p-card.p-element.activeCard {
background-color: black;
}
}
As I said before, the class is applied correctly, but the card only changes when I apply the css to the div children of the p-card...
Basically if I could apply the class to this div children It would work just fine... Is there a way to do so? Apply the class to p-card but the div children obbey...
Be sure to properly import your .scss file and then:
:host ::ng-deep {
.p-card.p-component {
background: black;
}
}
Let's say I have a LESS file like this:
.wrapper-1 {
.textbox { // styles }
.textbox::placeholder { // styles }
.checkbox { // styles }
.button { // styles }
.some + other > complicated.selector::here { // styles }
}
Now, say I want to apply the styles within .wrapper-1 to another file for .wrapper-2 without having repeat all the styles again.
I want to essentially achieve this without having to repeat all the styles again.
.wrapper-2 {
.textbox { // styles }
.textbox::placeholder { // styles }
.checkbox { // styles }
.button { // styles }
.some + other > complicated.selector::here { // styles }
}
I started by creating a common file like and extracting selectors into their own variables like so:
#textbox: ~'.textbox';
#textbox-placeholder: ~'.textbox::placeholder';
#checkbox: ~'.checkbox';
#button: ~'.button';
#someOtherComplicatedSelector: ~'.some + other > complicated.selector::here';
#{textbox} { // styles }
#{textbox-placeholder} { // styles }
#{checkbox} { // styles }
#{button} { // styles }
#{someOtherComplicatedSelector} { // styles }
But how do I then apply those "variables" into the proper place I want them to be? I essentially want something like this (obviously, the syntax isn't right):
.wrapper-1 {
#{textbox}
#{textbox-placeholder}
#{checkbox}
#{button}
#{someOtherComplicatedSelector}
}
and
.wrapper-2 {
#{textbox}
#{textbox-placeholder}
#{checkbox}
#{button}
#{someOtherComplicatedSelector}
}
In essence, is there a way to bundle/group styles and selectors together to be applied within other selectors?
I have this HTML element:
<button class="Button Button--is-primary Button--is-disabled Button--is-dark-theme">
And I need to defined in Scss a set of deep selectors like this:
.Button {
// Apply this for all Buttons that are dark theme
&--is-dark-theme {
// Apply this for all Buttons that are Dark AND are Primary
&--is-primary {
//...
}
}
}
But, my problem is that rule is going to create this:
.Button--is-dark-theme--is-primary
When I actually need:
.Button--is-dark-theme.Button--is-primary
I just found this:
.Button {
$self: &;
// Apply this for all Buttons that are dark theme
&--is-dark-theme {
// Apply this for all Buttons that are Dark AND are Primary
&#{$self}--is-primary {
color: red;
}
}
}
Which generates:
.Button--is-dark-theme.Button--is-primary {
color: red;
}
Any better option?
I have the following HTML structure:
<div class="block">
<div class="block--is-disabled block--is-focused">Block</div>
</div>
And some LESS code:
// LESS
.block {
&--is-disabled {
// some styles
}
&--is-focused {
// some styles
}
}
Is it possible to apply styles like .block--is-disabled.block--is-focused using LESS parent selectors? The only thing I've reached is:
// LESS
.block {
&--is-focused & {
&--is-disabled {
// some styles
}
}
}
With the following CSS output:
.block--is-focused .block--is-disabled {
// some styles
}
But what I need to get is the next CSS:
.block--is-disabled.block--is-focused {
// some styles
}
You can do it like this:
.block {
&--is-focused&--is-disabled {
...
}
}
I am trying to write something like this :
#mixin variableChild($child:".theChild") {
//some css
$child {
//css specific to the child
}
}
#parent { #include variableChild(".specificChild"); };
So it would generate this CSS :
#parent {//some css}
#parent .specificChild {
//css specific to the child
}
You were almost right, you just missed the #{} around your child selector I think. There’s more information about it in the Sass documentation.
#mixin variableChild($child:".theChild") {
#{$child} {
color: red;
}
}
#parent {
#include variableChild(".specificChild");
};
http://jsfiddle.net/UrLdB/