How can Scss variables be utilized across various styles?

Recently, I've been diving into SCSS and have been experimenting with applying styles using variables.

I've come across a situation where I want certain variables to contain multiple style properties, such as those related to fonts.

For instance, I'd like all 12px font sizes to be displayed in red.

To achieve this, I tried declaring a variable like this:

$font-12: (font-size: 12x, color: red)

However, it seems that I can't directly apply this variable like regular ones due to the inclusion of multiple styles. I'm curious if this is the correct approach for defining such variables and how they should be applied.

If not, what is the proper way to implement related styles using SCSS?

Appreciate any guidance or suggestions on this matter. Thank you!

csssass

Answer №1

One way to achieve this is by using mixins in your code.

@mixin font-12(){
  font-size: 12px;
  color: red;
}

If you want to learn more, check out the documentation here: https://sass-lang.com/guide

Alternatively, you can accomplish the same result with plain CSS.

Simply define a utility class (a reusable CSS class):

.font-12 { 
   font-size: 12px;
   color: red;
}

Then add this class to any elements where you want this style applied, for example:

<div class="card font-12"> ..some card... </div>
<h3 class="card-title font-12"> .. some card title.. </h3>

Answer №2

I apologize, I wanted to respond to alex067's answer but my activity level on this platform is not high enough to leave a comment, so I have to reply as an answer:

Utilizing a mixin is the correct approach.

HOWEVER: I strongly caution against the alternative option suggested! While it may be technically accurate, adopting that method goes against the fundamental purpose of using CSS. It would almost bring us back to the era of using outdated font-color tags, ultimately defeating the purpose of utilizing CSS in the first place.

CSS is designed to separate content/semantics from design for various important reasons. If you opt for a pure CSS solution (without SASS), consider naming your style something like 'unimportant' or 'by-line' to maintain clarity when modifying it for different screens, high-contrast layouts, screen-reader compatibility, etc.

[With the prevalence of frameworks like Bootstrap and others, it seems that many disregard the importance of maintaining a clear, accessible structure and adhering to proper techniques; while my efforts to promote best practices may seem futile, I am compelled to advocate for them.]

Answer №3

I'm currently experimenting with this solution! I won't have a confirmation until tomorrow night, but here's a breakdown in case you want to give it a try before me:

_variables.scss file: // styling for mobile header:
$pageHeader-sectionHeader-styles: ( 'font-size': 24px, 'line-height': 32px, 'font-weight': 700, );
_styles.scss file: .header {
  font-size: map-get($pageHeader-sectionHeader-styles, 'font-size');
  font-weight: map-get($pageHeader-sectionHeader-styles, 'font-weight');
  line-height: map-get($pageHeader-sectionHeader-styles, 'line-height');
}

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

The mdb navigation bar seems to constantly change its height

Having an issue with the height of my mdb navbar in my Angular app. It randomly flips to a larger size when reloading the page, but returns to normal when I open the developer console in Chrome. Two screenshots show the correct display and the incorrect i ...

cssangularmdbootstrap

What is the best way to display table headers for each record on mobile devices? Is there a way to create a stacked view

I recently started working with bootstrap, specifically version 3. I am currently trying to find a way to create a layout that resembles a regular table when viewed on desktop but switches to a stacked format on mobile devices. This is the design I am aim ...

htmlcsstwitter-bootstrap-3

Implement a grid layout for columns within the profile section

