In our app.less file, we import a few variable files, and then the individual component style sheets.
app.less
#import variables.less /* Original app styles/colors */
#import corp-colors.less /* corporate color variables */
#import light-theme.less /* Theme definitions */
#import '../components/style' /* This file contains imports of every component in the app */
The variables.less file defines #link-color...
variables.less
#link-color: #1997CA;
And the light-theme.less redefines it by pulling in the corp color.
light-theme.less
body.light-theme {
#link-color: #corp-blue;
}
corp-colors.less
```less
#corp-blue: #2a60c8;
```
Finally, in my component, I digest the variable for a tab bottom border.
x-component/style.less
li {
&.is-selected {
.tab-label {
border-bottom: 3px solid #link-color;
}
}
}
As the light-theme is imported after variables, I'd expect to see the border color as #2a60c8, but am seeing the original #1997CA instead.
However, if I change the component style to use #corp-blue instead of #link-color, it shows correctly.
Am I overlooking something with import and override ordering?
LESS variables work not like CSS variables, they calculate their values on the compilation stage, not in runtime. It seems like you need to change:
body.light-theme {
#link-color: #corp-blue;
}
to:
#link-color: #corp-blue;
Related
So I would like to define a global color in my Angular project in the styles.scss stylesheet.
I know I can defined global variables like this
:root {
--blueish: #658bc7;
}
and then in other styles(heets) reference to it
p {
color: var(--blueish);
}
But this is NOT a globally defined color. This is a globally defined variable.
We could for example do
p {
color: aliceblue;
}
and this does work since aliceblue is globally defined along with a lot more preset colors. Is there a way for me to ADD a color to this list using (S)CSS? If not, would it be possible in less or SASS?
You can assign in SCSS vars with $varName. Important note if you like to use dash or underScore in your varnames. For the SASS compiler, $var-name is the same as $var_name. You have to take that into consideration.
SCSS
$blueish: #658bc7;
p {
color: $blueish;
}
Will compile to CSS:
p {
color: #658bc7;
}
You Can Define and Assign Variables in scss/sass Like This
$blueish: #658bc7;
p {
color: $blueish;
}
Notice that in sass/scss files named "blablabla" are globally scope
while files named "_blablabla" are not globally scoped and must be imported by.
You Must Have one globally file in sass/scss for example named "style.scss" that imports all scss/sass files in it for example:
/*
This File is only for imports
*/
#import "./libraries/_variables.scss";
#import "./libraries/_mixins.scss";
#import "./layouts/_header.scss";
#import "./pages/_about.scss";
Also, you can not add "_" and ".scss" in the importing it is not necessary for your editor will understand it for Example :
#import "./libraries/variables";
#import "./libraries/mixins.scss";
#import "./layouts/_header";
They are the same as the above example!
So, I have scss file with global styles. This file seems like that:
#import "colors";
#import "border-radius";
#import "box-shadow";
#import "paddings";
#import "margins";
#import "fonts-famalies";
#import "font-sizes";
#import "transition-durations";
#import "global-path";
#import "mixins";
#import "mixins-properties";
#import "../design/animations/fade-animation";
::v-global(*), ::v-global(*::before), ::v-global(*::after) {
box-sizing: border-box;
outline-color: var(--color-outline__global);
transition: background-color 0.2s linear;
}
::v-global(html), ::v-global(body), ::v-global(#application) {
font-family: var(--font-famaly__comfortaa);
background-color: var(--color-background__global);
color: var(--color-font__content);
margin: 0;
font-size: 95%;
height: 100vh;
overflow-wrap: anywhere;
}
v:global(a) {
color: var(--color-font__link);
}
Styles imports using vue.config.js with this configuration:
module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
sass: {
additionalData: `
#import "#/styles/global/global.scss";
`
}
}
}
})
All good, but when I open developer console in chrome I see picture like that.
When I checked header tag in HTML I see a lot of same css imports. If I comment all css styles - header have a lot of styles still. What am I doing wrong? I think that problem in loader
If you're going to be adding a global import (for example for shared SCSS variables and mixins), don't put ANY global styles in that import.
scss-loader's additionalData modifies each scss file it loads with the given string template. As a result, you're putting an import with your global style definitions at the start of every component's style block.
To fix this, move all your v-global(html) styles and the animations to a different file, which you import once in your index.html or App.vue. Ensure that the file you want to automatically import in your components only contains code that does not generate any styles by themselves (so scss variables, mixins, functions, etc. are fine). It's common that you name this file 'variables.scss' or similar, so no style definitions accidentally end up in this file or its dependencies.
I don't really understand about #import and partial file
But I want to ask for a little understanding.
I have 2 files. file2.scss must use the variable from file1.scss.
File1.scss
/* file1.scss */
$color-1 : #7E3D97;
#font-face{
font-family : AngsanaNew;
src: url(/font/AngsanaNew.TTF);
}
div.test1{
background-color: #222;
}
File2.scss
/* file2.scss */
#import 'file1'
div.content{
background-color : $color-1;
}
When I compile SCSS, It generates 2 files. Which is not what I want. I want it to be
/* file1.css */
#font-face{
font-family : AngsanaNew;
src: url(/font/AngsanaNew.TTF);
}
div.test1{
background-color: #222;
}
AND
/* file2.css */
div.content{
background-color : #7E3D97;
}
Because if I want to create a file file3.css, file4.css. while there is already a file1.css style rule. I will see #font-face and div.test1 contain in file3.css, file4.css.
I don't want that. What should I do?
P.S. Sorry my english. If you edit my text to make it easy to read. I will be very grateful.
If SASS is generating the CSS it does it for every 'normal named' file.scss. To mark a file for SASS that it should not be used to generate a separate css file use an underscore _ as prefix, - i.e. _partial.scss. That files will only be used to be imported to the main scss file.
Now you can organize your project:
// POSSIBLE PROJECT STRUCURE
// variables to whole project
// --> variables only, no classes
_defaults.scss
// partial files
// --> use vairables from _default.scss
// --> or if you want/need to define variables here
// --> use variables with default-flag: '$variable: value !default'
// --> so they will/can be overwritten by same variable set BEFORE in _default.scss
_partial-structure.scss
_partial-element.scss
...
// bring them together in main file
styles.scss
#import 'defaults';
#import 'partial-structure';
#import 'partial-element';
...
I'm trying to write an atom theme. However, it will not be static. I want to use imported css from pywal to change how atom looks depending on the color scheme of the rest of the desktop at that given moment. I am able to import the colors from the pywal cache, and use them as css colors. I can even assign them to less variables. However, when I try to use a function such as darken, I get the error error evaluating function 'darken': color.toHSL is not a function
I had concluded it was due to the import settings, so I tried using the (less) keyword in my import for the css file. When I did so, it said it could not find the file, so (in order to test if I was at least right about the import settings), I copied the pywal css file into the styles directory and changed the filename in import accordingly. This led me back to square one, as I started receiving the same error. An example of my attempts are below.
Relevant code:
~/.cache/wal/colors.css (aka "tempcolors.css"):
/* CSS variables
Generated by 'wal' */
:root {
--wallpaper: url("/home/regular/wallpapers/current/image.jpg");
/* Special */
--background: #0a0b10;
--foreground: #d5c5a8;
--cursor: #d5c5a8;
/* Colors */
--color0: #0a0b10;
--color1: #483E45;
/* ... */
--color15: #d5c5a8;
}
colors.less:
// These colors are specific to the theme. Do not use in a package!
//#import (less) url('file:///home/[MYUSERNAME]/.cache/wal/colors.css'); // this stopped working when I added (less)
#import (less) "tmpcolors.css";
#very-light-gray: #c5c8c6;
#light-gray: #969896;
/* the rest of the standard colors */
#background: var(--background);
#foreground: var(--foreground);
#color-1: var(--color1);
#color-2: var(--color2);
/* ... */
#color-15: var(--color15);
Here's the section in base.less where I tried to use my custom colors:
atom-text-editor {
/* ... */
.gutter {
background-color: #color-7; //works
background-color: darken(#color-7, 25%); //doesn't work
background-color: darken(#red, 25%); //works
Can someone help me? Is what I'm trying to do possible?
P.S. Please let me know if you need more info
So let's assume we have a variables scss file like the following
$darken-percentage: 15%;
$primary-color: #2aaae1;
$dim-primary-color: darken($primary-color, $darken-percentage);
$complementary-color: #faaf48;
$dim-complementary-color: darken($complementary-color, $darken-percentage);
$background-color: #1d1f29;
$middleground-color: #313444;
$dim-middleground-color: darken($middleground-color, $darken-percentage);
$light-middleground-color: lighten($middleground-color, $darken-percentage);
In the main.js we could use #import 'variables.scss'
what if I have two themes and I want to change on user action I could have 2 variables files and conditionally import either based on user actions but what about single file vue components
like
<style scoped lang="scss">
#import '../../theme/_variables.scss';
.bm-upload{
background: $primary-color;
}
</style>
Then the import will not work so is there anyway for me to have global variables files and use it in other files without re importing it
The easiest is to import both style files and change a parent element's class. The browser will immediately apply the styles when the class changes.
You can, for example, change the body's class with classList and have all styles depend on that.
created(){
let body = document.getElementsByTagName('body')[0];
body.classList.add("theme1");
},
methods: {
changeTheme(){
let body = document.getElementsByTagName('body')[0];
body.classList.remove("theme1");
body.classList.add("theme2");
}
}
Style should inherit from the theme class name, like this:
.theme1 {
.exampleClass {
padding: 0;
}
}