Looking to enhance the reliability of your Sass mixin for font shorthand?

Just so you know, I am no expert in Sass, I am still learning.

I recently discovered the power of arguments in mixins and now I want to use them all the time :)

Description

I have been using a web font with 3 families: regular, bold, and italic. So, I created this mixin:

@mixin ffArsenal($style:regular) { font-family:arsenal-+$style, Arial, "Helvetica Neue", Helvetica, sans-serif; }

I can use it in several ways:

  1. @include ffArsenal();
  2. @include ffArsenal(bold);
  3. @include ffArsenal(italic);

And the outputs are:

  1. font-family: arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  2. font-family: arsenal-bold, Arial, "Helvetica Neue", Helvetica, sans-serif;
  3. font-family: arsenal-italic, Arial, "Helvetica Neue", Helvetica, sans-serif;

Everything was going well until...

Problem

I need to specify the font-size or line-height. But rather than setting these properties separately, I prefer using the shorthand style.

In plain CSS, I would do something like this to add font-size and line-height:

font: 1.6rem/1.1 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;

The issue is that with the current mixin, I can't utilize the shorthand method.

Question

How can I enhance this font mixin to make it more flexible, allowing for options like these (which are just ideas and not functional):

  1. @include ffArsenal(); [using default values]
  2. @include ffArsenal(1.1rem);
  3. @include ffArsenal(1.1rem,1.8);
  4. @include ffArsenal(1.8);

Desired outputs would be:

  1. font: 1.6rem arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
    [default values]
  2. font: 1.1rem arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  3. font: 1.1rem/1.8 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  4. font: 1.6rem/1.8 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;

Objective

While this example uses a specific typeface, the goal is for this mixin to work seamlessly with any font family, enabling easy declaration of a font shorthand style with minimal effort and maximum efficiency.

Thank you in advance for any assistance on this matter.

cssfontssassmixins

Answer №1

If you're looking to avoid the complications of mixins and want a cleaner approach in your CSS code, consider using functions instead. By implementing a simple function like the one below, you can achieve the desired styling with ease:

@function fontSelection($type: regular) {
    @return font-#{$type}, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.bar {
    font-family: fontSelection();
    font: 1.1rem fontSelection();
    font: 1.1rem/1.8 fontSelection();
    font: 1.1rem fontSelection(bold);
}

Resulting Output:

