I am trying to work out how to use NativeScript theme v3 and am stuck on something so simple as setting the background colour according to theme:
Here's what I'm trying (using the recommended colorize mixin):
#import "~#nativescript/theme/scss/variables";
.mything {
#include colorize($background-color: primary);
}
But this always just sets the background dark and has no effect when I switch theme.
If I try the following code it is always red, also following the recommended approach:
.mything {
background-color: red;
.ns-dark & {
background-color: green;
}
}
Am I doing something wrong?
I have just found a solution of sorts that solves the issue, in that I am able to make it work when I switch themes - however this seems to defeat the point of having the colorize mixins etc.
.mything {
background-color: red;
}
:host-context(.ns-dark) .mything {
background-color: green;
}
Or:
.mything {
background-color: red;
:host-context(.ns-dark) & {
background-color: green;
}
}
I am posting this here in case anybody else struggles with this and nobody else answers.
Related
Looking to be able to add the app scope id to my sass files when we have multiple apps reusing class names.
That way I can have the following definition:
$app-scope-id: 'appOne';
And then write my SCSS in that app
.blockName{
background: blue;
&__element{
color: orange;
}
}
And call a mixin or something else to just go
#include prefixMixin(){
.blockName{
background: blue;
&__element{
color: orange;
}
}
}
And that render out css like:
.appOne-blockName{ background: blue; }
.appOne-blockName__element{ color: orange }
I'm aware I can use interpolation at the beginning of my block, but was hoping I could keep it cleaner with just a mixin call where necessary and only call it once for an entire SASS file if I wanted.
I don't think it's possible to do what you want with SASS. You could maybe do something like this:
$app-scope-id: 'appOne';
#mixin prefix($selectorType: ".") {
#at-root {
#{$selectorType}#{$app-scope-id}-#{&} {
#content;
}
}
}
blockName {
#include prefix() {
background: blue;
&__element{
color: orange;
}
}
}
Which compiles as:
.appOne-blockName { background: blue; }
.appOne-blockName__element { color: orange; }
But you would still need to include it for each selector that needs the prefix. I'm not sure this can be called "clean" either.
Is it possible to manipulate with #content magic variable in SASS?
I would like to replace some stuff in here before output.
Or maybe can I fill some variable with it?
The conclusion is that, I want to make an mixin #important that create both versions. Important, and no-important.
Input
.test {
#include important {
color: red;
text-align: left;
}
}
Expected output
.test {
color: red;
text-align: left;
}
.test-i {
color: red !important;
text-align: left !important;
}
No, you can't. But I quickly wrote you a mixin to make it work. It doesn't accepts multiple properties (yet).
First Note: I changed the mixin it now does accept multiple properties. Here is the Codepen.
Second Note: I updated the mixin adding multiple properties does no longer compile to different classes for each property, instead you get two versions, one without the !important suffix and one with.
This is the mixin:
#function return($state) {
#return if($state == '', '', '-i');
}
#mixin loop($name, $items...) {
#each $item in $items / 2 {
#each $state in ('', '!important') {
$suffix: return($state);
.#{$name}#{$suffix} {
#for $i from 1 through (length($items) / 2) {
#{nth($items, ($i * 2) - 1)}: #{nth($items, ($i * 2))} #{$state};
}
}
}
}
}
This is how you include it:
// #include loop([classname], [property], [value]);
#include loop(whateverClassname, color, red);
This is what it compiles to:
.whateverClassname {
color: red ;
}
.whateverClassname-i {
color: red !important;
}
This is what it now compiles to, when you use multiple properties at once:
#include loop(whateverClassname, color, red, background-color, green, display, flex);
.whateverClassname {
color: red ;
background-color: green ;
display: flex ;
}
.whateverClassname-i {
color: red !important;
background-color: green !important;
display: flex !important;
}
Conclusion: it works as expected and does no longer bloat your CSS.
Hope I could help you at least a little ;-)
I only just starting to learn both less and sass and can't figure out how to convert this less mixin to scss. This one compiles just fine and provides proper values in a compiled .css file:
.button-styles(#type) {
&--#{type} {
border-color: ##type;
a:hover {
background: ##type;
color: #FFF;
}
}
}
I tried using different converters.
This doesn't work, for example:
#mixin button-styles($type){
&--${type} {
border-color: $$type;
a:hover {
background: $$type;
color: #FFF;
}
}
}
I also tried to tinker with this mixin myself but I can't make it to work.
Help, please.
I'm trying to remove some duplication in my scss selector.
.container {
.operation {
color: green;
}
.row.is-active &,
.row:hover & {
.operation {
color: inherit;
}
}
}
I tried rewriting it like this:
.container {
.operation {
color: green;
}
.row & {
&.is-active, &:hover {
.operation {
color: inherit;
}
}
}
}
However, this causes .is-active to be applied to .container instead of .row
How can I target the syntactical parent when using the ampersand ?
I took some time to answer the question again, as I mis-understood it initially. Unfortunately there is absolutely no way possible to do this in SASS at the moment. Even when trying to make use of the more advanced SASS functions to manipulate selectors and strings it is not possible.
There is some Good News
It is possible to do using Stylus.
I have created a live Example on codepen.
// Stylus - not SASS
.container {
.operation {
color: green;
}
.row {
^[-1..-1]:is-active ^[0], ^[-1..-1]:hover ^[0] {
.operation {
color: inherit;
}
}
}
}
I hope this helps you in some way, at the very least it might provide you with an option, but unfortunately SASS cannot achieve what you are attempting.
For the following SASS when class-a also has class-b then the color applied is blue.
However when the body element has class-a I would expect the color to be red, but instead this results in an error.
.class-a {
&.class-b {
color: blue;
}
&body {
color: red;
}
}
This is currently not possible.
Currently, & is syntactically the same as an element selector, so it can't appear alongside one. I think this helps clarify where it can be used; for example, foo&bar would never be a valid selector (or would perhaps be equivalent to foo& bar or foo &bar).
There is discussion to change this behavior, but it may be a long ways off before this becomes a part of Sass.
https://github.com/nex3/sass/issues/282
https://github.com/nex3/sass/issues/286
In the mean time, all you can really do is this:
.class-a {
&.class-b {
color: blue;
}
}
body.class-a {
color: red;
}