#scss — Public Fediverse posts

Odd/specific SCSS/SASS question

Working on a client website, I often use similar scaffolding for my projects, especially with SASS.

I had a variable defined as $red with a hex value.

When I passed this to a component file, it was iterating up the parent directories and then down into a specific directory where the same variable name was in use.

Not sure I understand the scoping here.

I have since updated all my variable names in the local repo to be a bit more BEM-ish.

Anyone know how/why this happens?

My client repo is several subfolders deep from the one being called in the file, but its not a direct child/grand child.

I hope this makes sense, assuming it is to do with name spacing.

First image shows the iteration up the tree to the incorrect folder, second one shows the updated filename which is referencing the local variable correctly.

#FrontEnd #FrontEndDevelopment #SCSS #CSS #SASS #Scoping #Variables

To manage the AI madness, I've started writing html templates. Old school way. Using #11ty, #SCSS, some bunch of scripts and template languages. Not a single line is written by LLM.

It feels so good. I used to be so fast with this things. Now I need tons of time to remember everything. But the feeling is amazing.

New day, new #opensource #python release!

DukPy 0.6 is out after months of work, bringing support for modern #Javascript to its embedded engine: https://github.com/amol-/dukpy

DukPy is a self-contained JS interpreter for Python with no external dependencies. Just "pip install dukpy"

It integrates with #webassets to compile #scss, #less and #typescript without #nodejs, includes an npm-compatible installer, and lets you test Python and JavaScript together with pytest, ideal for #webapplications

Morning lovely peopl of the Fediverse.

My current contract will come to an end in August, so I am on the lookout for my next gig.

• Frontend JavaScript developer with 15+ years experience
• Fond of VueJS, minimal frameworks, Vanilla JS (but also React experience over the years)
• CSS advocate. Currently using super modern CSS on this project which has been awesome, feel free to ask me about it if you like.
• Accessibility advocate, trying to push to make sure code and markup is as accessible as it can be. WCAG, ARIA and A11Y.
• Communication skills - Advanced! (love being a team player)
• All round nice fellow you could introduce to your friends and family.
• Contract ideally, will consider Perm but has to be a good fit.

I am UK based (in the East Midlands) but really looking for remote.

Also I know the market is odd now, maybe not once what it was, and LinkedIn seems to be a bit flaky, so if you have recommendations for other platforms, hit me with it.

Retoots very welcome 😊

#JavaScript #Frontend #FrontendDeveloper #Hire #SeekingWork #OpenToWork #Contract #Vue #VueJS #React #CSS #SASS #SCSS #FediHire #FediHired

I started my first @11ty site repo at Nov 15, 2021
With #pug & #scss, and scores 💯 at Lighthouse
Proof: https://iamdtms.hu/archive/iamdtms/status/1507020250167996427/

cc: @zachleat

One Open-source Project Daily

NES-style CSS Framework | ファミコン風CSSフレームワーク

https://github.com/nostalgic-css/NES.css

#1ospd #opensource #8bit #css #cssframework #nes #scss

Я сделал Vite-плагин, который сохраняет изменения CSS прямо в исходники

Каждый раз, когда я хотел поправить отступ или цвет в процессе разработки, я делал одно и то же: открыл DevTools → нашёл элемент → поменял значение → понравилось → скопировал → переключился в редактор → нашёл файл → вставил. Это семь шагов ради однострочного изменения. Я сделал LiveStyleSync , чтобы это был один шаг.

https://habr.com/ru/articles/1041454/

#vite #css #scss #devtools #opensource #typescript #preact

Hey nerds

Is there a way to convert this sass function so it can handle both a single and multiple properties?

@function pxToRem($pxValue) {
    @return math.div($pxValue, 16px) * 1rem;
}

When I use it I call it like so:

@Include mixin.spacing('margin', 10px);

Which converts any px input to rem, no problem, but it's a pain if I want to write out

@Include mixin.spacing('margin', 10px 20px 0 10px);

Or similar, trying to work out if I can do everything in a single function.

#SASS #SCSS #CSS #FrontEnd #FE #WebDev #FediHelp #FrontEndDevelopment #TechFediHelp

