#mixin title($cat-font: 12px, $line-height: 18px) {
font: normal $cat-font/$line-height 'Open Sans', serif;
}
a.title{
#include title();
}
If you write $cat-font/$line-height, slash "/" will be division operator and you will see in the css is:
a.title{
font: normal 0.6667 'Open Sans', serif;
}
Here is the reference for font shorthand for scss.
https://www.sitepoint.com/sass-basics-operators/
The solution is
#mixin title($cat-font: 12px, $line-height: 18px) {
font: normal #{$cat-font} / #{$line-height} 'Open Sans', serif;
}
a.title{
#include title();
}
You will see in the css is:
a.title{
font: normal 12px/18px 'Open Sans', serif;
}
Reference:
font-size: 16px / 24px // Outputs as CSS
font-size: (16px / 24px) // Uses parentheses, does division
font-size: #{$base-size} / #{$line-height}; // Uses interpolation, outputs as CSS
font-size: $base-size / $line-height // Uses variables, does division
opacity: random(4) / 5; // Uses a function, does division
padding-right: 2px / 4px + 3px // Uses an arithmetic expression, does division
Related
My instructor requires it to be done through css.
I can't figure out where I slipped up, though I'm sure it's staring me in the face.
/* font: font-style font-variant font-weight font-size/line-height font-family; */
/* font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif */
body {
font: normal normal normal 14px/1.3em arial, sans-serif;
}
h1 {
font: normal normal; padding: 1.5em;
}
li {
display: inline;
}
.nav {
font: normal normal bolder 30px/1.5em arial, sans-serif; background-color: #526063;
}
a {
color: #ff4300;
}
body {
background-image: url(../Project Img/camping sky.jpg);
}
Just use quotes and then whitespace is okay. Single or double:
background-image: url('../Project Img/camping sky.jpg');
I have this great for loop in my precss style sheet. I would like to convert it to a mixin where i can pass the start values for $size (font-size) and $spacing(letter-spacing) for different media queries. I cannot get the variables to increment as i progress through the loop when i call it from a mixin. It works fine from the stylesheet
/*--adds .4 rem to each heading fz and character spacing 1-6---*/
$size: 1.8rem;
$spacing: 7px;
#for $i from 6 through 1 {
h$i {
font-size: resolve($size);
letter-spacing: resolve($spacing);
#extend %heading;
}
$size: $size + .4rem;
$spacing: $spacing * 1.2;
}
Your current code is close to working as a mixin when wrapped in a #mixin declaration in SCSS. The only tweak needed is outputting the $i in the selector using the #{$variable}
SCSS input:
%heading{
/* heading properties */
color: #999;
font-family: sans-serif;
}
#mixin headingSize($size: 1.8rem, $spacing: 7px){
#for $i from 6 through 1{
h#{$i}{
#extend %heading;
font-size: $size;
letter-spacing: $spacing;
}
$size: $size + .4rem;
$spacing: $spacing * 1.2;
}
}
#include headingSize($size: 2rem, $spacing: 10px);
This example uses your original $size and $spacing variables as default parameters in the mixin.
Here's an example JSFiddle in action.
CSS output:
h6, h5, h4, h3, h2, h1 {
/* heading properties */
color: #999;
font-family: sans-serif;
}
h6 {
font-size: 2rem;
letter-spacing: 10px;
}
h5 {
font-size: 2.4rem;
letter-spacing: 12px;
}
h4 {
font-size: 2.8rem;
letter-spacing: 14.4px;
}
h3 {
font-size: 3.2rem;
letter-spacing: 17.28px;
}
h2 {
font-size: 3.6rem;
letter-spacing: 20.736px;
}
h1 {
font-size: 4rem;
letter-spacing: 24.8832px;
}
Pretty straightforward. Im new to sass, but I want my font to be a specific color. I have a mixin
#mixin small-headline-font {
font: {
family:'Open sans', sans-serif;
size: 24px;
weight:700;
color:#052C47;
}
}
but it compiles to
#small-headline {
font-family: 'Open sans', sans-serif;
font-size: 24px;
font-weight: 700;
font-color: #052C47;
}
}
Font-color is not the correct property name, so how do I keep SASS from compiling color to font-color?
Take it out of the font{} brackets:
#mixin small-headline-font {
font: { /* Anything in here will have "font-" prepended */
family:'Open sans', sans-serif;
size: 24px;
weight:700;
}
color:#052C47;
}
I'm using a reset so that ems will be 10x normal pixel sizes. This is working fine for everything EXCEPT line-height. I want to have a h2 line-height of 24px (under normal text sizing) but declaring 2.4em makes it way too big, but 1.5em works. Apparently the 62.5% rule just isn't applying. Any idea why?
* {
margin: 0; padding: 0;
}
body {
font: 62.5% georgia, serif;
}
h2 {
background: #3418CD; color: #FFFFFF;
font: bold 1.6em/24px georgia, serif;
letter-spacing: 2px;
}
When you're using line-height:2.4em that is relative to the font size, so a line height of 2.4em and a font size of 1.6em will be produce a total line height of about 38px.
If you use:
h2 {
font: bold 1.6em/1.5 georgia, serif;
}
then the line height will be equal to 16px x 1.5, or 24px.
The layout for my main navigation will shift incorrectly if the font used is too large (actually if too wide).
The first font in the font family looks great at a specific font, however the second font (which will be used if they do not have the first) is too wide and will shift the layout.
I did find this similar quesiton which was because the font was too tall. The answer was to use the ex unit because it is based off height.
Is there a unit I can use for width, or is there a way to specify the font-size for each font in the font-family?
Consider supplying similar fonts as alternatives. For instance:
font-family: Arial, Helvetica, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
That way, the alternative font won't make the layout break.
Ideally for fonts I would suggest using standard classes such as x-small (extremeley small), small, medium, med-small, large, med-large, x-large etc., and use these classes for different font sizes. Only if you want something really big, you can always use <h1>, <h2> tags. I would use % as the standard for all of these. In my usage with various fonts, they rarely have broken the below classes used.
.body {
font-family: arial,helvetica,clean,sans-serif;
}
.x-small {
font-size: 77%;
letter-spacing: normal;
}
.small {
font-size: 85%;
letter-spacing: normal;
}
.med-small {
font-size: 92%;
letter-spacing: normal;
}
.medium {
font-size: 100%;
letter-spacing: normal;
}
.med-large {
font-size: 107%;
letter-spacing: normal;
}
.large {
font-size: 114%;
letter-spacing: normal;
}
.x-large {
font-size: 122%;
letter-spacing: normal;
}
.x2-large {
font-size: 131%;
letter-spacing: normal;
}
.x3-large {
font-size: 138.5%;
letter-spacing: normal;
}
.strong {
font-weight: bold;
}