Functions in css vs sass

Let's talk about functions in css vs sass. Sometimes we developers tend to confuse with css function when we use any css preprocessors. For example, I used to confuse a lot with calc() function whether it's a function in css or in sass. Apparently, it's a native css function. So here is a list of functions classified into css and sass.

Selector functions in css

• nth-child()
• nth-last-child()
• nth-of-type()
• nth-last-of-type()

Color functions in css

• rgb()?and?rgba()
• hsl()?and?hsla()

Animation functions in css

• cubic-bezier()
• path()
• steps()

Scaling and transform functions in css

• rotate()
• skew()
• scale()
• translate()
• perspective()

Filter functions in css

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

Grid functions in CSS

• minmax()
• repeat()
• fit-content()

Gradient functions in CSS

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• conic-gradient()

Color functions in sass

• darken() and lighten()
• saturate() and desaturate()
• adjust-hue()
• tint() and shade()
• mix()
• hsl() and hsla()
• grayscale()
• complement()
• invert()
• opacify() and transparentize()
• fade-in() and fade-out()
• alpha() and opacity()
• change-color(), adjust-color() and scale-color()

Numeric functions in sass

• percentage()
• round()
• ceil()
• floor()
• abs()
• min()
• max()
• random()
• random($limit)

Introspection functions in sass

• call()
• content-exists()
• feature-exists()
• function-exists()
• get-function()
• global-variable-exists()
• inspect()
• mixin-exists()
• type-of()
• variable-exists()