Update the SCSS variables for printing purposes

Is it possible to adjust variables in SCSS specifically for printing purposes?

Here are some current variables I have:

$baseFontSize    : 12px;
$defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$defaultSerif    : Times, "Times New Roman", serif;

I would like to change these variables for print styles. For instance:

$baseFontSize    : 10pt;
$defaultSansSerif: "Courier New", Courier, monospace;
$defaultSerif    : Georgia, Serif;

In the case of font families, I could create a separate variable like $defaultPrintSansSerif and redefine the CSS for printing. However, when it comes to font size, it is not feasible to rewrite every class for print styles in the CSS.

I am searching for a way to modify my $baseFontSize from 12px to 10pt automatically for print styles. For example:

Calculation             SCREEN CSS                PRINT CSS
$baseFontSize           12px                      10pt
$baseFontSize  * 2      24px                      20pt
$baseFontSize  * 3/2    18px                      15pt
csssass

Answer №1

There doesn't seem to be any issue here.

For example, consider a base/_variables.scss:

$baseFontSize    : 12px;
$defaultSansSerif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$defaultSerif    : Times, "Times New Roman", serif;
$headerBackground: red;
$someOtherStuff  : foo;

You start your screen.scss with:

@import "base/_variables.scss";

And your print.scss with:

@import "base/_variables.scss";

$baseFontSize    : 10pt;
$defaultSansSerif: "Courier New", Courier, monospace;
$defaultSerif    : Georgia, Serif;

If the issue is having screen styles in the print stylesheet, there's not much you can do. You either have to manually change what needs modification or separate the styles for screen and print (leading to duplicate code).

However, when it comes to font-size, there is a workaround available.

It is recommended to set the font-size absolutely for the html element and relatively for everything else, like so:

/* Enabling inheritance of all elements */
@import "compass/reset";

html {
  font-size: 16px; }

html * {
  font-size: 1em; }

h1 {
  font-size: 2.75em; }

By following this approach, adjusting the font sizes across your website becomes as simple as changing the font-size of the html element!

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

Issue with .NET Core web application failing to display CSS styling

In my .net core 2.0 Razor Pages application, I am facing an issue with rendering the site.css file as desired. My attempt to customize the _layout.cshtml file by modifying the navigation bar has not been successful. Upon running the project, the CSS styles ...

c#htmlcss.netrazor

What are the steps to incorporate an iframe containing uniquely designed XML content?

I'm currently working on a website project for a client who specifically wants to include news from the BBC. Despite spending 3 hours searching online, I haven't been able to successfully insert an XML file into an iframe and style it to the clie ...

javascriptjquerycssxmliframe

unable to apply custom css to primefaces components

In my Java EE application, I am using a ready-made template with CSS and jQuery. All the PrimeFaces components are rendering properly except for the panelGrid control of PrimeFaces 3.2. It is being displayed with a border, but I want it without a border. I ...

javacssjsfprimefaces

When the Navbar div is set to Position:fixed, it generates empty space on the page

I'm facing the issue of unwanted white space in the center of the page below the Navigation Bar. Despite numerous attempts to remove it, I haven't been successful. Below is the HTML code snippet: html: <!DOCTYPE html> <html> <h ...

htmlcsswhitespace

Styling the Sidebar with a Tucked-In Header Ribbon in CSS

There are numerous methods to achieve this desired effect: I initially used a table to achieve this, but I have now chosen against using tables for that purpose. What is the most effective way to accomplish this while maintaining a right border? ...

htmlcss

Incorporate custom CSS designs onto your Google Maps markers

Is there a way to apply css styles to ui-gmap markers in angular.js? For instance, consider the following code: <ui-gmap-markers doCluster="true" click="'onClicked'" models="vm.map.markers" coords="'coords'" icon="'icon&apo ...

cssangularjsgoogle-mapsgoogle-maps-markers

Add an active CSS class to a block upon page reload

I'm having a bit of trouble with my HTML code. Here's what it looks like: <div class="side-button"> <a href="/first"> First Option <a> </div> <div class="side-button"> <a href="/second"> Second Opti ...