Each user on my website has a profile tab that displays their submitted posts. To showcase these posts, I utilize the following code: <?php while ($ultimatemember->shortcodes->loop->have_posts()) { $ultimatemember->shortcodes->loop-> ...

phphtmlcss

Looking to shrink the image dimensions for optimal mobile display using bootstrap

In one section, I have two columns - one for an image and one for text. https://i.sstatic.net/QMLNF.png Here is the HTML code: <div class="row aboutRow"> <div class="col-lg-3 col-sm-2 col-xs-3 col-md-3 text-center"> ...

cssbootstrap-4bootstrap-5

CSS Causing Numbers to Display in the Incorrect Direction

I'm attempting to showcase numbers in a single line using CSS. It's almost perfect, except the numbers are appearing in reverse order (e.g. 4 - 3 - 2 - 1 instead of 1 - 2 - 3 - 4). I've tried utilizing "direction: ltr" without success. My C ...

htmlcss

Maintain uniform height of divs while adjusting image size without altering padding

My challenge lies in creating a layout of images in columns with consistent padding between them. The ultimate goal is to ensure that the images align at the bottom, regardless of screen size variations as depicted in this image: The problem arises when t ...

jqueryhtmlcss

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicked on?

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicking anywhere on the page? <table id="view_table" data-toggle="table" data-search="true" data-page-list="[5, 10, 20]" data- ...

javascriptjquerycssbootstrap-table

What is a practical method for achieving a double-lined border effect?

Here is what I am referring to (with two different colors): I had to create two span divs and apply a border-right on one and a border-left on the other as my solution. However, I believe there must be a more efficient way to do this with less code. HTML ...

css

How to retrieve the inline style, rather than the CSS, of the body using

Is there a way to preserve the original styling of an inline element without having additional CSS rules applied to it? I need to maintain consistency across multiple pages without making modifications to my existing CSS code. <body class="processed" s ...

javascriptjqueryhtmlcss

What are some methods for creating a tooltip or a similar quick information pop-up that appears instantly when hovered over?

I'm familiar with creating a basic tooltip by utilizing title="here's a tooltip", but I'm interested in having it appear instantly upon hovering instead of the usual delay. Is it feasible to achieve this using different tools such ...

javascripthtmlcss

Creating a dropdown menu with a variety of value attributes and corresponding display text

Currently, I am working on a language translation system that involves using the Google Translator API. To make this process smoother, I need to create a dropdown list of languages and pass their corresponding codes to the API. Initially, I attempted this ...

htmlcsstwitter-bootstrap

At the ready stance for a particular grade of students attending a class

I have created a page with a navigation menu that can be scrolled using the wheel mouse. My goal is to ensure that the li item with the 'selected' class is always positioned in the first position on the left. Is there a way to achieve this using ...

javascriptjqueryhtmlcss

When a div element overlaps with other elements, everything below it continues to be displayed on top of

I have a DIV that is displaying correctly. However, content that is supposed to be below the DIV is showing on top of it. I need help fixing this issue. I have tried the solutions provided in other similar questions but none of them have resolved my proble ...

htmlcss

Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...

javascriptcss

linked stylesheet from node_modules

As a newcomer to gulp, susy, and sass, I have been on the lookout for a solution to my current issue but unfortunately haven't found one yet. @import 'susy'; @import 'breakpoint-sass'; doesn't seem to be working, however, @ ...

npmsassgulp

Issues with tabs functionality in Bootstrap version 4.3.1, unlike the smooth operation in v4.1.0

I encountered an interesting situation recently. After spending almost 3 hours troubleshooting my code, I discovered that it functions perfectly on Bootstrap v4.1.0 but fails on the latest version, v4.3.1. Working JSFiddle with Bootstrap v4.1.0: https://j ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

What is the process for creating a sublist within an md-list-item using Angular Material?

I used Angular Material to create a md-list on the side-nav. I am looking to add a sub list under the md-list-item. Below is my code snippet: <md-sidenav id="sideNav" md-component-id="left" class="md-sidenav-left md-whiteframe-z1 md-locked-open " layo ...

cssangularjsangular-material

Creating input fields similar to the Mail app on OSX

Is there a way to create input fields similar to those in the Mail App on OSX? Take a look at this screenshot - I'm looking to group text as shown in the image above. Instead of having multiple individual input fields (e.g. like in the mail app for ...

formshtmlcssinput

Guide to positioning a div at the bottom of a Drawer while maintaining the same width as the Drawer in React Material UI

Creating a Drawer on the right-hand side using <Drawer/>, I am trying to make a <div> stick to the bottom of the <Drawer />. The width of this <div> should match the width of the <Drawer />. Desired Outcome: https://i.sstati ...

htmlcssreactjsmaterial-ui

The presence of text is leading to CSS placement troubles

I operate a website dedicated to comic content and am looking to incorporate text (retrieved from the database field "description") beneath each comic thumbnail. Here are my two inquiries: 1) I'm facing an issue where adding text below a comic caus ...

phpcss