Как вы называете свои переменные в css?

Интересно узнать как лучше всего называть переменные отвечающие за размер шрифта (или за другие стили связанные с шрифтом, текстом), поэтому хотелось бы узнать как вы обычно их называете в своих проектах.
  • Вопрос задан
  • 139 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
spoiler
//==
//== Main settings
//== ======================================= ==//

$cLightGrey: #f0f3f7;

$cPurple: #525fce;
$cPurpleDarken: adjust_hue(desaturate(darken($cPurple, 17%), 5%), 4); // #313598;

$cRed: #ed1c24;
$cRedLight: #dd4845;

$cDeepOrange: #f14e12;

$cYellow: #f9d444;

$cBlue: #4997d4;
$cBlueLt: #6DA5E7;

$cGreen: #119f4e;
$cGreenLight: #9ffcad;
$cGreen2: #00c454;
$cGreen4: #27b761;
$cGreen3: #41be64;


$cGradientGreen: #3ea070;
$cGradientBlue: #1a5994;

$cMuted: #8994a0;

$cTextDefault: #292929;
$cTextDarken: darken($cTextDefault, 6%); // #1a1a1a
$cTextLight: #c0c6d7;
$cTextGray: #909090;

$bgBody: #ffffff;

$hr-border: #eeeeee;

$cLinkDefault: $cTextDefault;
$cLinkDefaultHover: $cRed;

$cLinkPurple: $cPurple;

$menu-button-color: $cPurple;

$fontStackRoboto: Roboto, Arial, Helvetica, sans-serif;
$fontStackGilroy: Gilroy, 'Arial Black', sans-serif;

$fontStackDefault: $fontStackRoboto;
$fontStackHeadings: $fontStackGilroy;

$shadowLight: 0 2px 3px rgba(0, 0, 0, 0.2);
$shadowLightUp: 0 -2px 3px rgba(0, 0, 0, 0.2);
$shadowBox: 0 3px 21px rgba(0, 0, 0, 0.1);

$mobile-menu-transition: 0.5s ease;

$header-additional-height: $rhythm-base-line-height * 1.25;
$header-height-small: $rhythm-base-line-height * 2;
$header-buttons-size: $header-height-small - 3px * 2;
$header-height-expanded: $rhythm-base-line-height * 3.75;
$header-v-padding: ($header-height-expanded - $header-height-small) / 2;
$header-spacer-height-small: $header-height-small + $header-additional-height;
$header-spacer-height-expanded: $header-height-expanded + $header-additional-height;

$header-container-gutters: (
  //xs: map_get($grid-gutter-widths, xs),
  //sm: map_get($grid-gutter-widths, sm),
  //  md: map_get($grid-gutter-widths, md),
    lg: map_get($grid-gutter-widths, lg),
    xl: map_get($grid-gutter-widths, xl),
);
$header-container-widths: (
  //sm: 540px,
  //  md: 720px,
    lg: map_get($container-max-widths, lg),
    xl: map_get($container-max-widths, xl),
);

$input-height: 50px;

$section-container-padding: 4.5;
$section-container-padding-half: 3;

//==
//== Clipping
//== ======================================= ==//

$clip-path-deep: 1; // 30px

//==
//== Headings
//==
//== 1. font-size
//== 2. line-height
//== 3. margin-top
//== 4. margin-bottom
//== 5. text-transform
//== ======================================= ==//

$headings: (
    h1: (43px, 2, 0, 1, uppercase),
    h2: (36px, 2, 0, 1, uppercase),
    h3: (24px, 1, 0, 1, uppercase),
    h4: (20px, 1, 0, 0, uppercase),
    h5: (18px, 1, 0, 0, uppercase),
    h6: (16px, 1, 0, 0, none,),
);

//==
//== Misc. components
//== ======================================= ==//

$case-text-preview-width: 82px;
$logo-base-width: 135px;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы