Creating a variable with the use of @include

Here's a question that I need help with. I have a SASS @include function that dynamically calculates the font size.

h2 {
   @include rfs(2rem);
}

I use this to adjust the font size based on screen resolution, but I'm facing an issue where a grey background doesn't resize accordingly as the font shrinks.

I was thinking if it's possible to turn @include rfs(2rem) into a variable, then perhaps something like this might work:

$fs: @include rfs(2rem);

.grey-background {
   height: calc(#{$fs} + 3vh);
}

I'm not sure if this should be turned into a @mixin or if there's another solution... I just want the grey background to adjust automatically with the changing font size.

Any help would be appreciated. Thanks!

csssass

Answer №1

Have you considered using the SASS @function? It might be what you need:

@function adjustFontSize($size) {
  @return ...
}

$textSize: adjustFontSize(2rem);

.blue-background {
   height: calc( #{$textSize} + 3vh );
}

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

CSS - using numbers to create dynamic background images

I am looking to create a design where the background images in CSS display increasing numbers per article, like this example: This idea is similar to another post on Stack Overflow discussing using text as background images for CSS. You can find it here: ...

javascriptjqueryhtmlcss

Is there a child missing? If so, add a class

I need to add the class span.toggle if the parent element of li does not have a child ul element. click here to view on codepen Snippet of HTML: <html lang="en"> <head> <meta charset="UTF-8> <title>No Title</title>& ...

javascriptjqueryhtmlcss

Issue: Stylesheet not being loaded on Index.html through Gulp

Issue The .css file is not being loaded by the index.html despite setting up a gulp.js file. It seems like the folder directory might be causing the problem. However, the .scss files in the /src/scss folder are compiling correctly into CSS within the /bui ...

htmlcssnode.jssassgulp

What is the method for calculating the 100% width of a flex child?

Adjusting the width of the .sidebar to 100% seems to make it smaller in size. Interestingly, removing the body's font-size: 1.3rem and toggling the .sidebar's width: 100% results in a slightly larger appearance. It is expected that setting the ...

htmlcssflexbox

Nginx try_files not functioning properly for serving css and images

I am attempting to route any requests that come from https://example.com/user/whatever to my "Get Our App" page located at https://example.com/get_app.html Within my nginx.conf file, I have configured the following block: #Redirecting all requests under ...

htmlcssnginxconfiguration

Using PHP's header function to alter directories

So I am currently diving into PHP and facing a challenge with using headers. My setup involves using xampp for development purposes. I have a basic form where users can log in on "index.php". Upon successful login, the header function kicks in to redirect ...

phphtmlcss

Enable the choice for Bootstrap collapse animation to be customized

Is there a way to allow users or admins on my website to decide whether or not Bootstrap 4 collapse elements should be animated? The concern is that when many elements are moved by the animation, it becomes less smooth. Therefore, it would be ideal to give ...

javascriptjquerycssbootstrap-4

Exploring the images in a continuous loop

Looking to create a unique image looping effect using HTML, CSS, and Jquery/Javascript. The concept is to display several images on one page that do not move, but loop through them one at a time while displaying text above the current image. For example, ...

javascriptjqueryhtmlcss

Creating a color icon for StackExchange using HTML

I am currently working on building my personal website. I am looking to include a link to my Stack Exchange profile on my site using the Stack Exchange icon. However, the icons available in Font Awesome are grayscale and not colored like other icons such a ...

htmlcsscolorsiconsstackexchange

Experience unique website functionalities across Windows/Android and Apple ecosystems

Apologies for any language errors in advance. I'm facing an issue where my website appears differently on Safari or Chrome on iOS/MacOS compared to Windows 10 or Android devices. If you observe the List of Receiving Countries in the images provided: ...

cssreactjsweb

Unable to define a range for the hr element using the nth-of-type selector

Why isn't the hr element from the 1st to the 3rd hour red as specified in the CSS code below? hr:nth-of-type(n+1):nth-of-type(-n+3){ background:red; } <!DOCTYPE html> <html> <head> </head> <body> <hr /> <p>T ...

htmlcss

The appearance of HTML varies depending on the type of mobile device being used

My email template is having display variations on different mobile devices, with the textbox sometimes centered instead of left aligned as intended. Any suggestions on what might be causing this issue and how to resolve it? Desired Display on All Devices ...

javascripthtmlcssresponsive-design

What is the best way to center text within a div that is wider than 100%?

On my webpage, I have a header set to 100% width and text positioned on the banner. However, when zooming in or out, the text's position changes. How can I ensure that the text stays in place regardless of zoom level? Example: jsfiddle.net/5ASJv/ HT ...

csshtml

The hover state of a div will not be lost if its parent element is not being hovered over

When hovering over the second, third, or fourth item, hidden text will appear on the left side. If you hover your cursor over the hidden text, it will disappear again. I want to be able to hover over the second item, move my cursor to "hide", and click o ...

javascripthtmlcssvisible

Guide to customizing CSS styles within a div element using TypeScript code in a Leaflet legend

I'm struggling to add a legend to my map using Angular 5 and typescript. I need help with setting CSS styles for the values (grades) that are displayed on the legend. Can someone guide me on where to put the styles? TS: createLegend() { let lege ...

htmlcsstypescriptwebangular5

"Enhance Your Website with Dynamic Text Effects using JavaScript

Is there a way to continuously animate text during the loading process of an AJAX request? I've tried implementing various methods, such as using a setTimeout function or an infinite loop, but nothing seems to work for repeating the animation once it& ...

javascripthtmlcssanimation

Show the saved email message text on an HTML webpage

Is there a way to show the email content stored in a HTML page? $.ajax({ type: "POST", url: "./mailBody.php", dataType: 'json', success: function (data) { $.each(data, function(index, element) { $('.mail ...

phpjqueryhtmlcss

What steps should be followed to incorporate a horizontal scrollbar within the table's header?

I'm currently using Vue and Vuetify to create a unique layout that looks like this: https://i.stack.imgur.com/QBs3J.png The layout consists of a card with three rows: The first row displays the number of items and includes a search bar. The second ...

cssvue.jsvuetify.js

Can PurgeCSS be implemented with Next.js and module.scss files?

Is there a way to use purgeCSS with component level .scss files (filename.module.scss) in order to remove unused CSS? The hashed classnames make it tricky, especially in a next.js app that heavily relies on module.scss files for styling. This thread here ...

csswebpacksassnext.jscss-purge

Error: Property 'onclick' cannot be set on a null object

JavaScript isn't my strong suit, so I'm struggling to solve this issue. The console is showing me the following error message: Uncaught TypeError: Cannot set property 'onclick' of null <script> var modal = document.getE ...

javascripthtmlcss