//font mixin
//$family = font-family
//$size = font-size
//$line-height = line-height of the text
//$color = color of the text
@mixin font($family, $size, $line-height: $line-height;, $color: $color-base) {
font-family: $family;
font-size: $size;
line-height: $line-height;
color: $color;
}
// you can use the variables for font like below
$opensans_light: 'Opensans-Light';
$opensans_regular: 'Opensans-Regular';
$opensans_semibold: 'Opensans-Semibold';
// usage of the mixin
h1 {
@include font($opensans_bold, 20px, 1.2, #424242);
}
p {
@include font($opensans_regular, 16px, 1.4, #333);
}
SASS Mixin for font, font-size, line-height,color.
You can use this Mixin for font-family, font-size, line-height and color all in one mixin.
I explained with examples in the snippet above how to use the Mixin.
You can use it for any element which includes text (heading tags/paragraph,buttons,links and every text )
You can use this Mixin for font-family, font-size, line-height and color all in one mixin.
I explained with examples in the snippet above how to use the Mixin.
You can use it for any element which includes text (heading tags/paragraph,buttons,links and every text )
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.