Create a new variable and compile the sass/less file when it is requested

Question

Create a new variable and compile the sass/less file when it is requested

I'm exploring options to utilize Node.js or another server-side language to handle a specific type of request. For instance, receiving a request like this:

The goal is to extract the value from the URL parameter and use it to dynamically update a variable in a SASS/LESS file. This updated file would then be compiled into a CSS file and returned as a response to the original request.

javascript css ajax sass less

Answer 1

Answer №1

For those working with Node.js, you have the option to implement a similar solution by ensuring that you have installed the necessary NPM packages: express and less.

const express = require('express');
const less = require('less');
const app = express();

app.get('/generateCSS/:number', function(req, res){
  less.render('.class { width: ' + req.params.number  + 'px; }', function (e, css) {
    res.send(css);
  });
});

app.listen(3000);

This script is a basic implementation (without error handling or input validation) which will process requests made to

http://localhost:3000/generateCSS/:number

and display the specified number within your LESS code.

# curl http://localhost:3000/generateCSS/6
.class {
  width: 6px;
}

You have the flexibility to utilize these parameters in any manner within your LESS templates as needed.

Answer 2

For those working with Node.js, you have the option to implement a similar solution by ensuring that you have installed the necessary NPM packages: express and less.

const express = require('express');
const less = require('less');
const app = express();

app.get('/generateCSS/:number', function(req, res){
  less.render('.class { width: ' + req.params.number  + 'px; }', function (e, css) {
    res.send(css);
  });
});

app.listen(3000);

This script is a basic implementation (without error handling or input validation) which will process requests made to

http://localhost:3000/generateCSS/:number

and display the specified number within your LESS code.

# curl http://localhost:3000/generateCSS/6
.class {
  width: 6px;
}

You have the flexibility to utilize these parameters in any manner within your LESS templates as needed.

Create a new variable and compile the sass/less file when it is requested

Answer №1

Similar questions

How to send props from a Vue.js component tag in an HTML file

The overflow:hidden property prevents me from being able to scroll down the rest of my webpage

Caution: React alert for utilizing the UNSAFE_componentWillReceiveProps in strict mode

Using PHP to send multiple data through ajax

Broadcast a public message with the sender specified using Socket.io

What advantages does including @charset "ISO-8859-15"; at the top of a CSS file provide?

Experience the magic of Materialize CSS SideNav

Encountering the error message ".ajax is not a function" when trying to submit a single input using jQuery and Ajax

TypeORM's Polymorphic Relationship fails to retrieve data from the parent entity

Rotating an object around another object in a 3D matrix axis using Three.js

The specialized element encountered an issue with mapping

Position two div elements side by side

When using Firefox to scale down a div with CSS `moz-transform`, the border details are unfortunately not retained

Error encountered while attempting to generate migration in TypeORM entity

What is the process for getting non-event javascript instructions to function properly once a DOM element has been added

JavaScript code to remove everything in a string after the last occurrence of a certain

Deleting query strings from the URL - HashRouter

What is the most efficient method for encoding and decoding extensive volumes of data for a JavaScript user?

Using ASCII 3D text can create a stunning visual effect on a website, but it can sometimes appear

Leveraging node.js for website development