#CSSVariables
LightNews LightNews
neweraofcoding.bsky.social
#CSSVariables
November 15, 2025 at 5:48 PM
nibushibu.social.vivaldi.net.ap.brid.gy
そしてこうなってくると、#Tailwind はもう #cssvariables だけでいいんじゃない？という気持ちにもなって、だったら #openprops のほうが使いやすいんだよなーという気持ちがある

Open Props: sub-atomic styles
https://open-props.style/
Open Props: sub-atomic styles
Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.
open-props.style
August 9, 2025 at 3:51 AM
fabloliv.bsky.social
Relative Colors in CSS

youtu.be/TI-OVY11HD4?...

#cssvariables #hsl
My NEW Favourite Way to Define COLORS in CSS
YouTube video by Coding2GO
youtu.be
July 4, 2025 at 8:21 AM
nibushibu.social.vivaldi.net.ap.brid.gy
#cssvariables をはじめ #css まわりの最近の進化はほんともっと注目されてよいと思っている。

#CSS ってなんか最近のフロントエンドでも「低レイヤーの話」みたいになっちゃってて、目新しいフレームワークっぽいシャレた名前もない「 #CSS の新機能！」っていっても、なんかいまいち盛り上がりきらない感があるような気がするんだけど、 #CSS はいま素で書くだけでもすごい強力になってきている（むしろフレームワークに寄らずに素の CSS 書きたい気持ちがある
April 22, 2025 at 12:50 AM
nibushibu.social.vivaldi.net.ap.brid.gy
#misskey :misskey: の中の人が #cssvariables とか #relativecolorsyntax について書いてくれてとても俺得な記事だった :amaze:
最近はここに #oklch 関数も組み込めるので、さらに進化が進んでいる…

CSS Variablesはここまで進化した
https://gihyo.jp/article/2025/04/misskey-19
CSS Variablesはここまで進化した | gihyo.jp
Misskeyでは2025年も大きな機能改修・リファクタリングに取り組んでいます。その中にCSS Variablesに関する作業もあったので、今回はその紹介も兼ねてMisskeyで使っている便利なテクニックなどを取り上げます。
gihyo.jp
April 22, 2025 at 12:42 AM
nibushibu.social.vivaldi.net.ap.brid.gy
🎨 明度・彩度・色相もそれぞれ変数化できる #cssvariables
🧮 特定の色を相対的に変化可能な #relativecolorsyntax
🌈 色をより人間の知覚に近い形で扱える #oklch

このあたりは、現存するどのデザインツールよりも、現在のブラウザーで使える #css の機能のほうが柔軟で拡張性が高い。

…あれ、ということはやっぱり最強のデザインツールは #CSS なのでは :vivaldia_1:
April 14, 2025 at 2:22 PM
pablolarah.bsky.social
🥤 Pure CSS Mixin for Displaying Values of Custom Properties
by Roman Komarov @[email protected]
#CSSVariables #CSSCounters #CSSLayers #Experiment #Practical #CSS #webdev #CSSMixin

kizu.dev/preview-mixin/
Red text "Pure CSS Mixin for Displaying Values of Custom Properties" with medium pink background on light pink background with illustrated magnifying glass on bottom right
February 6, 2025 at 2:14 AM
builderius.bsky.social
🚀 CSS Variables UX boost Sneek Peek!

Whether you're a keyboard warrior or mouse wrangler, selecting vars is now buttery smooth. Type '--' or click '+' and watch the magic happen. Making CSS customization faster than ever! ⚡️

#wordpress #pagebuilder #nocode #css #cssvariables
January 9, 2025 at 9:46 PM
thisbit.bsky.social
Wrapping up the working week with some tweaks of @builderius.bsky.social #cssvariables dropdown, available in every input. Tuning in all the interactions to get max workflow benefits out of the tool. <3

#wordpress #nocode #pagebuilder #css
An insider view in our figma file, showing css variables dropdown component, with tooltips, comments etc.
December 27, 2024 at 8:05 PM
builderius.bsky.social
#builderius Style Guide in the making. Easy, single place to set and preview your global styles (#cssvariables, #customproperties #CSSClasses, #selectors). 🥳🎨🎉

#webdesign #webdevelopment #WordPress #NoCode
December 21, 2024 at 10:52 AM
han05l8.bsky.social

《CSS 自定義屬性 - 打造品牌主題》

想讓網站換裝更輕鬆？CSS 變數是你的最佳助手！就像把網站穿搭交給專業的造型師 👔

整個網站的風格，就靠這些變數統一調配。需要改版？修改變數就搞定！

#前端開發 #CSS #CSSVariables #主題設計
:root { /* 品牌色系 */ --brand-primary: #4834d4; --brand-secondary: #686de0; --brand-accent: #be2edd; /* 間距系統 */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; /* 字體系統 */ --font-heading: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; } .card { font-family: var(--font-body); padding: var(--space-md); background: var(--brand-primary); border-radius: var(--space-xs); }
November 29, 2024 at 1:52 PM
han05l8.bsky.social
《CSS 變數 - 樣式重構的救星》

還在為了改個顏色要改 50 個檔案而抓狂嗎？CSS 變數來拯救你了！就像給你的寵物取暱稱一樣，我們也能幫 CSS 屬性取個好記的名字 🐱
}

