css function - Brave Search

How to write function in css

stackoverflow.com › questions › 7725805 › how-to-write-function-in-css

How to write function in css? I know that possible with SCSS; Is their any way with which i can achieve this in css?

The answer is No.

CSS is not a programming language. It does not have functions. It really isn't designed to be used this way at all.

Whatever problem it is that you're trying to solve by wanting to write CSS functions, there is almost certainly a better way to achieve it.

Answer from Spudley on Stack Overflow

w3schools.com › cssref › css_functions.php

CSS Functions Reference

accent-color align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size block-size border border-block border-block-color border-block-end border-block-end-color border-block-

developer.mozilla.org › en-US › docs › Web › CSS › Reference › Values › Functions

CSS value functions - CSS | MDN

January 20, 2026 - CSS value functions are statements that invoke special data processing or calculations to return a CSS value for a CSS property. CSS value functions represent more complex data types and they may take some input arguments to calculate the return value.

Videos

First look at FUNCTIONS in CSS!!! (it's a game changer) - YouTube

The CSS "function" proposal is WILD (I think I like it?) - YouTube

February 16, 2025

I Love the NEW CSS Functions - YouTube

December 30, 2025

20 Modern CSS Features You Should Know About - YouTube

CSS Custom Functions with @function - YouTube

August 13, 2025

CSS Functions Explained - #2 var - YouTube

October 19, 2022

stackoverflow.com › questions › 7725805 › how-to-write-function-in-css

sass - How to write function in css - Stack Overflow

How to write function in css? I know that possible with SCSS; Is their any way with which i can achieve this in css?

The answer is No.

CSS is not a programming language. It does not have functions. It really isn't designed to be used this way at all.

Whatever problem it is that you're trying to solve by wanting to write CSS functions, there is almost certainly a better way to achieve it.

You can't in standard CSS, you might want to look at http://lesscss.org/ though

css-tricks.com › functions-in-css

Functions in CSS?! | CSS-Tricks

March 3, 2025 - I was drinking coffee when I read the news on Chrome prototyping functions in CSS and… I didn’t spit it or anything. I was excited, but thought “functions” in CSS would be just like mixins in Sass — you know, patterns for establishing reusable patterns.

developer.mozilla.org › en-US › docs › Web › CSS › Reference › At-rules › @function

@function - CSS | MDN

January 6, 2026 - The @function CSS at-rule enables defining CSS custom functions. Once defined, a custom function can be called using the syntax (for example, --my-function(30px, 3)) within any property value.

Easing Functions Cheat Sheet

This page helps you choose the right easing function. ... In CSS, the transition and animation properties allow you to specify an easing function.

w3.org › TR › css-mixins-1

CSS Functions and Mixins Module

May 15, 2025 - This module defines the ability for authors to define custom functions, acting similar to parametrized custom properties. They can use the full power of CSS’s values and conditional rules. It also defines an early form of a similar idea for CSS rule mixins, allowing parametrized substitution ...

Find elsewhere

Google Bing Mojeek

geeksforgeeks.org › css › css-functions-complete-reference

CSS Functions Complete Reference - GeeksforGeeks

July 12, 2025 - CSS functions are used to dynamically define or manipulate property values in stylesheets, making designs more flexible and responsive.

The Knowledge Academy

theknowledgeacademy.com › blog › css-functions

CSS Functions: Enhance Your Styling Capabilities

September 9, 2025 - With these functions, developers can precisely control colours and create gradients, shadows, and other effects. CSS offers functions like ‘linear-gradient()’ and ‘radial-gradient()’ to create smooth transitions between two or more colours. Gradients add depth and richness to backgrounds and elements.

una.im › 5-css-functions

una.im | 5 Useful CSS functions using the new @function rule

August 13, 2025 - This capability is an absolute game-changer for writing more organized and dynamic CSS. While custom properties let you store a dynamic value that you access with var(), a custom function can run logic. It accepts arguments you pass to it, and spits out a new value.

freecodecamp.org › news › css-functions-for-beginners

CSS Functions – How to Use calc(), max(), min(), and clamp()

May 18, 2022 - There will come a time when you want to get a value by combining two or more different units. CSS has a function that you can use to make such calculations – calc().

medium.com › @arnoldgunter › functions-in-css-what-25dff5bf0f8a

Functions in CSS Are Coming — And They’ll Change the Way You Code | by Arnold Gunter | Medium

March 12, 2025 - Not terrible, but wouldn’t it be nice to just say “Hey CSS, give me a dashed border” and be done with it? Enter @function.

stackoverflow.com › questions › 4914533 › do-css-functions-exist

Do CSS functions exist? - Stack Overflow

I know I'm late to the party but the selected answer IS NOT the right answer since it's deferring it to CSS preprocessors.

To answer the specific question "Do CSS functions exist?", the answer is: Yes.

However, CSS functions work completely different than the OP's concept initially is.

cuixiping's answer seems the most correct answer.

Examples of CSS functions are:

url()
attr()
calc()
rotate()
scale()
linear-gradient()
sepia()
grayscale()
translate()

A detailed, comprehensive list can be found here:

CSS functions on MDN Updated link 18/9/20

You can't programatically control CSS from your markup, but you can use one of the many CSS extensions to make CSS work more like a compiled language.

http://lesscss.org/

http://sass-lang.com/

If we wrote your example in LESS, we'd get something like this:

.somepattern(@color: red, @size: 16px) {
    font-size:@size;
    font-weight:bold;
    border:2px solid @color;
}

And then you could use it in your LESS file like so:

.myclass {
    .somepattern(green, 20px);
}

The Odin Project

theodinproject.com › lessons › node-path-intermediate-html-and-css-css-functions

CSS Functions | The Odin Project

Similar to programming languages, functions in CSS are reusable pieces of code which perform specific tasks. Functions are passed “arguments” between parentheses, each of which is used by the function in a specific way.

dev.to › ziizium › a-closer-look-at-css-functions-5bbn

A closer look at CSS functions - DEV Community

November 23, 2020 - Unlike JavaScript (or other languages) where you can define some function(s) (as shown above) before you can call them, CSS functions definition are written by browser vendors, you just need to call the function with the appropriate property and then pass the necessary arguments.

api.jquery.com › css

.css() | jQuery API Documentation

A CSS property name. ... A function returning the value to set. this is the current element.

css-tricks.com › complete-guide-to-css-functions

CSS Functions Guide | CSS-Tricks

August 21, 2025 - This function takes two arguments and calculates a result from the operator (+, -, *, /) you supply it, provided those arguments are numbers with or without an accompanying unit. Unlike CSS preprocessors such as Sass, calc() can mix units, meaning you can do things like subtract 6rem from 100%. calc() is also updated on the fly, so if that 100% represents a width, it’ll still work if that width changes.

bram.us › 2025 › 02 › 18 › css-at-function-and-css-if

CSS @function + CSS if() = 🤯

February 18, 2025 - In https://brm.us/css-custom-functions I took a first look at Chrome’s prototype of Custom Functions (CSS @function). Since then the prototype in Chrome got updated with nested container queries support and CSS if() also got added …

medium.com › css-magic › custom-css-functions-the-next-big-leap-in-styling-5acbd69f5526

Custom CSS Functions: The Next Big Leap in Styling? | by Ferid Brković | CSS Magic | Medium

February 18, 2025 - Currently in development and being prototyped in Chrome, Custom CSS Functions allow developers to define their own CSS functions — similar to JavaScript functions.

w3schools.com › css › css3_variables.asp

CSS Variables - The var() function

Static/Relative Position Fixed/Absolute Position Sticky Position Code Challenge CSS Position Offsets ... The var() Function Overriding Variables Variables and JavaScript Variables in MQ Code Challenge CSS @property