First up next week at our May 28th Meetup is Thomas Baker:

👓 He's going to make the case that we should drop vanilla #CSS completely and embrace Sassy CSS.

Whether or not that's in its #SCSS form or - for those of us who are terrified of { brackets } and intimidated; by; colons; - the #Sass form… he's sure to let us know!

#FrontEndDevelopment #Sheffield #Meetup

https://www.meetup.com/front-end-sheffield/events/314557160/

[Перевод] Ты не можешь построить жизнеспособную дизайн-систему на Tailwind — Часть 1

Tailwind отлично работает для быстрого прототипирования, но становится проблемой когда проект растёт. Разбираю три подхода к построению дизайн-системы на Tailwind — CVA, CSS-переменные и @utility — и объясняю почему каждый из них не решает проблему комбинаторного взрыва вариантов.

https://habr.com/ru/articles/1020132/

#css #tailwind #дизайнсистема #фронтендразработка #ui_библиотека #scss #less

@zeldman I'm considering this approach on my next big project - but with primitives in #SCSS - so I can use color/math magic - and the semantics in CSS `--variables`. I don't know if this is bananas yet.

Модульная система Sass: руководство по @use

Раньше в Sass был только @import , который создавал кучу проблем: глобальное загрязнение, конфликты имён, дублирование кода. В новых версиях (Dart Sass) @import объявлен устаревшим — вместо него пришли @use и @forward . Переход на модульную систему — это не просто замена одного слова на другое, а смена парадигмы. Теперь каждый файл — изолированный модуль со своим пространством имён. В статье на реальных примерах показано: как подключать переменные, миксины и функции через @use ; почему больше не работает @import 'file' и как исправить старый код; что такое встроенные модули ( math , list , map , string , color ) и зачем их подключать вручную; как гибко настраивать темы через !default и with() ; чем @forward отличается от @use и как с его помощью собирать публичное API проекта; как избежать ошибок с повторными импортами и конфигурацией. Материал будет полезен всем, кто пишет на Sass и хочет идти в ногу с развитием инструмента.

https://habr.com/ru/articles/1013818/

#предпроцессор_scss #scss #dart_sass #dart_sass_300 #sass

For fun I am re-teaching myself SCSS after not doing any since 2015. Learning curve will be steep at first, but it will be worth it.

#scss #RelearningStuff #webdev

Bulma modularity is great for saving resources, but it's hard to know what should be imported to make things work.

https://bulma.io/documentation/start/modular/

I struggle to make modals work. Some imports are obviously missing, but which ones, that is the question 🤔

#Bulma #CSS #SCSS #SASS #WebDesign #WebDevelopment

Hmm, is there a way to use sass combinators with attribute string concatenation for the value?

Here are my outputs:

data-class="Form-status--complete"
data-class="Form-status--in-progress"
data-class="Form-status--expired"

I want to do something like this:

    [data-class='Form'] {
        &-status {
            &--complete {
                color: $c-state-orange;
            }

            &--in-progress {
                color: $notice-icon-pending;
            }

            &--expired {
                color: $c-state-gray;
            }
        }
    }

Of course that doesn't work. But I am not sure if I can avoid repeating myself

I am assuming you can't just open the square brackets and wrap them around your logic like:

