Less multiple classes rules using parent selector - css

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 {
...
}
}

Related

LESS - Is there a way to group styles applied to a certain selector together and then apply it in another file?

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?

Target child class and element in SASS?

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
}
}

parent selector in less

Normally in less to reference a parent selector is:
.parent {
.grand-pa & {
/* this rules will apply to: .grand-pa .parent {....}
background: grey;
}
}
What I'm trying to do is something similar. example code HTML:
<div class="panel panel-parent">
<div class="panel-child">
{{content}}
</div>
</div>
Less code:
.panel {
.panel-child {
// some rules
&.panel-parent & { //<=== IS IT POSSIBILE SOMETHING LIKE THIS??
// .panel.panel-parent .panel-child{...}
}
}
}
The only solution I have found is to repeat .panel-child:
.panel {
&.panel-parent .panel-child { //<=== Workaround
// .panel.panel-parent .panel-child{...}
}
.panel-child {
// some rules
}
}
}

The order of classes of the same element does not actually matter, i.e. .panel.panel-parent is equal to .panel-parent.panel (both will match <div class="panel panel-parent">), thus you can get what you need with just:
.panel {
.panel-child {
a: a;
.panel-parent& {
b: b;
}
}
}
instead.

How can I create a Sass mixin with a class as a variable

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/

Multiple two-class selectors in Sass

Having multiple two-class selectors for a single declaration block, is it possible to simplify the following (i.e. not having to repeat the body tag):
body.shop, body.contact, body.about, body.faq {background-color:#fff;}

try this:
body{
&.shop, &.contact, &.about, &.faq {
background-color:#fff;
}
}

In this case we can use #each directive:
$pages: shop, contact, about, faq;
body {
#each $page in $pages {
&.#{$page} {
background-color:#FFF;
}
}
}
sassmeister.com

body {
&.shop, &.contact {
// Styles here...
}
}

If you are using sass compiled by the node, that may do.
body {
.shop, .contact, .about, .faq {
background-color:#FFFFFF;
}
}

Parent child relationship in sass
parent_tag {
.child {
// rules here
}
}

Resources