We've got our sass variables file set up like
scss\variables\_custom_variables.scss.
Which, of course contains things like
$link-color: $00f;
Then put to use in our sass files set up like this one for navigation as scss\main\_main_nav.scss where we have rules like
a {color: $link-color;}
Now we've got a new feature allowing for custom styling, which pulls in the variables as well as everything in scss\main\. In lieu of creating something like
scss\main_2\_main_nav.scss ad infinitum
I'd like to be able to redefine $link-color.
I was hoping I could simply create scss\new_file\_variables.scss and have a list of overrides like
$link-color: #36c;
but this is not working as expected. What could I be doing better?
Thanks, all
You can define your base-variables with the default-flag: $var1: lightblue !default;
and override them in the theme using $var1: red;
If you #import the variable-files in the right order, red overrides lightblue.
https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498
Related
I'm using vuetify (2.5.8) with our own custom theme colors. We've defined our own color names via String, or Object if we need more control over which variations are generated and to have fewer css variables.
However, I haven't been able to get these variations to work with the color prop of vuetify elements, specifically v-expansion-panel-header.
In the docs I saw example use of color=”purple darken-2" and color="success darken-2", separating the theme color and its variation by a space. This works, when a color in my theme is defined as a string and its variations are generated by vuetify as (darken|lighten)-{n}.
But when I define my own variations, this doesn't work anymore. For example: if I define the color success: { base: '#1CC234', muted: '#2AAC9B', }' in my theme, I can't use color="success muted", it will always display the base color. This is also true when I try to name my variations the way vuetify describes them, for example success: { base: '#1CC234', 'darken-2': '#2AAC9B', }'. In this case, color="success darken-2" no longer works.
I've tried working around it by naming my variations 'darken-2' and the like, as well as nested syntax (success.muted) as the name of the generated color variable (success-muted), but to no avail. Does anyone have a way to pass these variations via the color prop, without having to use a v-deep selector and restyling the entire component everywhere I use it? Or should I use a computed to reach into this.$vuetify.theme and see if I can get the hexcode that way?
Thanks in advance.
color="success muted"
Only base and lighten/darken variations are used.
You can work around this by defining it as { success: '#1CC234', 'success-muted': '#2AAC9B' }
In this case, color="success darken-2" no longer works.
The keys in the theme configuration should be in camelCase: darken2
I wrote a reusable app in Vue and I compiled it as a library. I set the global variable $brand-color in SCSS file which is a main color of the app (buttons, borders, font colors). I use this variable in other SCSS component files.
I've put my app to my client's website and everything is working fine. Right now I have another client who is willing to use my app. BUT... new client wants to have my app in different $brand-color than my old one. What would be the best way to approach this problem?
One thing which comes to my mind is to set store variable with value of $brand-color which depends on location.host and bind styles of all "branded" elements.
switch (location.host) {
case 'client1.com':
context.commit('setMainColor', '#ff0000');
...
case 'client2.com':
context.commit('setMainColor', '#16c100');
...
}
But this will be very painful. I would need to apply a lot of changes in all my components. Is there any better solution that style-binding all components?
By the way, I can't use CSS variables because code needs to be IE friendly.
You can have 2 files, each file definne scss variable for different customer:
customer1_variables.scss
$brand-color: green
customer2_variables.scss
$brand-color: red
And you can import it in javascript file
main.js
switch (location.host) {
case 'client1.com':
import './customer1_variables.scss'
...
case 'client2.com':
import './customer2_variables.scss'
...
}
Another solution is using vue-style-component. You can check this article for more detail
So finally I set store value depending on my client and prepared set of SCSS classess specified for each client, i.e.:
.btn-client1 {
background: red;
}
.btn-client2 {
background: blue;
}
...
and I binded classes for specific elements:
:class="`btn-${client}`"`
I'm building a site in Joomla 3 on T3 framework.
I'm having to use LESS for the first time, but am experienced with CSS.
The site will have differently themed landing pages. These will all be identical except for the colour scheme.
I am attempting to set up a colour scheme in the T3 'variables' less file and then implement the colours - the colour will be different for many core components - such as H1, P, DIV Background Color, etc.
So if I set up, say, a master colour for Thailand's page, I create this rule in the variables.less file:
#thai: #e55092;
and then my knowledge of exactly how LESS compiles to CSS falls flat and I lose my entire train of thought.
Because I now want to be able to set up a landing page for Thailand in the T3 template. I need to be able to use the class 'thai' in various places in this page - for instance, the H1 text should be coloured #e55092, an aside background should be #e55092, an HR should be #e55092 ... for THIS page only.
I hope this isn't a too open question but what would be best practice for achieving this, keeping my code clean and fast? My current line of thought is that I create a whole bunch of rules in LESS along the lines of:
thai.h1 { color: #thai }
thai.button [ background-color: #thai }
(excuse syntax - very new to LESS and not sure what's possible or correct)
But isn't that defeating the whole purpose of using LESS in the first place?
I think your question is very broad indeed. Depending on your situation:
One CSS file for all pages. You can consider changing selector order The code for a button can then look like that shown beneath:
.button {
border: 1px solid white;
.thai & { background-color: red;}
.japanese & { background-color: yellow;}
}
In your HTML pages: <body class="thai"> and so on..
Compile different CSS files for each landing page
In Less you can override a variable by putting the definition afterwards
You should first define a main file, for the button example this button.less file should contain something like that shown below:
#button-background-color: orange;
button { background-color: #button-background-color; }
Now you can define you thai theme file (thai.less) as follows:
#import "button.less";
#button-background-color: red;
Or alternatively compile different CSS files using the modify-var option:
lessc button.less --modify-var="button-background-color=red" thai.css
I am currently updating the bootstrap source less files for a project and I have to modify the hover state for the buttons. The end goal is something along these lines:
.btn-primary {
.buttonBackground(#btnPrimaryBackgroundHighlight, #btnPrimaryBackground);
&.hover {
.buttonBackground( lighten(#btnPrimaryBackgroundHighlight, %20), lighten(#btnPrimaryBackground, %20));
}
}
However, that returns a compile error. Any thoughts on this issue? I'm sure it's something simple, but I'm at a loss. Thanks in advance.
P.S. - I will also be using the :hover pseudo-class, but for sake of example I'm using a simple class.
Put the percent sign after the number (20% instead of %20)
the current theme is connected with
dojo.require("dojox.charting.themes.PlotKit.green");
I created my theme, saved it in the same folder and tried to add to page:
dojo.require("mytheme");
But it's not connecting this way.
If you created your own module, the easiest thing to do is to place it in the folder, which is a peer of dojo:
dojo/...
dijit/...
dojox/...
my/... <- your file goes there
For example, it is called "mytheme". In this case it should go into my/mytheme.js file. In order to use it just require it and set on your chart:
dojo.require("my.mytheme");
...
chart.setTheme(my.mytheme);
Don't forget to put dojo.provide("my.mytheme"); at the top of your theme file, and define my.mytheme object (your theme).
Alternatively include it inline like I did in http://lazutkin.com/download/hicharts.html (look for myTheme). Or you can include the snippet using a regular <script> tag.
Do not forget to set your new theme explicitly on a chart: chart.setTheme(your_theme_object).