#SCSS
As a follow-up to the previous blog post about SCSS color contrast functions, today we’re going to implement such a calculation within #scssphp:
https://epiph.yt/en/blog/2023/wcag-2-compliant-scss-color-contrast-function-with-scssphp/
Im Anschluss an den letzten Blogbeitrag über SCSS-Farbkontrastfunktionen werden wir heute eine solche Berechnung in #scssphp implementieren:
https://epiph.yt/blog/2023/wcag-2-konforme-scss-farbkontrastfunktion-mit-scssphp/
„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!
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
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
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
And a grubby little so-and-so has directly edited the production-built CSS (via FTP no doubt), which renders the entire #SCSS origination files useless. You *know* they haven't changed those to keep them up to date…
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
@iamdtms #introduction
/w #tags
#UI, #UX, #design, #CSS, #SCSS, #Javascript, #HTML, #Photoshop, #WebStandards, #Identity, #RWD, #Typography, #Usability, #PugJS, #Emmet, #Accessibility, #CLI, #11ty, #CSP, #Android, #VPN, #Security, #openSource, #Linux, #Mint, #Ubuntu, #Windows #Wordpress, #Users, #GIT, #Netlify
#CSS nesting will be native, at some point. No more #SCSS needed.
https://www.brycewray.com/posts/2023/02/some-future-now-css/
For the project I have in #scss, I wanted to have it public today, but it's still basic and I'm figuring out a few errors.
It's for an #obsidian theme I made that piggybacks off the default theme AND can also work (depending on the theme, as a #css snippet).
Everything should be configurable and/or at least able to be toggled via the Style Settings plugin, but that's not the case right now. Further, my settings are disorganized, so I need to group them.
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.
I have just discovered #SASS and I have an interesting question for you, guys. I am a backend person but....
Falling in love with #CSS & #SCSS all over again lately. Even though I’ve been refactoring a few things, its just a joy to work with.
I have an unofficial format/style which I should formalise and be more rigid about, but other than building interfaces has always been the best part of working on the web for me!
I’ve been a bit obsessed lately with #CSS #ColorPalettes and have traditionally relied on strait #SCSS for them. But I’m also becoming obsessed with #CSSCustomProperties. I whipped up this #CodePen that generates several custom property palettes according to the core color relationship algorithms https://codepen.io/oobleck/pen/ZEjYOvR.
You can tweak the seed color at the top of the CSS panel.
More bird site #migration today.
Just want to do another intro for folks (:
Hi! Welcome to Mastodon. I'm Enso. pronouns are they/them. I'm a #UX student striving to work in #gamedev. I love #scss, #jquery & slowly learning #ReactJS and #python in my free time.
I'd like to have more friends in the #jrpg, #anime, & #manga space too. My favourite jrpgs are Golden Sun & the Trails/Kiseki series. I also play a ton of #GenshinImpact & #Destiny2.
Feel free to give me a shout if you need help
After turning up here a couple of weeks or so ago, I figured it's time for an #introduction
I'm a full stack web developer, currently working mostly with #php (#laravel) and Vanilla #javascript and #scss. Still love #cfml too.
Outside of that, my main interests are around #infosec, #fintech, and just learning new stuff.
Husband, father of 2 boys, speaker of #German and #english with some basic understanding of #Arabic
Started running my own instance just for fun, and loving it. #mastoadmin
@danjac One way to deal with that (if you use SCSS/SASS) is with a list.
Ex.: `$z-index: header-banner, menu-lang-panel, overlay, dialog, dialog-close;`
Then in your CSS rule:
`.dialog { z-index: index($z-index, dialog); }`.
So the `.dialog` class will have a `z-index` of `4`. I find the Z axis
is easier to manage this way.
For more clarity, I recommend giving the same name of the class to the
item in the list.
@tero_ojala Yes. #SCSS is awesome and my main thing, but only when combined to modern #CSS, for example with CSS variables.
I use SCSS variables only for breakpoints because media queries don't support CSS vars (yet). Everything else is with CSS vars for easier manipulation.
SCSS pros:
- Combining assets and modularity
- Functions
- Mixins and components
- Sensiful nesting
- Sensiful extends
- PostCSS
- Stylelint features that exist only in SCSS
Things like these are the reason why I use SCSS:
https://github.com/digitoimistodude/air-light/blob/47be2803d0d3ca4e8b4f4468378da70bb4e51310/sass/helpers/_aspect-ratio.scss
RT Greg RoBOOleto 👻
Re @CodePen Catching up on making these "making-of" videos. This one required little editing, which made me smile 😀, thinking I am getting more honed at coding these.
🏷️#divtober, #css, #scss, #cssart, #cssanimation
Also available on YouTube:
https://www.youtube.com/watch?v=jcclDHxD2qc
:sys_twitter: https://twitter.com/robleto/status/1581806004693782528
@kuketzblog Dracula UI ist inzwischen auch #OpenSource falls jemand den Stil für eigene Projekte haben will. Ich nehm das Farbschema gern für Softwareentwicklung :) https://ui.draculatheme.com/
RT Greg Robleto
Grills on!
Day 11 of #divtober is "burger"
Learned you can't use a mixin for multiple radial gradients in the same background, so did a lot with variable calcs to make those burger patties.
🏷️ #css #cssart #scss
https://codepen.io/robleto/pres/JjvmLme/5b5568647e5317c6986b95ca71261d5e
:sys_twitter: https://twitter.com/robleto/status/1579831309253627905
Aaarrrrggh!!! Weshalb hat ein #CSS #Framework die Variablen für die #Farben nach deren eigentlichen Farben und nicht deren #Funktion für was sie eingesetzt werden benannt? So suchst du dir dumm und dämlich wo was wie eingefärbt wird - Hach es wäre doch so einfach wenn #SASS / #SCSS auch (nach meinem Empfinden) richtig eingesetzt würde. Ich habe den Verdacht, das gewisse #Entwicklerinnen einfach #Sadisten oder bloß #dumm oder gar beides sind, denn vorausschauend so wie praktisch ist es nicht.
a team next to me declared in their coding standards "don't use that class nesting feature of #SCSS"
instinctually wanted to slap someone
then they told me they meant something like:
.foo { &-bar {…} }
https://css-tricks.com/the-sass-ampersand/#aa-modifying-the-ampersand
yeah okay. That's indeed something nobody should ever need to do.
It has been a while since I last caught up with the latest dart-sass features and I like them. I started adding structure to Egg Hat's #scss and started work on the form for adding recipes.
And I also reskinned the app by #Bootstrap v5 #scss framework
Specifically, building `main.scss` when `_base.scss` changes
Processing Sass in Eleventy
#Eleventy #SCSS #CSS #Blog
https://randomgeekery.org/post/2022/01/processing-sass-in-eleventy/
How I handle color contrasts to have "the same colors" in a light and a dark theme on a static page without having to pick every color twice and making sure to have a good contrast to make it easy on the eyes to read: https://elis.nu/blog/2021/09/dynamic-css-color-themes-with-similar-contrasts/
Just a loose web-dev question:
I have never used Haml or SCSS. They are becoming more common in guides online. Is it worth it? Aside from efficient code (which is definitely a bonus), are there other benefits to these, or other options?
I'm not a designer and don't write more than about 15-20 pages in a year. I achieve what I want with plain old HTML/CSS so far. But I'm making more web-art and see there are tidy ways to do things with SCSS/Haml.
How to Make a Landing Page using HTML, SCSS, and JavaScript - Full Course #html #scss #sass #webdev #webdevelopment
https://www.youtube.com/watch?v=aoQ6S1a32j8
Dev Snap Just Launched!
Dev Snap Is A Website With Tons of Free and Open Source HTML, CSS, and JavaScript Assets for Web Developers.
#html, #css, #javascript, #jquery, #scss, #bootstrap, #bootstrap4, #css3, #react.js, #react, #vue, #vue.js, #devsnap, #devsnap.me
Oh cool!
With SASS, you can put media queries inside of classes:
https://stackoverflow.com/questions/21323818/css-define-media-query-within-one-class#21323826
I started learning Sass recently. Sass is very powerful, and can speed up your CSS development. I definitely think it's worth learning. #sass #scss #css
Learn SASS in 5 minutes - PART 1
https://www.youtube.com/watch?v=ok3y4E5NEmw&list=PLriKzYyLb28nvORWgaD0hAbBcJUcsxy16&index=1