.bar {
  font-family: font-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font: 1.1rem font-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font: 1.1rem/1.8 font-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font: 1.1rem font-bold, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating horizontal card overflow with arrow navigation in Bootstrap 4.5: A step-by-step guide

Using Bootstrap, I've created a snippet that generates an overflow card that can be scrolled horizontally. <div class="container"> {{-- If you look to others for fulfillment, you will never truly be fulfilled. --}} <h4 class="mb- ...

phphtmlcsslaravelbootstrap-4

Positioning tooltip arrows in Highcharts

I'm attempting to modify the Highcharts tooltip for a stacked column chart in order to have the arrow on the tooltip point to the center of the bar. I understand that I can utilize the positioner callback to adjust the tooltip's position, but it ...

javascriptjqueryhtmlcsshighcharts

Changed the form to become scrollable once it reaches a designated section during scrolling

Seeking assistance! I am currently working on a website using Bootstrap 5, and I have a registration form within the banner section, specifically within a row > col-md-5. The position of the form is fixed, but I want to make it scrollable once it reache ...

htmljquerycssbootstrap-5

In Javascript, the color can be changed by clicking on an object, and the color

Looking for help with my current HTML code: <li><a href="index.php" id="1" onclick="document.getElementById('1').style.background = '#8B4513';">Weblog</a></li> The color changes while clicking, but when the lin ...

javascriptcsscolorsbackground-color

Concealing divisions on a website with CSS styling

In my div, I have some text that I want to hide. <div style='visibility:hidden;' id='emailid'>$email</div> Although the visibility attribute successfully hides the text, it leaves behind empty space on the webpage where th ...

phphtmlcss

Customize GridView Appearance in ASP.NET

After using the examples provided at this link, I was able to get everything working smoothly. However, the issue I'm facing now is with the style of the GridView. When the gridview first loads, it looks perfect. But when I click on the Edit button, t ...

cssasp.netgridviewstyles

What is the best way to format a card header in bootstrap 4 so that it displays three elements in a row and truncates the text in the middle element on smaller screens?

I am currently working with a set of cards to create an accordion. Each card consists of a card header and a card body. Within each card header, there are four elements: an <i> tag for a carat icon, an <h4> tag displaying the title of the card ...

htmlcssbootstrap-4alignment

When an element is focused using jQuery, allow another element to become clickable

I've been working on implementing an input field along with a dropdown list right next to it. The concept is that users can either type in the input field or choose a value from the dropdown list. I attempted to use styles to show the dropdown list wh ...

jquerycssformsevent-handlingcss-selectors

Leverage variables in JavaScript to establish a unique style

function AdjustScale(){ scaleX = window.innerWidth / 1024; scaleY = window.innerHeight / 768; element = document.getElementById("IFM"); element.style.transform = "scale(" + scaleX + ", " + scaleY + ")"; } I'm facing an issue with thi ...

javascriptcss

Creating a Striking Multi-Layered CSS Header

Can someone help me figure out how to add horizontal lines behind the words in this header? Here is what I have so far: https://i.sstatic.net/dN7s4.jpg. However, I want to achieve something similar to this design: https://i.sstatic.net/FZoSF.jpg. You can v ...

htmlcss

Modify the button background image, text, and shape simultaneously when hovered

Can a button's background image or text change, along with its shape, when hovered over using CSS, JS, or both? For example, if I have a button displaying a checkmark symbol ✓ and I want it to transform from a circle shape to a rectangle shape, and ...

javascriptjquerycssbutton

What is the reason behind the issue where max-height disrupts border-radius?

My inline svg is styled with the following CSS: .img { border-radius: 15px; overflow: hidden; max-width: 70vw; margin-top: 6vh; max-height: 50vh; z-index: -1; text-align: center; } Everything seems to work as expected, except f ...

htmlcss

The overlay only covers a portion of the page

I'm currently working on a new webpage and have found the perfect background image. However, I would like to add an overlay to darken the image. Unfortunately, the overlay doesn't cover the entire page! Despite my attempts, I haven't been s ...

htmlcss

Adjust the size of the div based on a percentage of the header div

I'm looking to add a new div within the header of my WordPress site. I want this div to be a percentage of the parent div's size, specifically occupying only the right side of the header. Right now, the header contains my logo on the left side, a ...

htmlcsswordpressfontssize

Utilizing BootStrap 4 to ensure uniform image sizes within a row of columns

I'm facing a challenge in creating a row of 4 images that are responsive and uniform in size, despite being different dimensions (640x799, 640x479, ...). I've attempted to use columns and img-fluid to achieve this, but the shorter images do not f ...

htmlcssbootstrap-4

The height setting for the table does not appear to be effective

Here is the structure of my HTML: <div class="wrapper"> <table> <tbody> <tr> <td>some content</td> </tr> </tbody> </table> </div> The style for my wrapper looks like this: .wrapper{ color: #444 ...

htmlcss

I only notice certain text after carefully inspecting the elements in Google Chrome

While creating an application on Sitefinity (ASP.NET), I encountered an issue where certain elements, such as button text and labels, were not loading correctly when running the application. However, upon inspecting the element, they appeared to be working ...

c#javascriptasp.netcsssitefinity

Shade your elements with the magic of CSS3

Can someone help me create an object with a drop shadow using CSS3? Here is my current code: <!DOCTYPE html> <html> <head> <style type="text/css"> div { width:300px; height:100px; background-color:yellow; } </style> </ ...

cssdropshadow

What is the best way to keep tab content fixed when switching?

I've successfully implemented tab switching, but I need to make the content fixed. How can I achieve this so that no matter the length of the content, it remains fixed in its position when switching tabs? The current issue is that when the content is ...

javascriptjqueryhtmlcss

Is there a way to modify the font color in Chrome when the input autofill feature is active?

I tried adding the css code below: input:-webkit-autofill{ color:white; } Unfortunately, it didn't have any effect. If anyone can assist me with this issue, I would greatly appreciate it. Thank you. ...

css