I'm trying to run the lms of edx-plateform but i keep getting this error
CompileError: Error: Undefined variable: "$verdana".
on line 314 of lms/static/sass/partials/base/_variables.scss
$sans-serif: $verdana !default;
-----------------^
that's what is written inside the _variablesscss file
$sans-serif: 'Open Sans', $verdana, sans-serif !default;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console',
monospace !default;
$body-font-family: $sans-serif !default;
$serif: $georgia !default;
I'm not sure what to do to solve this problem
Looks like you need to add a definition for the $verdana variable in your _variablesscss file:
$verdana: Verdana, Geneva, sans-serif !default;
Or simply remove the $verdana variable from your $sans-serif variable.
$sans-serif: 'Open Sans', Verdana, Geneva, sans-serif !default;
Related
I would like to override the global Antd font. I've found a few examples but the Antd styling is always taking precedence.
In the top level component (App.tsx) I'm importing an scss file. This file is being loaded correctly as I can see the style being overridden when inspecting the page.
app.scss
#font-face {
font-family: 'Mulish', serif !important;
}
&:root{
font-family: "Mulish", serif !important;
}
html body{
font-family: "Mulish", serif !important;
}
body{
font-family: "Mulish", serif !important;
}
The font-family is instead set to the Antd default. If I turn disable this css when inspecting it falls back to the Mulish font.
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
How can the global font be overridden with Antd 4.23.0?
I try to convert a sass style into a scss style format.
the orgininal sass file is:
$family-sans-serif: "Avenir", Helvetica, Arial, sans-serif
I try to use:
$family-sans-serif: ("Avenir", Helvetica, Arial, sans-serif);
But I get error fellowing:
Error in beforeCreate hook: "Error: Module build failed:
$family-sans-serif: ("Avenir", Helvetica, Arial, sans-serif);
^
Media query expression must begin with '('
How to defined variable in scss? espically the variable is a list.
I use these for variables in projects, Depending if your using #font-face etc
$font-josefin: "JosefinSans", Helvetica, Arial, sans-serif;
$font-raleway: "Raleway", sans-serif;
In my project I call the variables.
body {
font-size: $default-px;
font-size: $default-rem;
line-height: 1.8em;
font-weight: 400;
font-family: $font-raleway;
letter-spacing: 0;
font-style: normal;
}
You only need to append a semicolon to the line, then you have valid SCSS. Eg.: $family-sans-serif: "Avenir", Helvetica, Arial, sans-serif;
i noticed an issue when using Less with font shorthand
.font(#weight: 300, #size: 22px, #height: 32px) {
font: #weight #size/#height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}
the above fails with
this.a.toCSS is not a function
http://localhost/tumblr/modern1/css/style.less on line 1, column 0:
1. #highlight: #cb1e16;
2. #shade1: #cb1e16;
when i split the properties up it works
.font(#weight: 300, #size: 22px, #height: 32px) {
font-weight: #weight;
font-size: #size;
line-height: #height;
font-family: "Yanone Kaffeesatz", "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}
i think its because of the slash / thats causing the problem, i think since Less can do calculations, eg. 2px + 5 = 7px its trying to do a divide?
Just ran into this issue, the escape function (for less.js anyway) is:
e()
Like this
font: #weight #size e('/') #height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
The forward slash / character is causing the LESS compiler to divide your font-size by your line-height. You can:
Separate your CSS into non-shorthand, separate rules
font-size: #size;
line-height: #height;
Escape some or all of your LESS font shorthand rule. The slash / itself is the best part to escape. You can use the e, e("/") escape syntax, or the newer, better documented tilde-quote ~"/". You can also use the LESS string interpolation #{} syntax to insert your variables.
Try this:
font: #weight #size~"/"#height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
Or this:
font: #weight ~"#{size}/#{height}" "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
LESS 1.4 and above now have a "strictMath" option that solves the ambiguity between and font shorthand. In 1.4 it is disabled by default to make transitioning easier, but in later versions it will be enabled by default.
See the 1.4 notes here
When strictMath is enabled, all math operations must be wrapped in parenthesis (10px / 5px) and the forward slash in the font short will not be interpreted as division.
I was just about to change the default font with Bootstrap SASS and I found this:
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
What's the difference between sans-serif and serif in this context? Because if I inspect my page, all fonts are Helvetica Neue.
How is serif/Georgia utilised if all I'm seeing is Helvetica Neue being used?
Those are just options to change the base style for the font so if you want serif or sans-serif. They do this:
Create the three base styles:
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
Then set the sans-serif on a base var:
$font-family-base: $font-family-sans-serif !default;
And use that base to define the font-family for the body therefore all the document:
body {
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
color: $text-color;
background-color: $body-bg;
}
The other options are there if you want to customize the theme and change quickly to serif or monospace all the document.
I have my fonts set in my style.css:
font-family: "Arial, Verdana, sans-serif";
But my website still seems to use sans serif. What is the problem here?
The commas in your CSS font-family specification need to be outside the quotes.
For example:
font-family: "Arial", "Verdana", sans-serif; /* And you should really
omit the quotes if it's only one word */
Not
font-family: "Arial, Verdana, sans-serif";
Otherwise, the CSS parser thinks you're looking for a font called "Arial, Verdana, sans-serif", which clearly doesn't exist.
Try removing your "" from the font-family definition:
font-family: tahoma, sans-serif;
Like that. Only put the " around when you have multiple words such as
font-family: "mutiple word font name",tahoma, sans-serif;