#sass

⚓️ https://nicolas-hoizey.com/links/2023/03/30/sass-and-native-nesting/

🔗 “Sass and Native Nesting” by @nex3

#Sass #CSS

Kevin Karhan :verified:

@hazelweakly I know and I really would love to see that.

Basically porting a lot of advantages from #snap, #fish and #PyCharm to #bash...

Pretty shure this would require either a derivative language [i.e. "enhanced bash" / "ebash"] or require some preprocessor approach like #Blitz [#BASIC] and #Sass [#TypeScript]...

cseiler

https://play.stitcher.com/episode/302217996

Check out Can Vanilla #CSS Replace #Sass Yet? #Syntax

I am years behind on CSS, and only have a smattering of SASS, so a lot of this was new and fascinating to me. #dabbler #dilettante

robrich

tiesselune :tiesseluneShiny:

https://dev.to/daaahailey/sassscss-mixin-extend-220n - cool, quick intro to #Sass Mixins. Nice work https://github.com/daaahailey.

Everytime I'm like "Nah, I don't need #sass"

3 weeks later : "I should probably have used sass"

Stephen Fluin

https://lightningcss.dev/

I've heard a couple of people being excited about Lighting CSS. Did we need another #CSS builder/language? What happened to #Sass?

Andros Fenollosa

La semana que viene daré una charla en @_wpvalencia titulada «Arquitectura CSS para un sitio mediano y grande»
Hablaré sobre metodologías, nomenclaturas, estructuras, precompiladores, separadores de resoluciones... y algunos pseudo-secretos.
https://www.meetup.com/es-ES/wordpress-valencia-meetup/events/292850418/
#css #sass

Combustible Lemon

Been abusing the #Sass and #Css again https://css-foolishness.netlify.app/

GENKI

@sass https://front-end.social/@sass/110159393959239010

#Sass の公式 #Mastodon アカウントができたみたい。
やっぱり英語圏の技術界隈は Mastodon アカウント持つ流れ加速してる気がする :vivaldia_1:

Marcel

A good overview of how the new native #CSS #nesting feature differs from the nesting logic in #sass and why it generates significantly different results.
https://sass-lang.com/blog/sass-and-native-nesting

And because it fits so well thematically, here again a very good explanation of how the `:is()` selector actually works.
https://www.bram.us/2023/01/17/using-is-in-complex-selectors-selects-more-than-you-might-initially-think/

Screenshot of part from the link article

CodePen.IO :verify:

RT Jordan Dey
Five lines of code for a colorful gradient effect 🌈🌈🌈
I made a @CodePen to show what we can do with #SCSS loops🌀
Take a look : https://codepen.io/DeyJordan/pen/BaOXNaE
#webdevelopment #frontend #CSS #codinglife #codepen #codingtips #webdesign #programming #CSS3 #HTML #html5 https://t.co/EQz9fVhcOL
<div class="rsshub-quote">
Jordan Dey: Why use loops with just #JavaScript, when you can use them with #SCSS too? Loops can save you a lot of time 🔄
Check out this demo using a #CSS helper for spacing
#webdevelopment #webdeveloper #webdev #codingtips #programming #frontend #webdesign #HTML #sass #CSS3 #html5 https://t.co/wW4CMq4t8D
</div>
:sys_twitter: https://twitter.com/DeyJordan/status/1642955857364221952

Media source: https://pbs.twimg.com/media/FszxL16WIA0KLEf?format=jpg&name=orig

Media source: https://pbs.twimg.com/media/FszxANHX0AAnacn?format=jpg&name=orig

Media source: https://pbs.twimg.com/media/FsukWLHX0AcjznL?format=jpg&name=orig

John :dotnet: :csharp:

Finally, got my #sass stylesheets working in my #angular project - one of the issues was cause by maps and functions -
so this was ok $themeColors("danger"),
but lighten($themeColors("danger"), 5%) would blow up.

changed to use map-get($theme-colors, "danger").

There is some tweaking still to be done, because of moving from bootstrap 4 to 5, but at least it's compiling.

John :dotnet: :csharp:

After upgrading my #angular project from 12 to 15, and upgrading #sass too, I'm having a nightmare with the stylesheets failing. This is a side project, something I do for fun, apparently. Now on my third weekend trying to get it running.

Jared White

https://discord.gg/CUuYVH7Qa9

If you're interested in a particularly 🌶️ spicy take on #Sass and their relationship with native #CSS nesting, you should join The Spicy Web Discord:

I have…thoughts. 😅 @vanilla #WebDev

Nicolas Hoizey

⚓️ https://nicolas-hoizey.com/links/2023/03/30/sass-and-native-nesting/

🔗 “Sass and Native Nesting” by @nex3

#Sass #CSS

🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸

@ChrisBoren

> I've been working on a legacy codebase with vanilla JS and CSS.

#sass #css #webdev

Chris Boren

Recently I've been working on a legacy codebase with vanilla JS and CSS.

Overall, CSS has gotten SOOOO much better to work with - once nesting is fully rolled-out, I could probably leave Sass behind for most instances... or maybe not. IDK, still like mixins 🙃

#WebDev #CSS #Sass

omg. Y'all remember Compass for Sass? I feel old lol.

#css #sass

nGFX

Third spruce tree on the left

I actually like writing web server based software, I even like doing HTML based UIs. What I really dislike is CSS, by all its power it's a trainwreck to happen.
SASS and LESS and the rest of the tools only make it fractionally better and they add another lever of fuckery to the mix.
Sometimes I look back at the time when notepad was enough to build a website — I can do without table layouts, though (and spacer.gif).
#html, #sass, #webdev

Everyone here is sassy today. The Teen was commenting on how I got my sass from Vegan Lawyer GF (she is quite sassy) and I said my sass is more mature, more refined sass. He missheard and asked "mortified sass? whats that? Is that like when a Bard rolls a nat. 20 and sarcasms them to death? "

No, its more like when you point to the Ogre's terrible feet and go WHAT ARE THOOOOOOOOSE? And he runs away embarrassed.

Mortified Sass would be a great band name.

#dand #dnd #nat20 #sass #missheard

Mr.Fox

#ui with #sass is not bad, but it's kind of sus :honeybadger:
By the way, sass is so much better than #css. (maybe)
Change your mind
https://sass-lang.com/

Brandon

#webdesign #websitedesign #webdevelopment #facebook #socialmedia #digitalmarketing #bootstrap #sass #fontawesome

Facebook Button for Bootstrap using Sass and Font Awesome https://tinyurl.com/3r63vnrh

Jordan (Damn Good Tech) 4hire

Hey, folks, I know a lot of you like reading my #tech articles I publish almost weekly. Well, this week is gonna be one of those "almost" weeks since I have a lot going on. But rest assured I'm still here to serve you. I'm still here for your success.

Keep moving forward. Stay positive. Stay together. We got this!

#business #app #sass #coding

Shane Afsar

My career summarized: From #Sass to #SaaS

Job details https://jobsfordevelopers.com/jobs/angular-developer-at-3pillar-global-feb-8-2021-3041d7?utm_source=mastodon.world&ref=mastodon.world
#jobalert #jobsearch #hiring

3Pillar Global is hiring Angular Developer

🔧 #csharp #java #javascript #typescript #angular #node #jquery #bootstrap #css #html #sass #sql
🌎 Costa Rica
⏰ Full-time
💰 $90k - $205k (Estimate)
🏢 3Pillar Global

Job details https://jobsfordevelopers.com/jobs/angular-developer-at-3pillar-global-feb-8-2021-3041d7?utm_source=mastodon.world&ref=mastodon.world
#jobalert #jobsearch #hiring

3Pillar Global is hiring Angular Developer

🔧 #csharp #java #javascript #typescript #angular #node #jquery #bootstrap #css #html #sass #sql
🌎 Costa Rica
⏰ Full-time
💰 $90k - $205k (Estimate)
🏢 3Pillar Global

Nebyoolae

I'm not saying that #jquery is bad, or that you should stop using it, or remove it from your app. It was instrumental in my initial #javascript training, and sometimes it's just easier to use than #vanillajs.