[data-class='Form {
   &-status {
   ...
}']

#css #sass #scss #stylesheets #html #FrontEnd #FrontEndHelp #WebDev

Microsoft forced me to switch to Linux
https://www.himthe.dev/blog/microsoft-to-linux
#ycombinator #Bogdan #Mihai #Mosteanu #fullstack #developer #web #nextjs #react #typescript #vue #laravel #php #javascript #css #scss #html #tailwindcss #team_lead #bogdan_mosteanu_hey_com #xndbogdan #xnd_bogdan

#Charlicature v1.1 - Fait avec Wordpress, un peu de #php de #wordpress et #scss évidemment... #caricaturiste #artist

https://caricaturiste-animation.com/galerie

One of my earliest #CSS #3D demos on @codepen: how to (de)construct a dodecahedron https://codepen.io/thebabydino/pen/ALQVQe

A dodecahedron is one of the 5 regular polyhedra = made up of only identical regular polygon faces. Regular polygons have all edge lengths and vertex angles equal.

#geometry #Maths #code #coding #css3D #cssTransforms #transform #frontend #polyhedron #polyhedra #PlatonicSolid #dodecahedron #cssAnimation #web #dev #webDev #webDevelopment #trigonometry #Sass #SCSS

Подборка вопросов для собеседования Frontend-разработчика

Статья представляет собой подборку актуальных вопросов и ответов, которые часто встречаются на собеседованиях по фронтенд-разработке. Материал охватывает ключевые темы: HTML, CSS, JavaScript, Typescript, React и Next.js. Каждая секция содержит практические вопросы с разбором правильных решений, пояснениями и примерами кода, что позволяет читателю не только подготовиться к собеседованию, но и углубить понимание основных принципов фронтенд-разработки. Статья будет полезна как начинающим, так и опытным разработчикам, желающим систематизировать знания и освежить навыки перед интервью.

https://habr.com/ru/articles/973072/

#nextjs #react #html #css #javascript #scss

Neu im Forum:

Fehler beim Import mit ws_scss

https://t3forum.net/d/1042-fehler-beim-import-mit-ws-scss

#t3academyforum #TYPO3 #SCSS

Почему мы все еще используем SASS в 2025 году

Привет, Хабр! На связи Герман Frontend-разработчик в Webest, и сегодня хочу поделиться тем, почему мы продолжаем использовать препроцессор SASS/SCSS в наших проектах, несмотря на растущую популярность Tailwind и CSS-in-JS решений. К слову, мы не «олдскульные фанаты» SASS, и Tailwind тоже используем, но в зависимости от типа проекта. Комбинированный подход дает гибкость, особенно в масштабируемых фронтенд-системах.

https://habr.com/ru/articles/965698/

#saas #scss #frontendразработка #верстка_сайтов

Opened an issue to Mastodon Bird UI: Major rewrite: migrate to SCSS + Parcel for Mastodon's new CSS custom properties system https://github.com/ronilaukkarinen/mastodon-bird-ui/issues/172

I don't have time to work on this for a while, but I already have a plan.

#MastodonBirdUI #BirdUI #CSS #MastoAdmin #Mastodon #SCSS #OpenSource

[Перевод] Как использовать любой CSS-фреймворк в вашем проекте — Часть 2

Переменные Bootstrap — мощный инструмент для управления стилями , но без правильной структуры их тяжело использовать. В этой статье я расскажу, как организовать SCSS-файлы, подключать глобальные переменные и сделать их доступными во всех компонентах Angular. Такой подход не только экономит время, но и делает проект более понятным для команды. А для больших проектов на NX вы узнаете, как делиться стилями между разными приложениями и библиотеками.

https://habr.com/ru/articles/918770/

#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss #less

Фиксим залипающий hover на мобильных устройствах

Что мы проверили: Залипающий hover на мобильных устройствах – частый баг. Раньше мы решали это просто плагином PostCSS Hover Media Feature, он оборачивает все псевдоклассы :hover в медиазапрос @media (hover: hover) {}. Так мы проверяли поддержку hover и отключали его на мобилках. Но во время тестирования одного проекта оказалось, что на некоторых устройствах hover продолжает залипать.

https://habr.com/ru/articles/955650/

#CSS #scss #postcss #plugin

A little pure #CSS demo I made a while back on @codepen https://codepen.io/thebabydino/pen/ErwLOm

#SCSS #Sass #code #coding #frontend #web #dev #webDevelopment #webDev

Show HN: Windows 7 GUI for the Web
https://khang-nd.github.io/7.css/
#ycombinator #7_css #css #scss #framework #windows_7 #windows_7ui #windows_7css_framework #windows_7web

every wanna golf your css color codes? yeah, me neither. just use my postcss plugin to do it for you
https://github.com/xero/postcss-color-golf

https://npmjs.com/package/postcss-color-golf

#npm #js #postcss #css #scss #sass #style #css3 #optomization #golf #codegolf