javascriptjqueryhtmlcss

In your web projects, how many external conditional stylesheets do you typically incorporate specifically for Internet Explorer?

What is the number of external IE Conditional Style-sheets utilized in your web projects specifically for Internet Explorer? Make sure to review this page before you provide an answer: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ ...

csscross-browser

Utilizing CSS variables and HSLA, create a distinctive linear gradient styling

I am encountering an issue with a CSS variable: :root{ --red: hsl(0, 100%, 74%); } Despite defining the variable, it does not work in the following code snippet: .page-wrapper{ background-image: linear-gradient(hsla(var(--red),.6), hsla(var(--red),.6 ...

htmlcss

Tips for aligning images inside tab content areas

While using an "accordion" jQuery to show a contact list, I have encountered a challenge that may seem simple to someone experienced in this. Here is the code snippet: <!doctype html> <html lang="en> ... (Code continues) I am looking to add ...

jqueryhtmlcss

How to retrieve the image source using jQuery

<img src="../img/arnold.png" alt="Arnold"> Is there a way to retrieve the absolute path of this image using jQuery? Currently, when I use img.attr("src"), it only returns "../img/arnold.png", but I need it to return something like "http://site.com/ ...

javascriptjqueryhtmlcssimage

IE has trouble with CSS inline-block and width-auto styling, leading to incorrect rendering

Recently, I've noticed a strange behavior in Internet Explorer 9-11 and Edge (Spartan). In all browsers except for IE, my example displays as desired: However, in Internet Explorer, it looks different: I used to encounter this issue on multiple bro ...

htmlcssinternet-explorercross-browserwidth

Stop the padding of list items from wrapping when displayed in a horizontal list

My goal is to create a horizontal unordered list (<ul>) with four columns in each row. The number of list items (<li>) may vary and change during runtime. Existing Code and Outcome ul { -webkit-columns: 4; /* Chrome, Safari, Opera */ -m ...

htmlcss

Use CSS to transform a rounded corner into a perfect circle by specifying the radius with a percentage

Looking to give my images rounded corners, but struggling with Bootstrap 4 responsive images (With the class img-fluid). Using border-radius=15px isn't ideal as it distorts the corners on small viewports and large images. Tried border-radius=15%;, bu ...

twitter-bootstrapcssbootstrap-4

Accessing web authentication through VBA

Having some difficulties trying to access my webtext account through VBA. The first hurdle I faced was identifying the tags for the username and password input boxes. After using inspect elements, it seems like the tags are "username" and "password." Howe ...

htmlcssexcelvba

Concealing and organizing navigation bar items for mobile devices

Currently, my navbar looks like this on a larger screen: But here's how it appears on a smaller screen (phone): What I'm hoping to achieve is to make the U logo on the top left disappear and align "get in touch" closer to the other elements. On ...

htmlcsstwitter-bootstrap

What is the reason for the discrepancy in actual size of <input type="text"> compared to the specified size

Let's analyze the following code snippet: <div style="width: 10em; float: left; padding: 0; margin: 0"> <input type="text" style="width: 10em"/> </div> The text field in this code does not fill up the entire parent DIV as one mig ...

csshtmlinput

On smaller screens in portrait mode, CSS automatically incorporates margin adjustments

Here is the code I am working with: <html> <head> <style> body { margin: auto; width: 720px; } </style> </head> <body> <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ip ...

htmlcss

How to alter the color of a Twitter bootstrap progress bar

Recently, I have been exploring Twitter bootstrap and encountered an issue while trying to customize the progress bar. Despite my efforts, I am unable to display the progress bar on the screen. Here is the code snippet that I have been working with. Despi ...

htmlcsstwitter-bootstrap

Changing the class of an element in Svelte: A step-by-step guide

I am working on a svelte application and I want to implement row highlighting when a user clicks on it. Here is an example code snippet that demonstrates this functionality: <div id="A" class="car-even">A</div> <div id=&q ...

csssvelte