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%;
}
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...
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'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;
}
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%;
}
I'm trying to port a component from less to sass.
I have this configuration in less:
.datepicker {
&&-rtl {
...
}
}
which of course is giving me an error in compiling with SASS.
What I would like to have is this css:
.datepicker {
}
.datepicker.datepicker-rtl {
}
I have 3.3.3 version of SASS.
Is there any good alternative to this syntax? I've looked ad the documentation but couldn't find a solution.
Thank you so much.
I know this question is a bit old, but i just want to show another working solution for this.
This example:
.datepicker {
/* your properties here, e.g. */
width: 100%;
&#{&}-rtl {
/* your properties here, e.g. */
width: 200%;
}
}
will result in:
.datepicker {
/* your properties here, e.g. */
width: 100%;
}
.datepicker.datepicker-rtl {
/* your properties here, e.g. */
width: 200%;
}
A simple solution is just repeating the datepicker class
.datepicker {
/* your properties here, e.g. */
width: 100%;
&.datepicker-rtl {
/* your properties here, e.g. */
width: 100%;
}
}
otherwise you may assign a variable with the class name, like so
$dp : datepicker;
.#{$dp} {
/* your properties here, e.g. */
width: 100%;
&.#{$dp}-rtl {
/* your properties here, e.g. */
width: 100%;
}
}
You can test this syntax here: http://sassmeister.com/