I made a dark mode toggle, which applies the .dark class to the body (body class="dark").

I used a SCSS mixin & see it at the bottom of the full stylesheet.

It's not overriding the body class properties.

I don't know what I'm doing wrong.

Codes:

@Media (prefers-color-scheme: dark) {@include dark-mode;}

@mixin dark-mode {
body {
&.dark {
background: $color-darkgrey;
color: $color-cream;
}
}
}

Using !important doesn't help.

#CSS #SCSS #DarkMode #WordPress #WebDesign

We've had an internal linter for years, which is built on a PHP #symphony framework.

You run the linter you want and append `--fix` if you want it to resolve issues (if it can)

It lints things like #JS, #SCSS as well as #PHP (via #Rector and #phpstan), #Composer files and even #TYPO3 TypoScript files - all by using the open source libraries available.

It means all our developers can adhere to central linting conventions without having to update local config files.

#SCSS を 1 行書き換えただけで数十秒待たされる開発環境つらい

i'm updating a #drupal 8 site to 10 and tumbling through some of the changes in #css #scss #sass class conventions, maybe due to the outdated #radix theme? where underscores are now hyphens and various <div> have appeared and disappeared 😬
is there a standard/programmatic way to update the classes at least? 🤔

Good morning ☀️

Blog page has been optimized for mobile, at least better than it was. More functionality will be coming as more posts appear 👏🏼

#webdev #html #astro #css #sass #scss #GithubPages

how did optimization for mobile fail this badly for the blog page 😭

#sass #scss #css #html #js #webdev #frontend

Is there a support group for folks that say they will separate and structure their SASS/SCSS properly, but then just end up writing it all into one file?

😬

#CSS #SCSS #Frontend

I've spent most of my vacation catching up on what's new(-ish) in #CSS, and applying it to my websites. It's all part of my project to move everything from #jekyll to #hugo.

I'm quite surprised to find that, for my relatively simple needs, CSS custom properties do everything I was using #SCSS for. And 'display: grid’ makes layout so much simpler.

Kevin Powell's YouTube channel has been very, very helpful: https://www.youtube.com/@KevinPowell

am I just dumb, or is there really no option to just flatten a list in #scss?

Given, let's say, `$font-weights: (100, 300, 500, 600, 900)`. How are you dumping this into a single string?

I'm currently just writing a custom function that concatenates the values and prints it out. But it feels like such a basal operation, that there _should_ be an internal for it, yet I cannot find it.

or maybe this just reveals my misunderstanding of modules in #scss. I thought that it only concatenates, when `@use 'partial';` or `@use 'partial' as *`.

But I believe now, that it concatenates every time, just like `@import`, with the only difference that members can now be namespaced.

I'm officially open to work! 🚨 BoostOK

If you're looking for someone with mad frontend skills and ~5 years EXP, look no further!

🎨 I love working with #typescript, #svelte, #react and #scss

🧰 I also have experience with Node.js (SvelteKit, Next, SocketIO, etc)

🤝 Most of my projects are open-source (link below)!

If you want to see more of my work or get in touch:

🌐 Website: https://doceazedo.com
💼 LinkedIn: https://linkedin.com/in/doceazedo
🐙 GitHub: https://github.com/doceazedo

Thanks! blobcathearthug

Yooo I think I learned something new about #scss. I am iterating over a map that is not uniformly defined. It has 4 fields: start, end, from, to. But from & to are not always defined.

I am passing its values to a function that accepts 4 parameters, the last ones are optional and are defined with !default.

Now, when the original map does not have 'from' or 'to', it fails because it tries to operate with null.

Should `null` in a parameter not mean that the function uses the default?

I'm trying to once again meaningfully unify how I abstract code in #SCSS and Cascade Layers in #css

Consider a scss library that has lots of folders and barrel files, `components/_index.scss`. Each component may be its own (nested) layer, but I cannot export them into a single, unified `components` layer, because I cannot put @layer before @forward/@use.

I could have something like `$layer1: 'components' !default; $layer2: 'button' !default` and then @forward with(...) it, but that's nasty

„When in doubt #BEM it out!“

Watched episode 8 of #KevinGeary‘s #Pagebuilder 101 about #CSS Classes and Styling.

Love that I got into #SCSS, together with BEM I finally have orientation when naming the classes. Big shoutout to the #WordPress Devs from #WPCodebox as well!

https://youtu.be/TMDwPYnJC0g

At the last #WordPress meetup @wp0711, @bovelett gave a presentation about #accessibility and we took the opportunity to test our websites.

Surprisingly, we had some contrast errors in our buttons despite using a #SCSS function to automatically calculate the correct contrast.

Turns out, most contrast calculation functions for SCSS are incorrect according to the WCAG 2 specifications.

So I found a smooth solution for that:
https://epiph.yt/en/blog/2023/fix-your-scss-color-contrast-function/

Beim letzten #WordPress Meetup @wp0711 hat @bovelett eine Präsentation über #Barrierefreiheit gegeben und wir haben dies zum Anlass genommen, unsere Websites zu testen.

Erstaunlicherweise hatten wir einige Kontrastfehler in unsere Buttons, obwohl wir eine #SCSS-Funktion zur automatischen Berechnung des richtigen Kontrasts verwenden.

Stellt sich raus: die meisten Funktionen, die man dafür findet, sind nicht WCAG-2-konform.

Zum Glück habe ich eine Lösung dafür gefunden:
https://epiph.yt/blog/2023/korrigiere-deine-scss-farbkontrastfunktion/

Ready to tackle #TailwindCSS today!🤓 I've heard it's a love-it or hate-it kind of thing. Will I end up on team love or team hate? Stay tuned! 😄 Any tips for someone coming from pure #CSS and #scss

#Frontend #webdev

It seems like the custom.scss that I wrote and definitely works with quarto preview isn't working when my website is published to #netlify. Anyone else experienced this? I'm probably just doing something wrong. #QuartoPub #scss

Ya pasó la Workation, y bien agradecida. Me pegue unos buenos madrugadones, aprendí mucho sobre #docker y parece que ya puedo ayudar a la empresa con sus tiendas digitales. No sé porque, pero el síndrome de impostor siendo desarrolladora me acompaña. Me contrataron como Frontend y ya trabajo de Fullstack. Y si me encanta mi trabajo. Lo único es, que me muevo entre Devops y ajustes de Diseño en #scss

Open close #svg animation driven by #scss / #css

https://codepen.io/m_vd_e/pen/VwEYjqR