#newcss - Sigmoid Social

Recent searches

Search options

Only available when logged in.

0 posts0 participants0 posts today

Gardiner Bryant @gardiner_bryant@mastodon.online

I couldn't be more excited about the new attr() syntax in CSS! Check out my latest blog post all about this! #css #syntax #newcss #webdev #uidesign #webdesign

https://blog.gardinerbryant.com/the-new-css-attr-function/

The Bryant Blog · 3dThe new CSS attr() functionI'm a web developer by trade and I'm extremely passionate about CSS. The last few years have been truly exciting and I can't wait to share the new attr() function syntax with you!

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

Drag & drop to upload