I have a Next.js project that uses styled-components, variables.less imported in global.less and theme object that is available globally for all components.
theme.ts fonts vars
font: {
weight: { regular: 350 },
family: {
bold: 'var(--bold-font)',
medium: 'var(--medium-font)',
light: 'var(--light-font)',
book: 'var(--book-font)',
roboto: 'Roboto, sans-serif',
},
},
variables.less
#bold-font: 'GothamRounded, Bold', Arial, sans-serif;
#medium-font: 'GothamRounded, Medium', Arial, sans-serif;
#light-font: 'GothamRounded, Light', Arial, sans-serif;
#book-font: 'GothamRounded, Book', Arial, sans-serif;
styled component
font-family: ${({ theme }) => theme.font.family.book};
the problem is that some variables work some dont, and I cannot figure out the pattern to solve the problem. The variable can be undefined randomly, #white: #fff works but #asd: #fff does not. Am I doing something wrong?
Related
In Stylus, how can we assign a hash key to a list of values? None of the following ways are working for me, it won't compile:
main-content-font = {
family: "Noto Sans", sans-serif,
size: 1em
}
main-content-font = {
family: ("Noto Sans", sans-serif),
size: 1em
}
main-content-font = {
family: ("Noto Sans" sans-serif),
size: 1em
}
main-content-font = {
family: "Noto Sans" sans-serif,
size: 1em
}
main-content-font = {
family: "Noto Sans" sans-serif
size: 1em
}
You didn't note how you were calling it, but here are 2 alternatives:
Encasing the whole thing in single quotes and calling it with unquote should get you there:
main-content-font = {
family: '"Noto Sans", sans-serif',
size: 1em
}
.selector {
font-family unquote(main-content-font[family]);
.subselector {
font-size main-content-font[size];
}
}
Confirm in the stylus REPL.
As would creating a variable with the font family there, referencing it in the hash, and then calling the hash member without an additional function:
sansserif = "Noto Sans", sans-serif
main-content-font = {
family: sansserif,
size: 1em
}
Also viewable in the REPL.
I am using font-face in index.css and accessing these font-family in other places of my application.
My requirement is to assign each of these font-face to different variables. And use these variables in my applications. I want to name these variables generically as 'regular', 'medium' because if I change it from OpenSans to other font-family I need not change font-family as OpenSans to other in other parts of my application.
I am using styled-components for stylings .
#font-face{
font-family: 'OpenSans';
font-style: normal;
font-weight: 400;
src: url(./assets/Fonts/OpenSans-Regular.ttf)
}
#font-face{
font-family:'OpenSans-SemiBold';
font-style: normal;
font-weight: 400;
src:url(./assets/Fonts/OpenSans-SemiBold.ttf)
}
#font-face{
font-family:'OpenSans-SemiBoldItalic';
font-style: normal;
font-weight: 400;
src:url(./assets/Fonts/OpenSans-SemiBoldItalic.ttf)
}
#font-face{
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 400;
src: url(./assets/Fonts/ProximaNova-Regular.ttf);
}
#font-face{
font-family: 'Proxima Nova Medium';
font-style: normal;
font-weight: 400;
src: url(./assets/Fonts/proxima-nova-medium.ttf);
}
Also, once these font-faces are assigned to different variables how can I access in styled-components of other components
eg:
const p = styled.p`
font-family: ??? --> is it using ${variable_name} ?
`
my requirement in index.css :
var Medium-font = {
#font-face{
font-family: 'Proxima Nova Medium';
font-style: normal;
font-weight: 400;
src: url(./assets/Fonts/proxima-nova-medium.ttf);
}
};
var Regulat-font = {
#font-face{
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 400;
src: url(./assets/Fonts/ProximaNova-Regular.ttf);
}
};
and so on..
You don't need to assign the whole font-face to a variable. Fonts are NOT something that you change often. But even if you do for some reason... the font-face will still need to be changed like url and the name of the font itself in the index.css but the only change in actual css will be the font-family property.
You can just assign the font-family to a variable in styled-components and then use it everywhere. This way you'll only need to change it in one place in your theme.
You can use ThemeProvider to achieve this.
// Some component
const Para = styled.p`
font-family: ${props => props.theme.fontFamily1};
`;
const Para2 = styled.p`
font-family: ${props => props.theme.fontFamily2};
`;
// Define what props.theme will look like
const theme = {
fontFamily1: "OpenSans",
fontFamily2: " Proxima Nova"
};
//render method of App.jsx or root app file
render(
<div>
<ThemeProvider theme={theme}>
<Para>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Para>
<Para2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Para2>
</ThemeProvider>
</div>
);
<Para> compoent will now have the font OpenSans and <Para2> Proxima Nova.
If you decide to change the font, just change the fontFamily1/fontFamily2 prop in theme accordingly and it'll reflect in all the components using the theme.
Refer this for more info: https://styled-components.com/docs/advanced#theming
Hope this helps !
I'm trying to use italic styling in react-pdf.
Everything works well until I use font-style: italic;.
Is there another way style text as Italic in react-pdf ?
const Italic = styled.Text`
font-size: 12px;
lineheight: 20px;
text-align: left;
font-family: "Roboto Condensed";
letter-spacing: 0.5px;
font-style: italic;//problem is with this line
font-weight:400;
`;
It is giving me the error:
Uncaught (in promise) Error: Could not resolve font for undefined, fontWeight 400
When you register your fonts, you need to make sure to include a variant for each fontStyle you wish to use. For example:
Font.register({
family: 'Roboto',
fonts: [
{ src: '<path-to-normal-font-variant>' },
{ src: '<path-to-italic-font-variant>', fontStyle: 'italic' },
...
]
});
const Italic = styled.Text`
font-size: "12px";
lineheight: "20px";
text-align: left;
font-family: "Roboto Condensed";
letter-spacing: "0.5px";
font-style: "italic";//problem is with this line
font-weight:400;
`;
where ever you are suffixing px needs to be in either single or double quotes and font-style: value(italic) need to be in double quotes as well.
I'm using SCSS and I have a variable $arial: 'Arial', serif;
Now I want to do something like that:
.english{
$arial: 'Arial', serif;
font-family: $arial;
}
.japan{
$arial: 'Noto Sans';
font-family: $arial;
}
Because from the beginning, my customer wants to display $arial as 'Arial', but now they're separating it to 2 pages, (English page and Japanese page).
You could use a newer CSS feature called CSS variables to accomplish this. Simple define what variables need to change in what context, and then import them in the definitions themselves. You can find the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Here is an example (using very easily distinguishable fonts):
document.querySelector( 'h1' ).addEventListener( 'click', e => document.body.classList.toggle( 'japanese' ) )
body {
--font: 'Comic Sans MS', monospace;
font-family: var(--font, cursive);
}
body.japanese {
--font: 'Impact';
}
<h1>Lorem Ipsum Dolor Sit Amet</h1>
With a simple class toggle, the variable is updated and the definition only needs to be made once.
I suggest you to make use of CSS Vars as above. To accomplish this in sassy way you can make use of sass map
$map:("english":"'Arial',serif","japan":"'Nato Sans'");
#each $key , $value in $map{
.#{$key}{
font-family:unquote($value);
}
}
output
.english {
font-family: 'Arial',serif;
}
.japan {
font-family: 'Nato Sans';
}
I'd like to know if it's possible to define a variable in Sass depending on if a class is set or not. I need to do some font type tests and would like to change the font-variable $basicFont dynamically based on the body class.
E.g.:
$basicFont: Arial, Helvetica, sans-serif;
body {
&.verdana {
$basicFont: Verdana, sans-serif;
}
&.tahoma {
$basicFont: Tahoma, sans-serif;
}
}
Is there a possibility to handle this in Sass?
No. What you're asking for would require Sass to have knowledge of the DOM. Sass only compiles directly to CSS, it is never sent to the browser.
With your sample code, all you're doing is overwriting $basicFont every time. In version 3.4 or later, your variable will only exist within the scope of the block where it was set.
So, your only real options are to make use of mixins or extends.
Extend
This is effective, but is only suitable for very simple cases.
%font-family {
&.one {
font-family: Verdana, sans-serif;
}
&.two {
font-family: Tahoma, sans-serif;
}
}
.foo {
#extend %font-family;
}
Output:
.one.foo {
font-family: Verdana, sans-serif;
}
.two.foo {
font-family: Tahoma, sans-serif;
}
Mixin
This is the method I would recommend if you want a little more fine grained control over which variables are used where.
$global-themes:
( '.one': ('font-family': (Verdana, sans-serif), 'color': red)
, '.two': ('font-family': (Tahoma, sans-serif), 'color': blue)
);
$current-theme: null; // don't touch, this is only used by the themer mixin
#mixin themer($themes: $global-themes) {
#each $selector, $theme in $themes {
$current-theme: $theme !global;
&#{$selector} {
#content;
}
}
}
#function theme-value($property, $theme: $current-theme) {
#return map-get($theme, $property);
}
.foo {
#include themer {
font-family: theme-value('font-family');
a {
color: theme-value('color');
}
}
}
Output:
.foo.one {
font-family: Verdana, sans-serif;
}
.foo.one a {
color: red;
}
.foo.two {
font-family: Tahoma, sans-serif;
}
.foo.two a {
color: blue;
}