Lets start by giving an example,
Say for instance I have the class:
<html class="browser-ie"> ...
then on some element, I would like to call my mixin:
.browser-ie(#mixin){
html.browser-ie {
#mixin();
}
}
and be able to call it from for instance an element :
.main {
.nested {
.morenested {
.browser-ie({ min-height:100% });
}
}
}
and have it generate the following css:
html.browser-ie .main .nested .morenested { min-height:100%; }
Is there anything in the toolbox that would allow for such a thing?
I think that you are looking for the parent selector in your precompiler. This should output your desired CSS.
.main {
.nested {
.morenested {
html.browser-ie & {
min-height: 100%;
}
}
}
}
Keep in mind that the parent selector can fall anywhere in a declaration, and it will inherit all of the classes you have nested into up to that point, and append them to your string.
do you mean something like this?
.myColor{
min-height:100%;
}
.main{
.nested{
.morenested{
.myColor;
}
}
}
result:
/* Generated by less 2.4.0 */
.myColor {
min-height: 100%;
}
.main .nested .morenested {
min-height: 100%;
}
Related
Since my code is difficult to read I want to merge some long regular css statements like this:
.aui #content .columns-1-2-equal .row-fluid #column-3 header {
prop1 ...prop2 prop3
}
with a current scss document.
So assuming i have a piece of CSS which looks like the previous statement and I have a scss file containing this for example:
.aui #content {
prop4
.columns-1-2-equal {
prop5
.row-fluid {
#column-3 {
.header {
}
}
}
I want as a result
.aui #content {
prop4
.columns-1-2-equal {
prop5
.row-fluid {
#column-3 {
.header {
// MERGED CODE
prop1 ...prop2 prop3
}
}
}
Is there an automatic way to do it without having to search for the equivalent element in the SCSS tree and copy paste all the properties?
In this case you have two files:
OLD.scss
div {
width: 300px;
}
and
NEW.scss
#import "OLD.scss";
div {
color: red;
}
First you should run sass NEW.scss COMBINED.css it will output:
COMBINED.css
div {
width: 300px;
}
div {
color: red;
}
Then sass-convert COMBINED.css COMBINED.sass and you will get:
COMBINED.sass
div {
width: 300px;
color: red;
}
You don't really have to because it will be compiled automatically. But, I get that it can be difficult to read the code in this very long format. I tested this tool and its basic function. Hope this helps for you.
https://www.css2scss.com/
I inherited some CSS code, which is making use of the & character prior to the id name to style it. It looks something like this:
&#my-id {
// Content and attributes
}
There are also other instances of it, such as:
&:before {
// content and attributes
}
and
&:hover {
// content and attributes
}
What do those mean? I can't find a good way to express this in a search, so I can't find anything. My apologies if this is a duplicate.
It refers to the parent selector.
Input:
.parent {
&.child {
color: red;
}
}
Output:
.parent.child { color: red }
It's really helpful if you're writing CSS in BEM format, something like:
.block {
&__element {
width: 100px;
height: 100px;
&--modifier {
width: 200px;
}
}
}
.block__element { width: 100px; height: 100px;}
.block__element--modifier { width: 200px;}
<div class="block__element"></div>
<div class="block__element block__element--modifier"></div>
And finally, all examples I've shared have been concatenating the class names, but you can also use it as a reference, like:
.parent {
& .child {
color: red;
}
}
.parent {
.child & {
color: blue;
}
}
.parent .child { color: red }
.child .parent { color: blue }
Additional references:
http://lesscss.org/features/#parent-selectors-feature
https://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand/
Using the ampersand (SASS parent selector) inside nested selectors
It's a built-in feature of Sass: https://css-tricks.com/the-sass-ampersand/
You can use it when you're nesting selectors and you need a more specific selector, like an element that has both of two classes:
If your CSS looks like this:
.some-class.another-class { }
And you wanted to nest, the Sass equivalent is:
.some-class {
&.another-class {}
}
In the following code example I generate two squares that ideally should turn red.
The first div .with-root currently stays blue, the second div .without-root turns red. I expect this behaviour, but don't see a proper solution to turn the .with-root div red as well.
Note the difference in the scss file: the first div works with a fixed parent selector, the second one doesn't have a parent. For CSS specificity I need to work with the .with-root {} wrapper.
.with-root {
.with-root__element {
display: block;
width: 5rem;
height: 5rem;
background: blue;
&--red & {
&__item {
background: red;
}
}
}
}
.without-root {
&__element {
display: block;
width: 5rem;
height: 5rem;
background: blue;
&--red & {
&__item {
display: block;
width: 5rem;
height: 5rem;
background: red;
}
}
}
}
The codepen can be found here: https://codepen.io/studiotwist/pen/OzMOmr
Well now that I hopefully understood your question I deleted my wrong idea before and the following solution should work.
Maybe there could be a logic erorr. You have actually three class definitions of .with-root__element and two of them are extended with --red and __item, but the 3rd one is however an extra class which comes in conflict with the other two. You're basically concatenating the endings --red and __item with the parent selector *__element. Also, the --red class is nested inside the *__element one without ending in your CSS but in HTML it is not. *__element and *__element--red are attached in the same HTML tag.
DEBUG
Only showing the first DIV.
.with-root {
.with-root__element {
display: block;
width: 5rem;
height: 5rem;
background: blue;
&--red {
//#error &; // this reference contains the entire document root including the root element .with-root which is wrong
#{&} &__item {
//#error #{&} &__item; // this is a wrong concatenation plus it takes the entire root with it
background: red; // thus, this won't render
}
}
}
}
Debug in action # Sassmeister
POSSIBLE FIX
#mixin bg($bg) {
width: 5rem;
height: 5rem;
background: $bg;
}
.with-root__element {
#include bg(blue);
$this: &;
#at-root {
.with-root {
#{$this}--red #{$this}__item {
#include bg(red);
}
}
}
}
.without-root {
&__element {
#include bg(blue);
&--red &__item {
#include bg(red);
}
}
}
Fork
#at-root is a directive which is useful for your issue as it basically crops the nesting level of the selector and styles can be defined inside the root-body by referencing the parent selector instead of the entire root. So I added a variable $this which will cache the reference. display: block is not needed as div elements have it by default. Sorry about the mixin, it's a habit. --red and __item have now the refence selector *__element.
#at-root Documentation
I'm importing sass classes from another project and want to provide a wrapper to keep these styles localised.
My wrapper looks like this
.my-wrapper {
#include "framework-main"
}
I first looked fine but then I noticed that some tiles are missing. The problem is that the framework sass files use heavily reference to parent: &. This works fine for them but when I apply the wrapper it's get injected everywhere.
How can I make the wrapper a prefix only?
To illustrate:
SASS:
.wrapper {
// reset here somehow, I have no control over the nested code.
.parent {
&--child1 &--child2 {
width: 10%;
}
}
}
What I want:
.wrapper .parent--child1 .parent--child2 {
width: 10%;
}
What I get:
.wrapper .parent--child1 .wrapper .parent--child2 {
width: 10%;
}
Is this even possible?
Yes, it is possible, there is just small mistake in your code - you don't need . in front of &--child so it will not break selector construction:
.wrapper {
// reset here somehow
.parent {
&--child {
&--grand-child{
width: 10%;
}
}
}
}
gives
.wrapper .parent--child--grand-child {
width: 10%;
}
div#id_div_allposts {
width: 100%;
}
div.class_div_post {
width: 100%;
}
div.class_div_editdelete {
width: 100%;
}
How can i write it in one line ?
And what's the way to select a html tag with id and class ?
All you have to do is separate them with a comma e.g
div#id_div_allposts,
div.class_div_post,
div.class_div_editdelete {
width:100%;
}
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
You can group multiple selectors in CSS via a comma.
Note: The comma starts an entirely new selector from the very start.
Use the comma to separate multiple declarations
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
Selecting an html tag with and id and class would be
div#ID.class
Try this:
div#id_div_allposts, div.class_div_post, div.class_div_editdelete {
width: 100%;
}
or assuming that you want all div to have width 100% then...
div{
width: 100%;
}