I need to include the file
"#{request.domain.split(".").first}.css.scss"
into my custom.css.scss file.
I don't know how to proceed. The goal is to declare specific variable, and give them different values in each file, loading dynamically different files for each different request
file one.css.scss
$button_primary_color: #xxx;
$header_background_color: blue;
file two.css.scss
$button_primary_color: #zzz;
$header_background_color: red;
I also tried using CSS3 variables, without success:
home[sn="one"] {
--button_primary_color: #xxx;
}
home[sn="two"] {
--button_primary_color: #yyy;
}
(it doesn't behave standard in the different browser), and also it doesn't substitute the following statement.
div {
color: var(--button_primary_color);
}
I'd like to have a more bootstrap/sass solution. How can I accomplish this?
I'm still trying to figure out a best method, but one thing I've done in the past is to set the config.assets.precompile to effectively have domain specific css files and then have your layout generate the appropriate code to pull in that specific css file.
config.assets.precompile += %w( application.js application.css domain1.css domain2.css)
where you have in your asset pipeline
domain1.css pulling in whatever domain specific code you need.
much cleaner than trying to include logic switches within the css code (which you cannot do btw afaik).
Related
I am using variables in CSS/SCSS. I want to set a background (using an SVG file), but it is re-loading every time I navigate or perform some other action.
My -Variables.scss file:
:root {
--backgroundTheme: url('triangle-dark.svg') no-repeat;
}
$variables: (
--backgroundTheme: var(--backgroundTheme)
);
My styles.scss file:
#import "~assets/_variable";
body:before {
background-size: cover;
background: var(--backgroundTheme);
}
How can I avoid multiple times loading of this file?
PS: This is an Angular 8 project.
I had the same problem recently. It was caused by the inspector - "Disable cache" was enabled:
You just need to uncheck it and it will stop making new requests.
To use the image multiple times in the DOM with only one request from the CSS you should use the content property of your pseudo element target to render the image:
body::before {
content: var(--backgroundTheme, 'alt text');
}
Although you'll probably need another approach in handling the image. It might not work for you.
I have two possible idea, not sure if they works for you but it's an easy check:
If you can, don't use css variables, use scss instead. My general approach is to have a settings.scss file and import it whenever needed in the other files. It's a personal preference, I find it easier to manage like that.
It could as well be something wrong in the backend, are the caching headers set right? You can check that in Chrome itself, by clicking on tringle-dark.svg, Headers tab, then Response Headers.
I need to get some colour values out of a DB and use them in my CSS so that each customer has a colour branded version of my React.js application, but I'm not sure how.
I have other elements of branding such as logos, slogans and terminology which I'm pulling out of the DB, storing as a JSON file, and referencing around the site, which works fine, but the problem is the colours which I need to use in my stylesheet as I need to use the pseudo classes that CSS offer.
I've found this postcss-import-json package which claims to do this, but I can't seem to get it to work as intended.
So far I've...
Imported the package...
npm install --save-dev postcss-import-json
Created a JSON file called 'masterConfig.json'
Imported the above file into my main stylesheet using the name i've called my colour (primary)...
:root { #import-json "../Assets/MasterConfig/masterConfig.json" (primary); }
Added the above colour name to my list of colours...
:root {primary: primary}
I've also tried this with the -- prefix by changing to #import-json... (primary as primary prefix --)
...and added it in my code where it is to be used...
style={{background: "var(--primary)"}}
^^^ with and without the prefix
Am I doing something wrong?
I've noticed in the example it uses the $ symbol, so can this only be used with SCSS?
Any help with this, or any other way to achieve this would be great, thanks!
So, I was quite surprised that I didn't already know how to do this, it seems so trivial and doesn't need any additional package.
To change a CSS varibale from JavaScript code, simply target the root element as you normally would, and set the property!
CSS
Create a variable (I'm using a fallback colour)
:root {--primary: #123456;}
JavaScript
I'm using React, and set this is my App.js componentDidMount function so it's global to my app. I've hard-coded the colour, but this can be pulled from the DB.
componentDidMount() {
const root = document.documentElement;
root.style.setProperty('--primary', '#CCCC00');
}
BooYaa!
There appears to be two was to access the variable you've defined, I've done it in two separate ways and you can implement whichever makes your code neater!
Referencing the variable inline:
CSS
:root {
--testcolor: red;
}
HTML
<div style="background:var(--testcolor)">
Many words
</div>
Example of the working product in JS Fiddle: https://jsfiddle.net/ta37nzer/
Accessing the variable through a class:
CSS
:root {
--testcolor: red;
}
.exampleClass {
background: var(--testcolor);
}
HTML
<div class="exampleClass">
Many words
</div>
Example of the working product in JS Fiddle: https://jsfiddle.net/ta37nzer/1/
I've been assigned to rewrite an existing CSS code into SASS. This is my first experience with SASS, still a beginner.
So, first thing that I started with, I merged all css files into single file. Now I'm going through it and try to separate things into different .scss files.
I have layouted my SASS folder's architecture according to "7-1" pattern, which consists of 7 folders: abstracts, base, layout, modules, pages, themes and vendors. So far so good.
In process of separating my CSS into different files I came across a problem that I couldn't find answers to on google:
Say I have 2 CSS files - main.css and admin.css. There is defined a class in main.css:
.first-line {
padding-bottom:10px;
padding-left:30px;
padding-right:30px;
}
and a class with the same name is defined in admin.css
.first-line {
padding-left:15x;
padding-right:10px;
}
As I understood from SASS tutorials online (correct me if I'm wrong), SASS code should result in only one main.scss where I import all particles, modules etc. and it get's compiled to single main.css file. If so, how do I solve a problem like this, where I need a class to be defined differently only for a single page?
Try to nest that .first-line class in both the files (parent would be diff while nesting) ..... so while compiling into single file, it wont cause a problem
If it is a single-page application, that means you have JavaScript in use.
You can simply define a unique class for each page and assign this class to either body or html element (I prefer the latter one), and in run time you can simply set the page class dynamically. This way, you can define the first-line class and set the default values and put it into a shared .scss file and then overwrite the existing attributes or add new ones to that class for each individual page as needed.
E.g., you might want to structure it like this.:
pages/common.scss:
first-line {
padding-bottom:10px;
padding-left:30px;
padding-right:30px;
}
main.scss:
html {
import 'pages/common';
&.admin {
#import 'pages/admin';
}
&.other-page {
#import 'pages/other-page';
}
}
I'd like to be able to put all of my paths in one file ("property file"), so whenever I refernce them , the provided functionality should imiplement:
some_file.css
#facebook_link {
background:url(../refereced_file/$facebook_link_url); // ?
background-repeat:no-repeat;
width: 12px;;
height: 23px;
}
refereced_file
$facebook_link_url : ../images/old/facebook.png
I'm aware, as a server-side developer (mostly), that the mechanism of the processing of the browser is different from a compiler, and yet, I want to be able to achieve the property file functionality ( "propObject.getProperty(key)").
I'm not using Saas or SCSS, nor CSS variables.
Thought of making another CSS file with an element and referencing to it, but have no idea how to.
I think the only way is either to use SAAS/SCSS or parsing the css file on your server and look for any variables which need to be replaced with a value from your property.
We have many images which are actually picked up based on a color theme (e.g. blue, red, gray ...). We create files with a common name under each theme (e.g. background, ...), is there a way to define the color theme in a common place so that the definition can be abstracted out. This would prevent me from changing the color theme all over the css file.
body {
background: url('../img/blue/background.png');
font-size: 13px;
margin: 0px;
}
While the options suggested here are viable approaches, I'd like to mention SASS and LESS
They are two CSS extension languages, which amongst other things provide variables for doing this sort of color stuff you mention.
You can create dynamical CSS file by using any serverside scripting language like PHP.
style.css.php:
<?php
header("Content-type: text/css");
$theme = 'blue';
$color1 = '#fefefe';
?>
body {
background: url('../img/<?=$theme?>/background.png');
font-size: 13px;
margin: 0px;
}
.sometext {
color: <?=$color1?>
}
I don't believe you can with a pure css implementation as you would need to define your base paths for your images in a variable which you set with some logic (switch statement, if/else if, ..etc.) and then use that variable in the css.
Here are some options I thought of to do this. If you create a pseudo css file with your variable defined as a string that does not occur in css (ex: $basePath) and build out all your css rules in this fake css file as "$basePath+image.jpg". Then with some server side code retrieve the css file and create your template css files by replacing $basePath+ with the actual base path for that theme. The server side code would then save those css files as theme1.css, theme2.css, ...etc.
You then could use url variables to switch between themes using some server side code to insert a reference to the correct css theme file.
This way you would only need to maintain your pseudo template css file. Although you would need to rerun your css creation code each time you change the template css file so that your theme css files get updated.
Not natively in CSS - but you can write some scripts to compile your theme CSS files from templates with variable substitution. I would suggest having a 'layout' and a 'colour' css. The layout would be consistent irrespective of which theme the user is using. The colour css contains only those settings that change per theme.
<style type="text/css">
#import ulr(layout.css);
#import ulr(theme_<?= $activeTheme ?>_.css);
</style>
You could use a tool such as http://lesscss.org/ (if you like Ruby) to create your themed CSS files.
We use NAnt for something similar to this (not CSS, but same idea), and it saves a heap of time rather than maintaining multiple files that differ only by values.