I'm using font-face to pick up my fonts I use on my website. The Swedish characters ÅÄÖ åäö does exist in the font set, but it still shows up weird.
What might be the problem? Here's the code I use to get the font files.
font-family: 'LinotypeAroma';
src: url('../fonts/linotype_aroma_light_sc.eot');
src: url('../fonts/linotype_aroma_light_sc.eot?#iefix') format('embedded-opentype'),
url('../fonts/linotype_aroma_light_sc.woff') format('woff'),
url('../fonts/linotype_aroma_light_sc.ttf') format('truetype'),
url('../fonts/linotype_aroma_light_sc.svg#linotype_aroma_light_sc') format('svg');
font-weight: normal;
font-style: normal;
Related
I have these .scss files:
src/assets/css/color.scss
$white: #fff;
src/assets/css/index.scss
#use './color' as *;
src/assets/variables.scss
#use './css'
$theme-color = $white;
but it's not working. why?
Element 'white' is resolved only by name without use of explicit imports
You would need to use #forward in src/assets/css/index.scss
src/assets/css/index.scss
#forward './color';
and in src/assets/variables.scss, you would need to use the $white variable in the following manner
src/assets/variables.scss
#use './css';
$theme-color = css.$white;
#forward is use when you want to forward a partial in the main file like you are doing in index.scss and for variable.scss #use './css' will make all variable, function, mixin scoped to css variable so if you want to use $white variable you would need to use css.$white and if you do not want to do that you can use #use './css' as *; this will make you use $white variable directly without css. as prefix.
Hope it solves your issue.
I'm trying to use multiple variables accross my differents files, but I got an error saying Undefined variable.
The example:
base.scss
$dark-blue: #031f60;
$blue: #36b2e6;
$dark-grey: #747577;
center.scss
#use 'base';
p {
color: $dark-blue;
}
I specifically used #use because SASS website mentioned that it will be deprecated in the future.
#use only works with dart-sass so far, nonetheless,
The naming scheme for files that you want to include should have an underscore _ at the start of the file name.
for example if anyone wants to include a variables file they should name it as _variables.scss rather than variables.scss.
In your case, change the name of base.scss to _base.scss and it should work as long as they are in the same folder/path given is correct.
ON Fedora 31. All fonts properly installed. It works perfectly on gnome-shell but broken in i3-sensible-terminal ie urxvt
All symbols are broken
Since I am using i3 I want to stick to urxvt
The .Xdefaults is
URxvt.allow_bold: true
URxvt*font: xft:Monospace:pixelsize=14
URxvt*boldFont: xft:Monospace:bold:pixelsize=14
! Fix font space
URxvt*letterSpace: -1
Had the same problem on URxvt. Installing fonts from the below link fixed the problem for me.
https://github.com/powerline/fonts
Installed the fonts and tested with the below command
urxvt -fn 'xft:DejaVu Sans Mono for Powerline-10'
My .Xresources:
URxvt.font: xft:DejaVu Sans Mono for Powerline-9
URxvt.boldFont: xft:DejaVu Sans Mono for Powerline-9
URxvt.italicFont: xft:DejaVu Sans Mono for Powerline-9
URxvt.boldItalicfont: xft:DejaVu Sans Mono for Powerline-9
URxvt.letterSpace: 0
Monospace doesn't support Powerline font, you can add a second font that can handle the characters the first can't handle:
URxvt.font: xft:Monospace:pixelsize=14,xft:Inconsolata\ for\ Powerline:pixelsize=14
You can replace Inconsolata\ for\ Powerline by any powerline fonts you don't have that issue in gnome-shell you should have some installed
i have the index.scss that I've import login.scss , my question is how do map-get the color from index.scss ?
index.scss
#import "./style/login";
$colors: (
primary : #005DFF,
accent : #FFF6BB
);
this is what i done but i receive an error :
"File to import not found or unreadable: ./style/login."
login.scss
.bg {
background-color: map-get($colors, primary );
}
thank you in advance
That error means the file isn't at the path you're pointing to. Is index.scss in the same directory as login.scss? If the file path is correct, it might be an issue with your build process. If you can, please add a screenshot of the folder where these files are, so we can see if the path is right.
Once you have that sorted, you'll need to edit this sass to make it work right. In index.scss, you need to declare your $colors map above your #import login. Otherwise, when login gets imported, it doesn't know what $colors is supposed to be.
I have no background in SCSS, but I want to make a small change to an existing SCSS and recompile it. However, I found that variables with a dollar sign appear in the output CSS. Even if I discard my changes, the output CSS does not match the original.
For example,
#-webkit-keyframes $animation-name {...
is in my output, while
#-webkit-keyframes move-up {...
is the expected original output.
I think it is either because I didn't use the right command to compile the SCSS files, or because the SCSS files were written for an older compiler.
I have tried the following commands (I clear any output before each trial):
sass --scss main.scss main.css
sass --scss --update main.scss:main.css
sass --scss --update .
Because main.scss imports another SCSS file, I also tried copying the content of the depedent SCSS file into main.scss. This didn't make any difference.
The reason variable names are printed instead of their values is because they were not interpolated so sass uses them as the values instead.
You should write
//Assuming a variable $animation-name: move-up;
#-webkit-keyframes #{$animation-name} { ....
Which gets compiled to
#-webkit-keyframes move-up { ....
Without the interpolation sass believes that the $animation-name is the actual name intended to be used as the name for the animation.