When you assign a scss variable to an existing css variable like this
--color: #FFF;
$color: var(--color);
This will result in $color holding the var(--color) as a value. Is there a trick so it would hold the actual CSS value? So $color would save the #FFF?
You can define variable like this
$color: #FFF;
and use it like this for example
p {
color: $color;
}
I have two separate SASS files among many, on a ReactJS repository, such as _main.sass and _partials.sass. They are combined using #use on a separate file named index.css.
The SASS package as a dependency is just sass via npm.
_main.sass and all of its variables can be accessed by _partials.sass, thanks to #use "./main" as *.
I have the following code on _main.sass which detects OS preference for dark mode:
#media (prefers-color-scheme: light)
body
background-color: $white
color: $black
#media (prefers-color-scheme: dark)
body
background-color: $dark
color: $light
All of these color variables are defined and they're working well.
But the problem is that I need to use complement() function on the background-color which is currently active, in _partials.sass.
The main issue seems to me that when I assign a variable e.g. $accent on both ends of the media queries, the variable does not get picked up by the remote file. I could not wrap my head around to do it in such way, since I'm only a beginner at coding SASS.
Unfortunately, I need the plain CSS #media query implementations for automatically detecting the preference. But any suggestion is appreciated in case it is impossible to keep it like that and achieve what I wanted.
Thank you!
I've found the solution myself.
So, I was trying to make a light/dark theme compliant SASS implementation.
What complement function does is that it rotates the color in the input for 180deg on the RGB hue. I needed this to get corresponding inverted-like colors for each color, for better dark-mode contrast. The difference between invert and complement are listed here.
But, I realized that I did not need that. Here is the code for my theme implementation using SASS.
// rainbow
$blue: #00a4ef
$yellow: #f4b400
$red: #db4437
$green: #61b500
$purple: #6e14ef
$pink: #ff0090
$carmine: #c6004b
// monochroma
$white: #fff
$light: #f5f5f5
$lgray: #c2c2c2
$dgray: #6e6e6e
$ldark: #363636
$dark: #232323
$black: #000
$themes: (light: (logo: url("../static/logo-light.svg"), bg: $white, card-bg: $light, text: $black, link: $red, hover: $pink, active: $carmine, border: $lgray, button: $yellow), dark: (logo: url("../static/logo-dark.svg"), bg: $dark, card-bg: $ldark, text: $light, link: $red, hover: $pink, active: $carmine, border: $dgray, button: $purple))
#mixin themeProperty($theme, $property, $color, $additionalProperties)
#if $additionalProperties
#{$property}: unquote(map-get($theme, $color) + " " + $additionalProperties)
#else
#{$property}: unquote(map-get($theme, $color))
#mixin theme($property, $color, $additionalProperties: "")
$light: map-get($themes, light)
$dark: map-get($themes, dark)
#media (prefers-color-scheme: light)
#include themeProperty($light, $property, $color, $additionalProperties)
#media (prefers-color-scheme: dark)
#include themeProperty($dark, $property, $color, $additionalProperties)
There is a color map named "themes" which lists each color for light and dark themes for different use cases.
Furthermore, the mixins match the exact color for exact usage for the desired theme mode, whichever is being used by the client-side (browser or OS), thanks to #media queries.
For example, if you'd like to color a background-color using the button preset on the theme mapping, the usage is as follows:
#include theme("background-color", button)
Android and iOS render fonts in vastly different ways. I'd like to be able to get their renders looking a little more similar, so I need to change the font-sizes and weights throughout my entire app depending on whether it's on iOS or android.
Obviously, going through every place font-size or weight is defined and adding a conditional for is out of the question, and (fortunately) I already have all my font sizes and weights defined by sass variables.
Regardless of whether or not there is a better solution than conditional sass variables, I would like to know:
How can I conditionally select sass variables in nativescript?
I know that modules will use MyModule.ios.css or MyModule.android.css depending on the os. Can I take advantage of that?
Yes, you are on right track. You can have MyVariable.android.scss and MyVariable.ios.scss to define different values for Sass variable. In my code sharing project I have MyVariable.scss as well that I use for HTML(Web).
I have created a sample playground for you here.
In my home.component.ios.scss
$labelfontSize: 10;
$labelfontColor: red;
.home-panel{
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label{
margin-bottom: 15;
color: $labelfontColor;
font-size: $labelfontSize;
}
and in my home.component.android.scss
$labelfontSize: 18;
$labelfontColor: green;
.home-panel{
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label{
margin-bottom: 15;
color: $labelfontColor;
font-size: $labelfontSize;
}
It shows red text in ios while in android text is green.
I am using Sublime Text 2 and LiveReload to compile my .scss file. I also tried codekit with the same problem.
Using + and - work no problem, but * and / don't compile.
font-size: 30px / 2px; doesn't compile to font-size: 15px;
but
font-size: 30px + 2px; does compile to font-size: 32px;
Any ideas? The code hinting also doesn't seem to be working for the multiply and divide operators, could it be a package conflict? Seems unlikely.
Put it in parenthesis so SCSS understands you want it to do an arithmetic operation. Also, you do not want to divide px by another px number as this will result in a unitless number.
This is what you are looking for:
div {
font-size: (30px / 2)
}
I'm attempting to re-learn 960gs using sass syntax. I am confused on the difference between "+" and "=" sass syntax. For example:
.wrapper
+grid-container
and
.wrapper
#include grid_container
would produce the same results in my compiled css file
.wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
So what is the difference between using "+" and "#include"?
No difference at all. Quoting Sass documentation:
Sass supports shorthands for the #mixin and #include directives. Instead of writing #mixin, you can use the character =; instead of writing #include, you can use the character +.