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

Question

[Кирилл Зиннатуллпин]

Интересно узнать как лучше всего называть переменные отвечающие за размер шрифта (или за другие стили связанные с шрифтом, текстом), поэтому хотелось бы узнать как вы обычно их называете в своих проектах.

Comments

[Василий Банников]

Зачем придумывать умное, если можно очевидное?
Раз размер шрифта, то так и назови - font size

[Ankhena]

Ну или fz.
В принципе, сокращения принятые в emmet большинству понятны.

Answer 1

[Сергей delphinpro]

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;

Comments

[gazes12]

Сергей delphinpro, Это ваш css шаблон?

[Сергей delphinpro]

gazes12, нет. просто из проекта дернул

[iBird Rose]

Сергей delphinpro, есть какая-то причина, почему не css переменные?

[Сергей delphinpro]

iBird Rose, Где как.
Где-то scss переменные, где-то css
А где-то они совмещены:

@include __css-variables($global-css-variables, false);
@mixin __css-variables($vars, $in-element: true) {
    @each $theme in $themes {
        $variables: __extract-theme-map($vars, $theme);
        $theme-selector: __theme-selector($theme, null);

        @if ($theme-selector) {
            @if ($in-element) {
                #{$theme-selector} & { @include loop-css-variables($variables); }
            } @else {
                @at-root #{$theme-selector} {
                    @include loop-css-variables($variables);
                }
            }
        } @else {
            @if ($in-element) {
                @include loop-css-variables($variables);
            } @else {
                @at-root :root {
                    @include loop-css-variables($variables);
                }
            }
        }
    }
}

каждый проект индивидуален.

[iBird Rose]

Сергей delphinpro, ну просто, к примеру, те же цвета можно всегда использовать через css переменные. один раз задал и можно обращаться в любом css файле без импорта какого-то _variable.scss