#scss — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #scss, aggregated by home.social.
-
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
-
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
-
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
-
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
-
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/
-
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/
-
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/
-
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/
-
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/
-
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
-
[Перевод] Ты не можешь построить жизнеспособную дизайн-систему на Tailwind — Часть 1
Tailwind отлично работает для быстрого прототипирования, но становится проблемой когда проект растёт. Разбираю три подхода к построению дизайн-системы на Tailwind — CVA, CSS-переменные и @utility — и объясняю почему каждый из них не решает проблему комбинаторного взрыва вариантов.
https://habr.com/ru/articles/1020132/
#css #tailwind #дизайнсистема #фронтендразработка #ui_библиотека #scss #less
-
[Перевод] Ты не можешь построить жизнеспособную дизайн-систему на Tailwind — Часть 1
Tailwind отлично работает для быстрого прототипирования, но становится проблемой когда проект растёт. Разбираю три подхода к построению дизайн-системы на Tailwind — CVA, CSS-переменные и @utility — и объясняю почему каждый из них не решает проблему комбинаторного взрыва вариантов.
https://habr.com/ru/articles/1020132/
#css #tailwind #дизайнсистема #фронтендразработка #ui_библиотека #scss #less
-
[Перевод] Ты не можешь построить жизнеспособную дизайн-систему на Tailwind — Часть 1
Tailwind отлично работает для быстрого прототипирования, но становится проблемой когда проект растёт. Разбираю три подхода к построению дизайн-системы на Tailwind — CVA, CSS-переменные и @utility — и объясняю почему каждый из них не решает проблему комбинаторного взрыва вариантов.
https://habr.com/ru/articles/1020132/
#css #tailwind #дизайнсистема #фронтендразработка #ui_библиотека #scss #less
-
Модульная система Sass: руководство по @use
Раньше в Sass был только @import , который создавал кучу проблем: глобальное загрязнение, конфликты имён, дублирование кода. В новых версиях (Dart Sass) @import объявлен устаревшим — вместо него пришли @use и @forward . Переход на модульную систему — это не просто замена одного слова на другое, а смена парадигмы. Теперь каждый файл — изолированный модуль со своим пространством имён. В статье на реальных примерах показано: как подключать переменные, миксины и функции через @use ; почему больше не работает @import 'file' и как исправить старый код; что такое встроенные модули ( math , list , map , string , color ) и зачем их подключать вручную; как гибко настраивать темы через !default и with() ; чем @forward отличается от @use и как с его помощью собирать публичное API проекта; как избежать ошибок с повторными импортами и конфигурацией. Материал будет полезен всем, кто пишет на 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.
-
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 🤔
-
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 -
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 -
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 -
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
-
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. Каждая секция содержит практические вопросы с разбором правильных решений, пояснениями и примерами кода, что позволяет читателю не только подготовиться к собеседованию, но и углубить понимание основных принципов фронтенд-разработки. Статья будет полезна как начинающим, так и опытным разработчикам, желающим систематизировать знания и освежить навыки перед интервью.
-
Neu im Forum:
Fehler beim Import mit ws_scss
-
Почему мы все еще используем SASS в 2025 году
Привет, Хабр! На связи Герман Frontend-разработчик в Webest, и сегодня хочу поделиться тем, почему мы продолжаем использовать препроцессор SASS/SCSS в наших проектах, несмотря на растущую популярность Tailwind и CSS-in-JS решений. К слову, мы не «олдскульные фанаты» SASS, и Tailwind тоже используем, но в зависимости от типа проекта. Комбинированный подход дает гибкость, особенно в масштабируемых фронтенд-системах.
-
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
-
[Перевод] Как использовать любой CSS-фреймворк в вашем проекте — Часть 2
Переменные Bootstrap — мощный инструмент для управления стилями , но без правильной структуры их тяжело использовать. В этой статье я расскажу, как организовать SCSS-файлы, подключать глобальные переменные и сделать их доступными во всех компонентах Angular. Такой подход не только экономит время, но и делает проект более понятным для команды. А для больших проектов на NX вы узнаете, как делиться стилями между разными приложениями и библиотеками.
https://habr.com/ru/articles/918770/
#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss #less
-
[Перевод] Как использовать любой CSS-фреймворк в вашем проекте — Часть 2
Переменные Bootstrap — мощный инструмент для управления стилями , но без правильной структуры их тяжело использовать. В этой статье я расскажу, как организовать SCSS-файлы, подключать глобальные переменные и сделать их доступными во всех компонентах Angular. Такой подход не только экономит время, но и делает проект более понятным для команды. А для больших проектов на NX вы узнаете, как делиться стилями между разными приложениями и библиотеками.
https://habr.com/ru/articles/918770/
#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss #less
-
[Перевод] Как использовать любой 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 продолжает залипать.
-
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 -
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 -
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-golfhttps://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
-
[Перевод] Практическое руководство по иконкам в веб-проектах — Часть 1
Сегодня почти каждый веб-проект использует иконки. Это отличный инструмент визуальной коммуникации, который помогает акцентировать внимание на элементах интерфейса. Существует хорошая статья о том, почему стоит использовать иконки — "Icons in Web Design". Но эта статья отвечает на другой вопрос — как их использовать ?
https://habr.com/ru/articles/919516/
#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss
-
[Перевод] Практическое руководство по иконкам в веб-проектах — Часть 1
Сегодня почти каждый веб-проект использует иконки. Это отличный инструмент визуальной коммуникации, который помогает акцентировать внимание на элементах интерфейса. Существует хорошая статья о том, почему стоит использовать иконки — "Icons in Web Design". Но эта статья отвечает на другой вопрос — как их использовать ?
https://habr.com/ru/articles/919516/
#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss
