Перейти к содержимому
🛠️ToolsShed

Генератор CSS-переменных

Создавайте пользовательские CSS-свойства (переменные) с помощью визуального редактора. Генерируйте блоки :root с выбором цвета и предустановками.

1 переменных

Об этом инструменте

Пользовательские свойства CSS (переменные CSS) — это многократно используемые значения, которые вы можете определить один раз и использовать во всех своих таблицах стилей. Вместо того чтобы жёстко закодировать цвета, размеры или другие значения непосредственно в CSS, вы можете сохранить их как переменные в блоке :root и ссылаться на них с помощью синтаксиса var(--name). Это облегчает поддержание согласованных токенов дизайна во всём проекте и упрощает глобальное изменение темы—просто обновите значение переменной, и изменение применится везде, где она используется.

С помощью этого генератора переменных CSS вы можете визуально создавать и организовывать пользовательские свойства без ручного написания кода. Добавляйте переменные по одной, выбирайте из предустановленных шаблонов тем для тёмного режима, светлого режима или корпоративных цветов, затем укажите имя, тип (цвет, размер, число или строка) и значение для каждой переменной. Инструмент автоматически форматирует вывод как действительный блок CSS :root с встроенными комментариями, показывающими, как использовать каждую переменную в ваших стилях. После создания вы можете скопировать CSS прямо в буфер обмена или скачать его как файл.

Этот инструмент особенно полезен для создания систем дизайна, управления многобрендовыми темами или управления согласованными масштабами интервалов и типографики. Независимо от того, создаёте ли вы небольшой веб-сайт или большую библиотеку компонентов, наличие централизованного набора переменных CSS снижает дублирование кода и делает обновления дизайна быстрее и надёжнее.

Часто задаваемые вопросы

Реализация кода

# Generate CSS :root block from a dictionary of variables
def generate_css_variables(variables: dict) -> str:
    lines = [":root {"]
    for name, value in variables.items():
        var_name = name if name.startswith("--") else f"--{name}"
        lines.append(f"  {var_name}: {value};")
    lines.append("}")
    return "\n".join(lines)

# Example: dark mode theme
dark_theme = {
    "--bg-primary": "#0f0f0f",
    "--bg-secondary": "#1a1a1a",
    "--text-primary": "#ffffff",
    "--text-secondary": "#a0a0a0",
    "--accent": "#6366f1",
    "--border-radius": "8px",
    "--font-size-base": "16px",
}

print(generate_css_variables(dark_theme))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.