#scss — Public Fediverse posts

https://www.europesays.com/ie/446539/ Senior Citizen Savings Scheme (SCSS): Here’s a look at eligibility, interest rate, tax benefits, and investment limit #Business #Éire #eligibility #GovernmentBackedRetirementPlan #HighInterestRate #IE #incom #InterestRate #Investment #Ireland #Money #PersonalFinance #PersonalFinance #PrematureClosure #Retirement #RetirementPlan #rules #SCSS #SeniorCitizens #SeniorCitizensSavingsScheme #TaxDeduction #TaxDeductionUnderSection80C #TaxDeductions

[Перевод] Ты не можешь построить жизнеспособную дизайн-систему на 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

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

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

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

Check latest interest rates: PPF, NSC, SSY & SCSS for Oct–Dec 2025 https://english.mathrubhumi.com/news/money/post-office-small-savings-scheme-rate-qym5zub2?utm_source=dlvr.it&utm_medium=mastodon #PostOfficeSchemes #PPF #SCSS #SSY #NSC

Check latest interest rates: PPF, NSC, SSY & SCSS for Oct–Dec 2025 https://english.mathrubhumi.com/news/money/post-office-small-savings-scheme-rate-qym5zub2?utm_source=dlvr.it&utm_medium=mastodon #PostOfficeSchemes #PPF #SCSS #SSY #NSC

Check latest interest rates: PPF, NSC, SSY & SCSS for Oct–Dec 2025 https://english.mathrubhumi.com/news/money/post-office-small-savings-scheme-rate-qym5zub2?utm_source=dlvr.it&utm_medium=mastodon #PostOfficeSchemes #PPF #SCSS #SSY #NSC

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

[Перевод] Практическое руководство по иконкам в веб-проектах — Часть 1

Сегодня почти каждый веб-проект использует иконки. Это отличный инструмент визуальной коммуникации, который помогает акцентировать внимание на элементах интерфейса. Существует хорошая статья о том, почему стоит использовать иконки — "Icons in Web Design". Но эта статья отвечает на другой вопрос — как их использовать ?

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

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

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

Компоненты Bootstrap удобны, но не всегда соответствуют нужному дизайну. Чтобы избежать несогласованности и ручного редактирования в каждом проекте, важно выстроить чёткую систему кастомизации. В этой статье рассматривается пошаговая настройка компонента Alert — с использованием SCSS-переменных и структуры дизайн-системы.

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

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

I was wondering why I'm getting bored with that project I got assigned but then I saw that the SCSS bundle file just compiled for the 923rd time.

#scss #css #webdevelopment #wordpress

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

В четвертой части мы рассматриваем процесс кастомизации кнопки Primary в Bootstrap с точки зрения построения дизайн-системы. Пошагово описаны уровни кастомизации, а также способы внесения изменений через переменные и стили для сохранения чистой архитектуры.

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

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

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

Цвета — одна из самых важных частей любой дизайн-системы — и также одна из самых сложных. Если с ними обращаться неправильно, это приведёт к путанице и несогласованности в дальнейшем. Чтобы этого избежать, вам нужна чёткая, хорошо структурированная цветовая система, которая остаётся согласованной во всём проекте. Если всё сделано правильно, вы сможете разрабатывать и поддерживать весь проект, используя только 6–8 основных цветов и их оттенков.

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

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

Apparently SCSS variables can't be used to declare CSS variables?

This doesn't work:

--width: $sWidth;

SOLVED! See replies.

#CSS #Sass #SCSS

Адаптивная flex-сетка на CSS: разбираем реализацию на атомы

