> The interplay between Sass variables and CSS custom properties should be a strategic partnership. Over nearly a decade of evolving web practices, one truth persists: robust systems balance rigidity with adaptability. Sass anchors the immutable, CSS custom properties breathe life into any required fluidity.

#CSS #Sass #customProperties

️ https://nicolas-hoizey.com/links/2025/04/08/css-custom-properties-vs-sass-variables-a-pragmatic-guide/

Screenshot of CSS Custom Properties vs. Sass Variables: A Pragmatic Guide

**Stu Robson** @sturobson@front-end.social · 1d

Stu Robson @sturobson@front-end.social

new article alert

CSS Custom Properties vs. Sass Variables: A Pragmatic Guide

wherein I finish off a ~6 year old draft writing down where and when I use either/or/both options in a modern front-end architecture.

https://www.alwaystwisted.com/articles/css-vs-sass

#CSS #Sass #FrontEnd

**Ana Tudor** @anatudor@mastodon.social · 3d

Ana Tudor @anatudor@mastodon.social

Saw a @codepen demo using... a lot! of elements (screen 1) and quite a bit of #CSS to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): https://codepen.io/thebabydino/pen/PwoLJLR

Screenshot with DevTools open, showing each loader being created with a div with 4 other nested div elements, 2 span elements, 2 i elements and 2 pseudos inside.

Screenshot with DevTools open, showing each loader being created with only 1 div and its 2 pseudos.

#cssMask #cssGradient #conicGradient

**Steffo** @steffo@a.junimo.party · Mar 25

Mar 25

Steffo @steffo@a.junimo.party

Apparently SCSS variables can't be used to declare CSS variables?

This doesn't work:

--width: $sWidth;

#CSS #Sass #SCSS

Continued thread

**Mx Verda** @MxVerda@lgbtqia.space · Mar 25 *

Mar 25 *

Mx Verda @MxVerda@lgbtqia.space

"Enter the code displayed in the authenticator app on your mobile device," prompts the authenticator app on my mobile device.

#microsoft #microsoft365 #office365

**K.O. Munley** @Caymon@mstdn.social · Mar 24

Mar 24

K.O. Munley @Caymon@mstdn.social

I've been planning to spin up a small personal website. I knew I didn't need a full-blown CMS for this and, since I have so much experience using Bootstrap through my day job, decided to use it to build a site from scratch. It's been a while since I created a site from scratch—most of my experience lately involves taking on existing Enterprise sites and caretaking from there—but I was looking forward to both the challenge and the freedom of building my own.

#Bootstrap #Sass #LifelongLearning

Continued thread

**bram dingelstad** @bram@gamedev.lgbt · Mar 18

Mar 18

bram dingelstad @bram@gamedev.lgbt

the website was made with #Zola (https://getzola.org), with some #Tera templates and #Sass

i wrote this theme from scratch! i really like incorporating the #RosePine color scheme while keeping it responsive for most devices i've tested.

additionally, i also contributed to the Zola project for a "hidden" page feature because i used such a feature in the past. the contribution was made easy by the fact that it's written in #RustLang

getzola.orgZolaEverything you need to make a static site engine in one binary.

**Bertrand Kaernel** @BKaernel@piaille.fr · Mar 16

Mar 16

Bertrand Kaernel @BKaernel@piaille.fr

Comment faire une animation @KeyFrames avec #sass et des boucles @each contenant plusieurs valeurs ( pourcentage, couleur, position par exemple) ??? Voila le #code

https://codepen.io/BKaernel/pen/wBvpZBW

codepen.ioKeyframes with @each arrays...

Replied in thread

**stateful being** @unspeaker@mastodon.social · Mar 13 *

Mar 13 *

stateful being @unspeaker@mastodon.social

@redscroll

consider #sass - a preprocessor for #css, and the most overwrought one in comparison with its competitors #less and especially #stylus. but it "won"

last i heard, the dominant implementation of sass was a c++ module for nodejs, and nobody has even mentioned less/stylus for a long time.

though i'm sure they remain some lowkey frontend ninjas' secret weapons (secret by virtue of not knowing to look for them, lol)

@mcc

**Ana Tudor** @anatudor@mastodon.social · Mar 11

Mar 11

Ana Tudor @anatudor@mastodon.social

Because someone just hearted a 5 year old @codepen demo https://codepen.io/thebabydino/pen/GRooBJm?editors=0100 I made using a #Sass function + looping to generate a #CSS : we don't need *any* Sass for this anymore!

We can now do it with

background:
linear-gradient(in hsl longer hue 90deg,
hsl(0, 95%, 65%) 0 0)

Comparative look at the old Sass code vs. the new and much simpler plain CSS code, both producing the same result (a nice-looking rainbow) shown before both of them.

Old SCSS solution:

```
@function get-rainbow($n: 12, $sat: 90%, $lum: 65%) {
$unit: 360/$n;
$s-list: ();

@for $i from 0 through $n { $s-list: $s-list, hsl($i*$unit, $sat, $lum) }

@return $s-list
}

html { background: linear-gradient(90deg, get-rainbow()) }
```

New plan CSS solution:

```
html {
background:
linear-gradient(in hsl longer hue 90deg, hsl(0, 95%, 65%) 0 0)
}
```

#SCSS #loop #looping

**Inautilo** @inautilo@mastodon.social · Mar 10

Mar 10

Inautilo @inautilo@mastodon.social

#Development #Guides
CSS relative colors · A new way to generate colors dynamically https://ilo.im/162q4h

_____
#Colors #ColorSpace #ColorFormat #Themes #Browser #WebDev #Frontend #CSS #Sass

**Inautilo** @inautilo@mastodon.social · Mar 10

Mar 10

Inautilo @inautilo@mastodon.social

#Development #Guides
CSS relative colors · A new way to generate colors dynamically https://ilo.im/162q4h

_____
#Colors #ColorSpace #ColorFormat #Themes #Browser #WebDev #Frontend #CSS #Sass

ilo.imCSS Relative Colors

More from

Ahmad Shadeed

**Ça Suffit.** @Zuzu1er@mastodon.social · Mar 3

Mar 3

Ça Suffit. @Zuzu1er@mastodon.social

Everyday I try to get to that level
#humour #disney #hercule #sass

**Marc** @Just_me@rollenspiel.social · Mar 3

Mar 3

Marc @Just_me@rollenspiel.social

#boycottusa
- #Discord accounts deleted, deinstalled.
- #amazon including all of their setvices? Go f*** yourself
- #microsoft? 1st laptop runs under Linux successfully. Bye bye
- #microsoft #office? #libreoffice installed on the last computer running on US-BS
- tons of other €Software or #sass running on or depending on #usa services killed finally
- #backerkit, #gofoundme etc. Bye bye
- now addressing all #Whatsapp contacts how to reach me in the future
# looking for a #paypal alternative...