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/
Related
In my curently workflow, I use some mixins to easier responsive breakpoints code. I also use gulp to process and compress those generated CSS. Example below:
#footer {
.block-contacts {
.social_title {
display: block;
#include desktop() {
display: inline-block
}
&:before {
width: 100vw;
#include desktop() {
width: 50vw;
}
}
}
}
}
After the process of compile and minify, this code above ends up repeating the #media rule, like this:
#footer .block-contacts .social_title {
display: block;
}
#media(min-width: 64rem){
#footer .block-contacts .social_title {
display:inline-block
}
}
#footer .block-contacts:before {
width:100vw;
}
#media(min-width: 64rem){
#footer .block-contacts:before {
width:50vw
}
}
In this example I used only a "small" hierarchy and selector, but this in the whole project I guess it could be a negative impact for performance or assets size.
I know I can avoid this duplicity recreating the rule structure inner a single #include desktop() at the end of file.
My question is if there is another way, authomated, to reduce those lines creation, something I can do in the mixin that join all of this calls, or some gulp process/plugin, or even in the SASS...
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 {}
}
I'm converting a long CSS file into SCSS and got stuck on the following piece of CSS which consists of the a child div that can have different parent divs:
.dark-bg li.accordion-item,
.image li.accordion-item,
.parallax li.accordion-item {
margin: 0;
}
Could that be convertible to SCSS?
Thank you.
Any CSS is valid SCSS. If you rely want to make more like SCSS, you could write:
.dark-bg, .image, .parallax {
li.accordion-item {
margin: 0;
}
}
Is this ok?
#mixin hasAccordion() {
& li.accordion-item {
margin: 0;
}
}
.dark-bg, .image, parallax {
#include hasAccordion;
}
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%;
}
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%;
}