Can we dynamically generate CSS classes when defining them in HTML5?

Is there a possibility to assign a value for a specific attribute when defining a class in a way such as this:

<div class='padding-l-10'>
  ----------------*code here*-------------------
</div>

.padding-l-X {
    padding-left: X;
}

Therefore, would it be feasible for "it compiles" into my sass or css like:

.padding-l-10 {
    padding-left: 10;
}

I am aware that this can be achieved using jquery or similar, but is there a direct method with css and html?

Answer №1

Sorry, but the SASS you're using compiles into basic CSS without being able to understand the underlying HTML structure. Therefore, achieving this task is not feasible.

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

Dynamically showcasing content in an HTML table

Having trouble with this code snippet. It's supposed to iterate through array objects and display them in an HTML table. The third row should have buttons, but nothing is showing up. Can you spot the issue? Here's the HTML code: <html> & ...

An unsolicited border encompassing an image that does not resemble a CSS border or outline within the realm of Bootstrap 4

Utilizing Bootstrap4 Cards with .PNG image sources has resulted in an unexpected border appearing. It's not a border or outline issue. https://i.sstatic.net/KHgnP.png Here is the HTML <div class="row"> <div class="col-md-3"> <d ...

Interactive pop-up window featuring a top section, main content, and bottom section

I have a situation where I've created a modal with sticky headers and footers, and the middle section scrolls based on the content. Everything looks great on Desktop, but when viewed on mobile or tablet devices, the footer is stretched and not fully ...

Guide to making a dynamic clip mask with flowing trails on a digital canvas

I have successfully coded a dynamic path with trails similar to the one shown on However, when I try to replace ctx.fill() with ctx.clip(), nothing appears on the canvas. Here is the JavaScript code snippet I'm using – for the full code, visit http ...

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

I would greatly appreciate any assistance with this request, please. Here is the input that I have: <input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-contro ...

Enhance the look of your application by customizing the caret color in JavaFX with

I'm looking to customize the caret color for all JavaFX text inputs (such as TextField, TextArea, ComboBox:editable, DatePicker, etc.). I came across a solution on Stackoverflow: How to change the caret color in JavaFX 2.0? There's also an examp ...

Is there a CSS3-compatible CSS parser available in C/C++?

Are there any C/C++ CSS parsers that currently support CSS3? I have come across a few, but none of them seem to offer full CSS3 compatibility. ...

implementing jquery typewriter plug-in for a responsive bootstrap image

I am using Bootstrap and my image response dynamically, but I am having trouble adding text to it. I would like to use a jQuery typewriter plugin for the text on the image, which should resize according to screen size. Here is my HTML code and I have used ...

Is there a way to efficiently pull specific time-related data from XML API forecasts using PHP and present them in HTML tables?

Currently, I'm facing a bit of confusion on how to obtain a forecast for the upcoming 5 days of a specific city using OpenWeather's forecast api. The challenge lies in the fact that the forecasts are provided in 3-hour intervals, but I only requi ...

"Modifying the form-control-lg class in Bootstrap and AngularJS affects input size exclusively, leaving the label unaffected

Currently, I am focusing on enhancing an AngularJS custom text input component: <div class="form-group has-feedback" ng-class="[$ctrl.sizeClass, {'has-error': $ctrl.isNotValid(), 'has-success': $ctrl.isValid()}]" > ...

At what point can we rely on the accuracy and timeliness of Element.getBoundingClientRect?

I am currently in the process of developing some code that utilizes Element.getBoundingClientRect (gBCR), combined with inline style updates, to carry out calculations. This particular project is not intended for a general website, so I am not interested i ...

Locate the data attribute and store it in the database using an ajax request

I am in need of a proper script to insert a data attribute into the database upon clicking using ajax. HTML: <li><a data-cat="random name">Button</a></li> jQuery: $('li a').click(function() { $(this).data('cat&a ...

Problem with applying ng-class directive in AngularJS

I am currently developing an application using AngularJs and Bootstrap. My goal is to display the title of a 'scenario' with different styling based on its status, along with a specific icon. Initially, I attempted the following approach: <s ...

Maintain the original URL when accessing resources on a proxied webpage

My goal is to host a site named site1 within an existing domain, specifically www.gateway.com. For example, instead of accessing www.site1.com/profile, I want it to be accessible at www.gateway.com/site1/profile. To achieve this setup, I am using an NGIN ...

How to display an [object HTMLElement] using Angular

Imagine you have a dynamically created variable in HTML and you want to print it out with the new HTML syntax. However, you are unsure of how to do so. If you tried printing the variable directly in the HTML, it would simply display as text. This is the ...

What is the process for displaying a list of all files within a folder?

I'm currently working on a project where I have a 'products' directory located in the same folder as my index.html file. My goal is to develop a script that can tally all the jpg files within the 'products' folder and then generate ...

Dynamic text display using Bootstrap 3

My current struggle involves the implementation of Bootstrap's collapse class in my project. I am attempting to connect buttons with text located in a separate div in order to properly collapse and display it. While I can easily achieve this in a str ...

Adding color between lines in Three.js

I have two different sets of vertices. One set contains real vertices, and the other set contains the same vertices but with a y value of zero. I am trying to connect these vertices and fill them in but have not been successful so far. I have attempted to ...

Timeout for browser response

Currently working on Perl CGI scripting within HTML, my script utilizes send expect and print statements. To prevent the browser from displaying the send expect results, I included $exp->log_user(0). When running the script in the browser, only the prin ...

Adjust the background color of the body content to reflect changing content

How can I change the background color to #97EFFC when a menu item is selected? I want the body content background to be transparent until a menu item is displayed. Site.css /* Responsive: Portrait tablets and up */ @media screen and (min-width: 768px) { ...