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;
Related
I am trying to generate pdf files using a MadCap Flare project, but the PDF files come out with the wrong font. I am using the latest version of Flare, 2019r2.
I am trying to generate paragraphs using the Flexo fonts from Duotype. All the fonts are installed in the main Windows font directory: C:\Windows\Fonts\DUROTYPE_-_FLEXO-REGULAR_1.OTF. This was accomplished by right clicking on the font and choosing "Install for all users".
An example of the issue is the h2 style. The stylesheet has the following declarations in the default section:
body
{
padding: 0 20px;
}
...
body,
div,
li,
p
{
color: #3b4151;
font-family: FlexoRegular, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
margin: 0.5em 0;
mc-hyphenate: never;
orphans: 2;
widows: 2;
}
...
h2
{
color: #f8193f;
font-family: FlexoBoldIt, Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: normal;
font-size: 1.67em;
page-break-after: avoid;
}
The selector I actually want to use is under a #media section with the following declarations.
body
{
padding: 0;
position: relative;
margin: 0;
}
h2
{
color: #f8193f;
font-family: "Flexo-BoldIt", Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 9pt;
margin-bottom: 0px;
margin: 0px;
margin-top: 6px;
}
When I define the font-familiy as "font-family: "Flexo", Arial, "Helvetica Neue", Helvetica, sans-serif;" I get output with the Flexo font. However, when I try "Flexo-BoldIt" or 'Flexo-BoldIt' or "Flexo Bold Italic" or various other combinations of quotes and font names I get output with Microsoft Sans Serif. When I try to override the style with an explicit declaration such as
<h2 style="text-align: center;font-family: "Flexo-BoldIt"...">
the output is again in MS Sans Serif.
Adding declarations like
font-style: italic;
font-weight: bold;
doesn't help.
Why doesn't Flare generate output with the correct font? Also, why doesn't it generate output with Arial, as that is installed? If I remove "Flexo-BoldIt" from the font-family I get output with Arial.
Any help would be much appreciated.
Have you added font-face in CSS
#font-face
{
font-family: 'YourFontFamilyName';
src: url(../path/to/font);
}
After that use font like
h1
{
font-family: 'YourFontFamilyName';
}
Also, keep your fonts in project files so you can access it with a relative path easily.
Try this out and give me feedback :)
UPDATE
This is more of a tip for every project similar to this one.
Do not use the system installed fonts because if the user doesn't have that font installed on their system it will be wrong. Always put font files in a project directory and access them like above.
Convert the font file into base64
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
Try this, from https://www.madcapsoftware.com/blog/madcap-flare-tip-use-custom-fonts-flare-outputs/:
The #font-face rule can have “font-family” defined as any name. However, I recommend using the default name seen in Flare. You can find out what name Flare is reading the font by going to the Home Ribbon and selecting the Font dropdown. The reason I recommend this is because if the font name is different than what appears in the dropdown, the PDF outputs will have to point to a different font name than your HTML5 outputs.
The name you show in the example looks like the name on the filesystem, not necessarily what the name appears as in the ribbon.
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'm referring to the documentation here:
sass docs
and trying to see if its possible to use an if statement to apply a letter spacing attribute to each class that uses a certain font family.
I've tried
h1 {
#if font-family == 'Open Sans Condensed' {letter-spacing: 0.1em;}
}
h1 {
font-family: 'Open Sans Condensed', sans-serif;
}
with the hope of outputting:
h1 {
font-family: 'Open Sans Condensed';
letter-spacing: 0.1em;
}
which doesn't work. i'm pretty sure that I'm approaching this problem from the wrong angle. Can anybody verify if this kind of usage is possible?
Two ways you could approach this:
1) Include the letter-spacing as part of the font-face definition.
#font-face {
font-family: 'Open Sans';
src: [urls for various formats go here];
letter-spacing: 0.1em;
}
If you're loading the font in from an external stylesheet, like with google fonts or similar, you should still be able to declare a second font-face block that just includes the font-family and letter-spacing rules.
2) Use a sass mixin. You can make it very simple or more flexible, depending on whether you want to account for multiple fonts.
Basic one-font setup:
#mixin font-styles() {
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 0.1em;
}
h1 {
#include font-styles;
}
Or parameterized for multiple font styles:
#mixin font-styles($font: 'headings') {
#if $font == 'headings' {
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 0.1em;
}
#elseif $font == 'text' {
font-family: 'Open Sans', sans-serif;
[related font styles go here]
}
[add more font style sets as needed]
}
h1 { #include font-styles('headings'); }
p { #include font-styles('text'); }
We have many sites with their own font families. I need to add a font to the end of the font family on every site. Is it possible to extend a font family?
p.test {
font-family: Arial, Helvetica;
}
p.test {
font-family: Calibri;
}
The above block sets the font-family to Calibri. I would like it to set the font-family to Arial, Helvetica, Calibri. Something like the below is what I'm looking for:
p.test {
font-family: Arial, Helvetica;
}
p.test {
font-family: += Calibri;
}
Any ideas?
Simply repeat all fonts, like so:
p.test {
font-family: Arial, Helvetica, Calibri, sans-serif;
}
sans-serif is a generic expression that will use any available font on the users system without serifs, so it only makes sense to put it last.
UPDATE:
if the original style has an inherit at the end you may add fonts to the parent elements:
p.test {
font-family: Arial, Helvetica, inherit;
}
div.p-parent {
font-family: Calibri;
}
If the last font in the line is sans-serif, thats what you're gonna get, if you choose not to overwrite it and repeat the other fonts.
Cant understand your question. 'sans-serif' will always fall back to the default sans-serif font on the user's machine. In your case, Calibri will always be ignored...
I have a list of fonts that I'm pulling in from Google's CDN. They list documentation here but I'm having issues setting up the semibold italic styles. Is there a way to make this work?
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,400,300,600' rel='stylesheet' type='text/css'>
#semibold: "Open Sans:600", sans-serif;
#semibold-italic: "Open Sans:600italic", sans-serif;
#light: "Open Sans:300", sans-serif;
I know that I can set the font-weight and style in font-face.
How can I include everything in my variable declaration?
I'm not too familiar with how Google Fonts works, but maybe a mixin would be a decent alternative for you.
.semibold {
font-family: 'Font', 'Font B', 'Font C';
font-weight: 500;
font-style: normal;
}
div {
.semibold;
}
You can use parametric mixins. You can declare a style, say .font, which accept several parameters — in this case, it should accept font-family, font-weight and font-style. Of course you are free to add/remove other font- or text- related properties for further fine-tuning.
// Declare mixin
.font(#fontFamily: Arial, sans-serif; #fontWeight: normal; #fontStyle: normal) {
font-family: #fontFamily;
font-style: #fontStyle;
font-weight: #fontWeight;
}
// Sample styles
.semibold {
.font("Open Sans", sans-serif; 600; normal);
}
.semibold-italic {
.font("Open Sans", sans-serif; 600; italic);
}
.light {
.font("Open Sans", sans-serif; 300; normal);
}