Наверное, каждый, кто сталкивался с frontend`ом, хотя бы раз использовал адаптивную flex-сетку на N-ном количестве колонок. В данной статье мы не станем рассматривать область применения такого подхода, его плюсы и минусы, а разберем теорию и напишем собственное решение, с брейкпоинтами и настраиваемым спейсингом! Данная статья, в первую очередь, будет полезна новичкам, однако надеюсь, что и опытные разработчики найдут в ней что-то интересное. Для упрощения жизни, будем использовать SCSS, продублировав CSS «под спойлер».

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

#SCSS #Вебразработка #Адаптив #CSS

Sassy dark mode https://no-pe.netlify.app/dark-mode/

I did it for the title. Not really.

#sass #scss #css #DarkMode #DarkTheme #LightMode #LightTheme

#FrontEndDeveloper #webdesigner

I have 6 Years working as a #FrontEndDeveloper #webdesinger & I am #looking for a new role and would appreciate your #support. #OpenToWork

Skill: #CSS, #HTML, #JavaScript, #Jquery, #Bootstrap, #SCSS, #TailwinCSS, #XD, #Photoshop, #WordPress (Elementor, Wp bakery), #AMP (Accelerated Mobile Pages), #ReactJs (#fresher - , Router, css, html, Api), #SEO, #GWD (Animated Banner).

Any Freelancing Work ?

1 Page Design : 20$

My Portfolio : https://riddham007.github.io/

As someone hearted ❤️ a 2015 demo of mine, I decided that since #CSS got better (and hopefully I did too), I should go for a quick 2024 remake.

Here it is on @codepen
https://codepen.io/thebabydino/pen/wKoVGN

It's mindblowing 🤯 how much I could reduce the (esp. compiled) code - check it out!

HTML by 73%!
CSS by 70%!

I repeat: I shaved off at least 70% from each! ‼️

#Sass #SCSS #Haml #Pug #preprocessor #cssVariables #HTML #cssGrid #cssLayout #cssMaths #code #coding #frontend #web #dev #webDev #webDevelopment

Libre pour du Développement Web fullstack 🤗

CDI distanciel de préférence sinon je m'adapte, je suis à Paris.

Compétences en +:
Maquettiste #Photoshop #Illustrator,
Monteur vidéo #Premiere #Avid,
Habillage/Animation #AfterEffect
Régie/Vidging/Mapping: #Obs #Resolume #Millumin

CV en mp.

#HTML
#CSS
#PHP
#JS
#jQuery
#Scss
#Symfony
#React
#NextJs
#ViteJs
#Bootstrap
#Tailwind
#Stripe
#dataTables
#Wordpress
#Prestashop
#Sylius
#MongoDb
#Mariadb

Oh wonderful that #DartSass is going to suddenly start throwing a bunch of warnings because they are changing the way that #SCSS nesting works to match #CSS.

https://sass-lang.com/documentation/breaking-changes/mixed-decls/

The thing is, I can't actually find any examples where changing the output from nesting would result in changes to the actual styles of the page. The font-weight example would result in everything still being the same font weight.

Dev Web fullstack, je termine un long CDD en fin de semaine. Je suis donc libre à partir du 3 juin.

CDI distanciel de préférence sinon je m'adapte, je suis à Paris.

Compétences en +:
Maquettiste #Photoshop #Illustrator,
Monteur vidéo #Premiere, #Avid,
Habillage/Animation #AfterEffect

CV dispo en mp.

#HTML #CSS #PHP #JS #jQuery #Scss #Symfony #React #NextJs #ViteJs #Bootstrap #Tailwind #Stripe #dataTables #Wordpress #Prestashop #Sylius #MongoDb #Mariadb #aws #debian #Vi #bash #English

Does anyone know how to disable #Middleman's internal #SCSS/#SASS handling so that #Webpack does it exclusively?

https://forum.middlemanapp.com/t/middleman-still-seems-to-handle-scss-sass-despite-that-webpack-should-be-used/4716

A CSS framework for recreating Windows 7 UI
https://khang-nd.github.io/7.css/
#ycombinator #7_css #css #scss #framework #windows_7 #windows_7ui #windows_7css_framework #windows_7web

Oh! #oklch is now supported in all major browsers. That was fast, within the year.

⇉ https://caniuse.com/?search=oklch

I guess it is now safe to trim down #CSS / #SCSS files to just #hwb and oklch colours.

#webdesign #webdev #webmaster #CSS4

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? 🤔

For those who would like to move away from JSS back to good old CSS, here is a conversation tool.

#jss #CSSinJS #css #scss

https://lil5.github.io/jss-to-scss/

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.

#webDevelopment #html #haml #css #scss