Menu
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.
498
The & comes in handy when you're nesting and you want to create a more specific selector, like an element that has *both* of two classes, like this: .some-class.another-class { } You can do this while nesting by using the & . .some-class { &.another-class {} } The & always refers to the parent selector when nesting.
The & is a special selector invented by SCSS which is used in nested selectors to refer to the outer selector . It simply means that it will be replaced with the outer selector when compiling to CSS.
Approach regarding the question: First defined the content in a . html file. In the HTML file in your content make sure that you are placing child tags or having child tags inside a parent tag. Once you are done with the HTML tag then use ” & ” and ” > ” in the SCSS file to style the direct children.
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/
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
