I am building a system to take default stylesheets, and merge with a theme, and a base theme to produce the final site css, however i was hoping to find a way to assign variables by reference, not by value so i can do things like this.
base.vars.scss
$PrimaryFg: blue
$LinkFg: $PrimaryFg
$DefaultFont: opensans
$HeadingFont: $DefaultFont
basetheme.vars.scss
$PrimaryFg: yellow
$CaptionFont: $HeadingFont
theme.vars.scss
$DefaultFont: Verdana
base.rules.scss
body {font: $DefaultFont }
h1,h2,h3,h4,h5,h6 {font: $HeadingFont; }
a {color: $LinkFg }
basetheme.rules.scss
caption {font: $CaptionFont; }
theme.rules.scss
#import 'base.vars.scss';
#import 'basetheme.vars.scss';
#import 'theme.vars.scss';
#import 'base.rules.scss';
#import 'basetheme.rules.scss';
The main problem i have is that, $HeadingFont will be set to opensans, and wont change to Verdana, and the link FG colour will still be blue,
I cant find a solution, i was hoping that the $HeadingFont: $DefaultFont, would not assign the value immediately, but assign the variable, so it could be changed later.
Yes i am aware of !default, however it is a complete mess trying to do this with !default.
Related
I am having some difficulty overwriting !default values in SCSS while using #use. When I use #import instead of #use it behaves correctly but while using #use the console gives an error (This module and the new module both define a variable named "$variable-name").
When I change the variable inside the same file where I assign the variable to an element it behaves correctly:
// variables/variable.scss
$color-accent: red !default;
// variables/index.scss
#forward ./variable.scss;
// change.scss
#use './variables/index' as *;
$color-accent: blue;
body {
background-color: $color-accent;
}
// body background color is blue
But when I try overwriting it in a seperate file it won't work:
// change.scss
$color-accent: blue;
// variables/index.scss
#forward ./variable.scss;
#forward ./change.scss;
// base.scss
#use './variables/index' as *;
body {
background-color: $color-accent;
}
// main.scss
#use './base';
// error: Two forwarded modules both define a variable named $color-accent
Also, when I only #forward the variable.scss and #use the change.scss in the main.scss file it doesn't give the right outcome (body background color stays red without an error).
Does anyone have a suggestion? All help is appreciated.
Joop
The error is where you used two #forward in index.scss and these two files have variables with the same name. Just loading the change.scss file with #import can solve the problem.
More Information about the difference between #import, #use and #forward is here: https://www.liquidlight.co.uk/blog/use-and-import-rules-in-scss/.
// variables/index.scss
#forward "./variable.scss";
#import "./change.scss";
I am trying to change the height of the Table header unfortunate an not able to find any way to change table header height.
Could you please help me to reduce the table header height?
I have attached the screen shot.
For everyone who stumbles across this question:
You can change the header height or basically every css attribute of the header via css.
Just add this piece of code to your <style> tag
<style>
>>> .v-data-table-header {
height: 70px;
}
</style>
You can do it only with CSS. Maybe in version 2 it will be done.
Today set style on selector table.v-table thead tr {}
'v-data-table' API option
your variables.scss input variable
v-data-table
$data-table-regular-header-height: 2rem;
v-data-table option dense
// all table height(v-data-table option dense)
$data-table-dense-header-height: 2rem;
only table header height, modify '$data-table-dense-row-height'
// basic value
$data-table-dense-row-height: data-table-dense-header-height !default;
other sass option -> vutify site
How does one define variables with the use of other variables in SASS?
This is how one could do it with LESS:
// import Google Material Colors
// returns variables ie #blue-500, #blue-400 etc
#import 'material.colors.less';
// base
#_color: 'blue';
#_secondary: 'amber';
// primary colors
#color-primary: ~"#{#{_color}-500}";
#color-primary-bright: ~"#{#{_color}-300}";
#color-primary-brighter: ~"#{#{_color}-200}";
#color-primary-brightest: ~"#{#{_color}-50}";
// secondary colors
#color-secondary: ~"#{#{_secondary}-500}";
#color-secondary-bright: ~"#{#{_secondary}-300}";
#color-secondary-brighter: ~"#{#{_secondary}-200}";
#color-secondary-brightest: ~"#{#{_secondary}-50}";
The LESS-way certainly isn't clean and dandy, but -- it works™
The idea is to set a base primary and then just set the other color(s) dynamically based on that.
I can't imagine that one would have to loop/map etc just to do this with SASS?(!)
Sass does not support dynamic variables, period.
You will need to use maps, but I'm not sure this will help you in this specific case (as you are already using external colors):
#import 'material.colors';
$colors: (
primary: (
default: $blue-500,
bright: $blue-300,
brighter: $blue-200,
brightest: $blue-50
),
secondary: (
default: $amber-500,
bright: $amber-300,
brighter: $amber-200,
brightest: $amber-50
)
);
#function color($color, $brightness: default) {
#return map-get(map-get($colors, $color), $brightness);
}
h1 {
color: color(primary, bright);
background-color: color(secondary);
}
Of course you can do it. You can use neat sass color functions and do what you need in a nice and clean way. Take a look at lighten function and even darken function, or at other color functions in general.
Basically, you do it like this:
$primary-color: #08f;
$primary-light-color: lighten($primary-color, 20%);
$primary-lighter-color: lighten($primary-color, 30%);
$primary-dark-color: darken($primary-color, 20%);
$primary-darker-color: darken($primary-color, 30%);
You can see this in action here:
https://codepen.io/anon/pen/PjXRjM?editors=1100#0
Or if you feel like it's a good idea, you could automate it a little with lists and loops. Take a look at this article: https://www.sitepoint.com/managing-color-values-with-sass/, where its author gets through it. (To be honest, I'm not sure if that a good idea at all, as it easily may be hard to understand and maintain later. That's another topic, though.)
I found the following mixin on the web, but have forgotten where I found it.
#mixin linear-gradient($direction, $gradients...) {
background-color: nth($gradients, 1);
background-image: linear-gradient($direction, $gradients...);
}
and then be called upon in a class with:
.selector {
#include linear-gradient(to right, magenta, red, orange, yellow, green, blue, purple);
}
This works fine, my question is about the background-color: nth($gradients, 1);is this a index that starts with 1 and is it used as a color-start?
Can someone explain?
Thanks :)
Yes,nth(gradients,1) picks the first element from the gradients list
so it would background-color:magenta here
for more explanation this
As you suspected, nth($gradients, 1) picks the first item from $gradients as Sass lists are 1-indexed.
In this case background-color is set to the first colour from gradients. You can think of this as a fallback in case the user's browser doesn't support linear-gradients.
When creating a color scheme in SASS what's the conventional variable names for defining colors?
I know using color names are bad. Such as:
$blue
$red
$green
But I've not seen an alternative. I'm struggling for variable names for colors on the site that convey meaning.
Any ideas?
I found another idea in "SASS & Color Variables" article. The solution suggested by Sacha Greif is to use some variables to store descriptive color names, and some other to assign those colors to their functions:
// first we set descriptive variables:
$darkgrey: #333333;
$blue: #001eff;
// then we set functional variables:
$text_color: $darkgrey;
$link_color: $lightblue;
$border_color: $lightblue;
.myClass {
color: $text_color;
border-color: $border_color;
}
a {
color: $link_color;
}
I'm just beginning with SASS and don't know which approach is more practical, but I like the way it separates colors from their function.
In my personal experience the most useful way to name colors is to do it in regards of the color's function, such as
$background
$contrast
$text
$aside
$link
And so on. Of course which colors and name may depend on the design.
Then you may have different and exchangeable color schemes defined on different styles, such as:
_dark_scheme.scss
_light_scheme.scss
_pastels.scss
The idea here, is that you can use the same color variables in your main stylesheets, and do not depend on specific colors.
I like the idea of combining generic to specific naming (good for code completion) and description/functional naming. So you have something like this:
// Descriptive naming
$color-gray-light: #f3f3f3;
$color-gray-dark: #999999;
$color-red: red;
// Functional naming
$link-color: $color-red;
$link-border-color: $color-gray-light;
You can even create a mixin for greys (in the example RGBA is used for transparency, for example black on a red background would be more visible if it is 80% transparent black rather than dark grey).
#mixin grey($intensity: 0.5, $type: color) {
#{$type}: rgba(black, $intensity);
}
.i-am-50-percent-gray {
#include grey(0.5, color);
}
Give the result
.i-am-50-percent-gray {
color: rgba(0, 0, 0, 0.5);
}