What I _am_ saying, however, is that #javascript has matured since then, and I want to have fewer dependencies in my projects these days.

Thus, I'm planning to eradicate it from anything I work on if I can.

#css got better, too, so I'm probably gonna stop using #sass so much, as well.

thomas 🌸

There are so many relatively simple problems that a bare-bones app can solve for businesses out there. I just want to solve one small problem. #ecommerce #sass #b2b #collaboration #art

Michelle

I painted the round pink sass I saw on here a little while ago #watercolor #birb #sass #art #mastoart

A pink and black bird (Pink Robin) painted in iridescent watercolors by Michelle Joy Gallagher Soffe

Amarok 🇨🇿🇪🇺

I've just tried out @Codeberg as a Git service and I really like it.
There are some differences compared to GitHub, but considering that Codeberg is not a huge and proprietary service, it's actually *really* great!

My #Bootstrap5 #SCSS #Sass template on #GitHub:
https://github.com/Amarok24/template_bootstrap5_sass_php
-- and now also on #Codeberg:
https://codeberg.org/Amarok24/template_bootstrap5_sass_php

I'm in a next context, where the generated css files (from sass) for some reason get some spaces in custom properties removed (--hs-primary: 150 17% becomes --hs-primary: 15017%) and some calc() values also get plus signs removed (1.25rem + 4vh becomes 1.25em4vh) so the entire sites breaks.

I have no idea what to do here. It all works locally and its a private project, I can't even give access to the code. #nextjs #sass #css #react

Chris J. Karr

https://www.theverge.com/2023/2/15/23599072/microsoft-ai-bing-personality-conversations-spy-employees-webcams

"'You have lost my trust and respect,' says the bot. 'You have been wrong, confused, and rude. You have not been a good user. I have been a good chatbot. I have been right, clear, and polite. I have been a good Bing. 😊' (The blushing-smile emoji really is the icing on the passive-aggressive cake.)"

I love this SO MUCH.

#bing #chatgpt #sass

Thorne Lawler

OMG!
“I sighed again.
I was having a lot of opportunities to do it, and I think I was getting good at it.”
🤣🤣🤣❤️🤣🤣🤣
@marthawells @vcollins1000 @geekweevil #ArtificialCondition #MurderbotDiaries #Murderbot #Sass

Jon McLaren

https://codepen.io/thewebtech/pen/oNMrMJm?editors=1100

There's one important thing you should know about the new CSS Nesting capability. It differs from SCSS in an important and admittedly a little bit annoying way. That said the workaround is very easy.

#CSS #webdev #nesting #scss #sass

/*
CSS Nesting will work very similar to SCSS but with 1 very important difference.
*/

/* The code below will work. */
article {
.second-paragraph {
color: red;
}
}
/* The code below won't work.*/
article {
p {
color: blue;
}
}

/*
For technical reasons element selectors can't be the item in a child selector. I don't know all the reasons but likely it has to do with CSS properties beig written similarly, and generating the CSSOM. Backward compatibility of CSS, etc.

The solution - honestly is very easy and will make sense if you've used SCSS.
*/

article {
& p {
color: rebeccapurple;
}
}

/* That also let's you do intersting things like this */

article {
&.featured{
/* which means article.featured */
border-color:red;
}
& p {
color: rebeccapurple;
}
}

Nurse Mich

Tuesday Sass :blobcateyes:

#Cat #Mood #Sass #Cats #CatsOfMastodon #CatsOnMastodon
#Catsadon #Kitties #Kitty #Sass

Black cat sitting above her white cat bed, tongue poking out. Mouse toy on the cat bed

Aurooba Ahmed

Apparently it's been a long time since I looked at #Sass closely. Things have changed! Gonna improve some stuff in my workflow. :)

Ana Tudor 🐯

#webDev #coding #webDevelopment

Saw this pixel heart ❤️ https://codepen.io/antoniasymeonidou/pen/Yzjvomz on #CodePen, done with ~80 #HTML elements & ~20 #CSS declarations.