想像一下，這就像是幫你的專案建立了一個「造型指揮中心」。需要全站換色系？一行代碼搞定！維護起來不要太輕鬆～
專業提示：善用 CSS 變數不只讓你的程式碼更乾淨，還能讓團隊合作更順暢。畢竟，誰不想要一個好維護的專案呢？

#前端開發 #CSS #CSSVariables #程式碼整潔之道
:root { --primary-color: #3498db; /* 主色調，想換就換！*/ --spacing-unit: 8px; /* 間距單位，一次到位 */ --border-radius: 4px; /* 圓角，統一好看 */ } .button { background: var(--primary-color); padding: calc(var(--spacing-unit) * 2); border-radius: var(--border-radius); box-shadow: 0 var(--spacing-unit) calc(var(--spacing-unit) * 2) rgba(0,0,0,0.1); }
November 20, 2024 at 1:10 AM
pablolarah.bsky.social
🟠 Querying the Color Scheme
by Roma Komarov
@[email protected]
#StyleQueries #ColorScheme #CSSVariables #css #webdev

blog.kizu.dev/querying-the...
On orange background: Small Black text: Querying the Big White text: Color Scheme
September 9, 2024 at 4:46 PM
anatudor.bsky.social
#tinyCSStip CSS vars more useful than data attrs for adding currency/ other pref/ suff.

⚠️
.v::after { content: attr(data-u) }
works iff you set data-u='€' attr on every single .v element

✅
.v::after { content: var(--u) }
works fine if you set --u:'€' only once on a wrapper

#CSS #cssVariables
September 3, 2024 at 10:43 AM
codepassion.bsky.social
Are you ready to take your CSS skills to the next level?
Discover the magic of CSS Variables and how they can revolutionize your web design process! 💻

Read Full Article- skillivo.in/css-variable...

#WebDesign #CSS #CSSVariables #WebDevelopment #WebDesignTips #CodePassion #Skillivo
August 29, 2024 at 5:56 AM
jay52-tx.bsky.social
@property: Next-Gen #CSSVariables Now with Universal Browser Support — The @property rule, part of the #CSSHoudini umbrella of APIs || #CSS #WebDev #FrontendDev
@property: Next-gen CSS variables now with universal browser support  |  Blog  |  web.dev
Semantic custom properties with @property just reached Baseline newly available.
bit.ly
August 20, 2024 at 2:35 PM
pablolarah.bsky.social
🔵The Times You Need A Custom @property Instead Of A CSS Variable
by Preethi Sam at @smashingmag
#CustomProperty #CSSvariables #css #webdev

www.smashingmagazine.com/2024/05/time...
White text on blue background: The Times You Need A Custom @property Instead Of A CSS Variable
May 15, 2024 at 2:26 PM
pablolarah.bsky.social
🟢🔴 Layered Toggles: Optional CSS Mixins
by Roma Komarov @[email protected] @kizmarh
#CSSLayers #CSSVariables #CSSLogic #StyleQueries #Experiment #Practical #CSS

kizu.dev/layered-togg...
Dark green text on pink background: "Layered Toggles: Optional CSS Mixins"
April 10, 2024 at 1:55 AM
pablolarah.bsky.social
🧪 An advanced way to use CSS variables
by Chris Ferdinandi @ChrisFerdinandi @[email protected]
#css #cssVariables #webdev

gomakethings.com/an-advanced-...
Black red text on pink background: An advanced way to use CSS variables
April 3, 2024 at 10:01 PM
pablolarah.bsky.social
🟪 -- CSS variables
by Chris Ferdinandi @ChrisFerdinandi
@[email protected]
#css #webdev #cssVariables
gomakethings.com/css-variables/
Violet text on lilac background: CSS variables
April 2, 2024 at 3:22 PM
pablolarah.bsky.social
Knobs - UI controllers for JS/CSS manipulation
by Yair Even Or
UI knobs controllers for JS/CSS live manipulation of various parameters
#js #knobs #controllers #CSSvariables #CustomProperties

github.com/yairEO/knobs
On click on black circle menu on top right, opens a black menu with multiple controllers including a color picker. White text on black: Number X Width px Height Width preset px 20 150 500 Align boxes Type & Hattibier Ba 200 nice pixels 500 Radius of the big square here % Box color Page background Hide boxes Knobs Self Parameters Compact View Space between knobs px Knobs Background Slider Color Text Color Custom HTML with label 12 Gel Knobs →
March 27, 2024 at 9:37 PM
pablolarah.bsky.social
▪️ The easiest way to get and set CSS Variables in JavaScript
by Zell Liew @zellwk
#css #CSSvariables #js #webdev

zellwk.com/blog/css-var...
Black text on white background: The easiest way to get and set CSS Variables in JavaScript
December 14, 2023 at 2:23 AM
mercury.photo
I implemented dark mode with an optional user override last week. Here’s how I did it:

#WordPress #SASS #SCSS #CSS #CSSvariables #ECMAScript2015 #JavaScript #PHP #darkmode

messengerwebdesign.com/2020/11/10/imp…
November 23, 2024 at 8:47 PM