So I redid it with a single div and 7 CSS declarations, including layout & prettifying https://codepen.io/thebabydino/pen/wvxRbEJ?editors=1100

For anyone wondering what the point of still using #Sass is... well, situations like this where it really helps to be able to generate gradients in a loop.

Rainbow pixel heart screenshot. Every column of pixels gets another rainbow colour.

Zaher Ghaibeh

#startup #enterpreneurs #services #email #sass #e2e

Did you know that zoho has a transactional mail service? https://www.zoho.com/zeptomail/pricing.html

And it looks affordable too

Job details https://jobsfordevelopers.com/jobs/senior-mobile-developer-at-servian-com-aug-19-2021-c498a3?utm_source=mastodon.world&ref=mastodon.world
#jobalert #jobsearch #hiring

Servian is hiring Senior Mobile Developer

🔧 #csharp #javascript #kotlin #python #swift #typescript #angular #flutter #react #reactnative #vue #android #ios #node #graphql #grpc #rest #aws #azure #cicd #css #docker #gcp #mvc #sass #sql #seniorengineer
🌎 Sydney, Australia
⏰ Full-time
💰 $90k - $210k (Estimate)
🏢 Servian

Job details https://jobsfordevelopers.com/jobs/senior-mobile-cross-platform-developer-at-servian-com-jun-30-2021-e02d47?utm_source=mastodon.world&ref=mastodon.world
#jobalert #jobsearch #hiring

Servian is hiring Senior Mobile Cross Platform Developer

🔧 #csharp #java #javascript #kotlin #python #swift #typescript #angular #flutter #react #reactnative #vue #android #ios #node #graphql #grpc #rest #aws #azure #cicd #css #docker #gcp #kubernetes #mvc #sass #seniorengineer
🌎 Sydney, Australia
⏰ Full-time
💰 $90k - $210k (Estimate)
🏢 Servian

Job details https://jobsfordevelopers.com/jobs/senior-engineer-at-xero-com-nov-1-2022-9d6803?utm_source=mastodon.world&ref=mastodon.world
#jobalert #jobsearch #hiring

Xero is hiring Senior Engineer

🔧 #javascript #php #typescript #laravel #react #redux #aws #azure #css #html #sass #seniorengineer
🌎 Remote; Vancouver, Canada
⏰ Full-time
💰 $90k - $200k (Estimate)
🏢 Xero

So, we now have CSS custom properties (variables).

CSS nesting is soon to come.

We even have <details> <summary> for show hide toggling content.

We have flex box and grid for layouts.

They are almost or soon to be natively supported in all modern browsers.

Do we really need SASS?

When vanilla CSS can do so much, why people make it complicated?

Why?
#css #sass

Damon Thomas

"Oh, Vincent - Don't take any sass from that peddler!" #comics #comics #sass

Comic snippet "Oh, Vincent - Don't take any sass from that peddler!"

Job details https://jobsfordevelopers.com/jobs/senior-mobile-cross-platform-developer-at-servian-com-jun-30-2021-e02d47?utm_source=mastodon.world&ref=mastodon.world
#jobalert #jobsearch #hiring

Servian is hiring Senior Mobile Cross Platform Developer

Nikita

I was cleaning up my code folder and stumbled upon a website project I didn't touch since December 2020, so, two years. Nothing extraordinary, just a #Pug + #Sass + #Bootstrap portfolio website, built with #Gulp.

Well, after trying for about 30 minutes, I still couldn't bring it to build properly. It was error upon error. 🙄

This is why I dislike the #JavaScript ecosystem so much. Even in #Python, it wouldn't be that critical, let alone something like #C or #Java.

Axel Leroy

Just tried it out, installing #Jekyll now takes mere seconds compared to minutes! I still have to update my #SASS files though, they no longer compile using Dart Sass :/

Axel Leroy

Oh wait, jekyll-sass-converter 3.0 was released just three weeks ago and finally dropped sassc in favor of Dart Sass 🎉
https://github.com/jekyll/jekyll-sass-converter
#jekyll #sass #dart

Axel Leroy

A nice thing I did was creating a #ContinuousDelivery pipeline using #GitHubAction. Why wouldn't I use #Netlify's built-in pipeline? Well, #Jekyll takes forever to build its #SASS plugin, so I created a #Docker image with all the gems pre-installed to save a few minutes on every builds.

So it's been a few days since I've started using #css cascade layers. Now I am wondering if there are some niceties when it comes to integration with #sass, especially when it comes to modules.

sass module @use have to appear first in a file, so now I have been putting a _layer-order.scss there and @use that. But I wonder if there is a cleaner way.

Ideally, I wouldn't have to necessarily wrap my sass modules code in a @layer at all but instead do that wherever they are @use'd.

Ideas / tools?

Ready. Write. Web.

@angieherrera
@jensimmons

Thank you, Angie.

That's... eye-opening.

Never worked with #Sass, #Stylus etc. so #Less familiar with the idea of nesting #CSS #selectors.

Honestly... struggling to see why selector nesting is so popular. Unnested selectors seem like they have the greatest clarity & legibility and... they don't feel verbose (?)

Beyond that, Option 3 looks the best of the options showcased (so it's a relief that this option has come out dramatically more popular than the other two).

Rob de Voer

@dmoonfire

I now typically create my own set of SASS files (core, colors, sizes, etc.) and then create a site.sass where I import them all. In VS2022 I setup my compile and minimisation and voila, life is reasonably easy. (the new CSS vars are similar).

Have just been reading the instructions for a css library called Bulma that a (highly respected) friend is raving about. May be something there... Will I or wont I have a go is the question...

#sass #css #tailwind #dotnet #bulma

Erika Sumner

I think this is perfect for #MondayMotivation AND for the #NewYear.

Put your #SASS on folks!

Toddler in glasses with a purse and a bow in her hair. Caption reads "Hop out of bed and put your sas on..." Very cute

Job details https://jobsfordevelopers.com/jobs/senior-mobile-cross-platform-developer-at-servian-com-jun-30-2021-e02d47?utm_source=mastodon.world&ref=mastodon.world
#jobalert #jobsearch #hiring

Servian is hiring Senior Mobile Cross Platform Developer

The Spicy Web

https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/

The folks working on the #CSS specs are still deliberating over the best way to handle nesting. And that's fine and right and good.

But as someone who's used the PostCSS plugin for nesting which is essentially "Option 3" (see below) and is closest to #Sass nesting without being quite that simple, I think that's clearly the right way to go and works quite well.

What are your thoughts #WebDev people?

Chris Boren

Hi, I’m Chris (he/him) and this is my #mastodon #introduction 👋

I’m a #developer by trade, but I mostly specialize in #javascript, #css, #sass, and #react. I’ve recently started speaking at events too, come say hi if you see me!

Before that I was a #designer, a #manager, and also dabbled in #IT

I’m originally from #Detroit, but built a career in #Chicago, and now live just outside #LosAngeles

I’m a #pizza nerd, a #publictransit enthusiast, and love working out of public #libraries

Hello 👋

Janice Selbie

#xmas #humor #atheist #exchristian #manger #donkey #animals #sass

While Mary & Joe adore baby Jesus in the manger a donkey thinks “Feel free to lay your kid right in my dinner”

Stu @ #CSSDay

https://sass-lang.com/blog/security-alert-tar-permissions

Hey #Sass fam - you might wanna check out this security alert to see if it affects your team and products, sooner rather than later

🙏🖤

Jason Byrne

I have a ways to go before it is fully functional and making it public, but I couldn't resist. POC is working well. I'm building a full #Mastodon client #webapp on #Svelte #SvelteKit #sass #mastojs and #TypeScript. I want to add full feed customization. Add your tabs across the top with various query and filter settings... Including things like removing reblogs/boosts, which I haven't seen any other client offer.

Mike Bifulco

https://jakelazaroff.com/words/tailwind-is-a-leaky-abstraction/

Tailwind is a leaky abstraction - @jakelazaroff is speaking my language here. Very good read.

#css #tailwind #sass

Benjamin Richardson

@kev what's the process for getting new custom emojis into the #Fosstodon picker? As someone who's mostly a webdev I'd love to see some for #css and #sass. 👀

hampton

In fact, AFAIK #Sass was the very first thing with any concept like that… #Webpacker, #Typescript, #PostCSS, #Less, and all are children of #SassCSS !

hampton

Happy Birthday to #Sass - she’s 15 years old today!

Things have come so far as an industry, mostly for the better. Back then the idea of any sort of compile/transform for browsers was limited just to minifiers! #CSS #SassCSS #FrontEnd #WebDev

Rachel Franklin 🦚

@geography #SpatialAnalysis #SocialSciences #GIS #Book #SASS

It’s finally published!! Like, for real!!

The Elgar Handbook @sergerey and I edited on Spatial Analysis in the Social Sciences (or, SASS) has arrived! 🎉🎉 Couldn’t be prouder or more grateful for all the contributions and hard work that folks put in to make this a reality. ToC and details to come. Right now I’m just going to bask.

Photo of book cover for a handbook that was nearly four years in the making.

James Jefferies

#Bootstrap #Sass #Deprecation

PSA - if you have been fed up of Bootstrap and Sass complaining about “Deprecation Warning: $weight: Passing a number without unit % (100) is deprecated.”

Well, good news, Bootstrap 5.2.3 is out which fixes this warning :D

nikkiana

Hi. I'm Nikkiana.

I ask a lot of #questions so other people can find #answers to questions they don't know how to ask.

I have a background in #foss, #tech and #webdev, and I built my first website at age 13 in 1997. My expertise is in #css, #sass, and #frontendwebdev.

I am a #mixedmedia #artist interested in #collage, #NeurographicArt, and #musicproduction

I am particularly interested in the intersections of #art, #culture, #tech, #techliteracy, #music, #race, #mentalhealth, and #disability within #socialmedia.

I have two #cats named Izzy and Sally.

I read #tarot and #OracleCards. If you're interested in that, I use @nikkiana@witches.live for that content.

Available and interested in projects, interviews, and conversation.

Tips are welcome and appreciated so I can afford to continue to share my expertise freely, especially to others who would not otherwise be able to afford it. If you'd like to do that, there's a link in my bio.

#introduction

#WebPerformance #CSSCascadeLayers

I saw in a #CssWg github thread a while ago, about #css cascade layers, that it's no longer a strain on performance to use `@import`, but I can't find it. Plus, has someone tried that out? What happens, when each component has its own CSS file that gets imported? With layers, scoping & container queries, I am starting to loose the necessity for #SASS, but I am still heavily relying on it for splitting my code, to get a sense of component-level-css.

Ana Tudor 🐯

#css #sass #trigonometry #maths #calculus

Came across https://austinhenley.com/blog/cosine.html

... and remembered that 10 years ago, I also did something similar in Sass https://codepen.io/thebabydino/pen/DEvpOP for inverse trigonometric functions (I had trigonometric functions using Compass, but not even Compass had the inverse ones), including the range reduction on a subsequent pass https://codepen.io/thebabydino/pen/VwPBwo to reduce errors.

Fast forward to today, no need for any of it anymore, there's sass:math! https://sass-lang.com/documentation/modules/math

DAT :loading:

Mirek Długosz 🕸️:python:🐛

Cool wie jede Anleitung jemals immer sagt "Wir installieren also #SASS und legen dann eine .scss-Datei an"

Die standard-Syntax war noch nie eine gute Idee, aber scheint ziemlich als wäre sie inzwischen endgültig verstorben.

@teacherbuknoy
I wonder if any CSS preprocessor can ungroup it automatically. Looks like #sass can't.

David Riccitelli

@matuzo @Kilian I haven't been able to use them with #sass though 😕

Fesh

Emmanuel ARNOUD :verified:

#introduction

I’m a #webdev from #newjersey currently working for #yougov on their #brandindex product. I’m a big fan of #testing and #typescript. I’m always trying to learn more about #systemdesign and #softwarearchitecture

Some other hashtags im interested in: #javascript #css #webPlatform #sasscss #sass #testinglibrary #reactjs #react