diff --git a/css/pseudo-private-custom-property/demos/products-demo/index.html b/css/pseudo-private-custom-property/demos/products-demo/index.html new file mode 100644 index 0000000000..077902786a --- /dev/null +++ b/css/pseudo-private-custom-property/demos/products-demo/index.html @@ -0,0 +1,50 @@ + + + + + + Products Demo + + + + +
+
+
+
+
+
+ + diff --git a/css/pseudo-private-custom-property/demos/text-demo/index.html b/css/pseudo-private-custom-property/demos/text-demo/index.html new file mode 100644 index 0000000000..4bb76f1660 --- /dev/null +++ b/css/pseudo-private-custom-property/demos/text-demo/index.html @@ -0,0 +1,86 @@ + + + + + + Document + + + + + + +

Lorem, ipsum dolor.

+ +
+
+

Lorem ipsum dolor sit amet.

+ +

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam unde + perspiciatis debitis corporis odit illo ducimus quasi qui saepe + consectetur, necessitatibus veritatis fugiat esse architecto delectus + exercitationem. Dolores recusandae officia quaerat illo. +

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit vero + aut, aliquid quas voluptatibus quos, libero soluta qui et odio + voluptatum dolor maiores veniam adipisci placeat facilis + necessitatibus ducimus hic repudiandae. Modi optio natus saepe + asperiores quos eligendi consequuntur, numquam fuga voluptatem sed + rerum. +

+
+
+ + diff --git a/css/pseudo-private-custom-property/demos/text-demo/style.css b/css/pseudo-private-custom-property/demos/text-demo/style.css new file mode 100644 index 0000000000..c09cd56a00 --- /dev/null +++ b/css/pseudo-private-custom-property/demos/text-demo/style.css @@ -0,0 +1,57 @@ +* { + box-sizing: border-box; +} + +[class*="static-font"] { + --_font-size: var(--font-size, 1em); + --_line-height: var(--line-height, calc(var(--_font-size) + 4px)); + + font-size: var(--_font-size); + line-height: var(--_line-height); +} + +.static-font__XL { + --font-size: 36px; + --line-height: 42px; + + @media (width <=1024px) and (width >=510px) { + --font-size: 30px; + --line-height: 36px; + } + + @media (max-width < 510px) { + --font-size: 26px; + --line-height: 30px; + } +} + +.static-font__L { + --font-size: 28px; + --line-height: 36px; + + @media (width <=1024px) and (width >=510px) { + --font-size: 24px; + --line-height: 30px; + } + + @media (max-width < 510px) { + --font-size: 18px; + --line-height: 20px; + } +} + +.static-font__M { + --font-size: 20px; + --line-height: 26px; + + @media (width <=1024px) and (width >=510px) { + --font-size: 18px; + --line-height: 22px; + } + + @media (max-width < 510px) { + --font-size: 16px; + --line-height: 20px; + } +} + diff --git a/css/pseudo-private-custom-property/index.md b/css/pseudo-private-custom-property/index.md new file mode 100644 index 0000000000..45ff9e4a70 --- /dev/null +++ b/css/pseudo-private-custom-property/index.md @@ -0,0 +1,62 @@ +--- +title: "Псевдоприватные кастомные свойства" +descriptioin: "Как создать миксины на чистом CSS." +authors: + - alex-andr-19 +related: + - tools/preprocessors + - css/layer + - css/cascade +tags: + - article +--- + +## Задача + +В силу перехода CSS к встроенной вложенности, а также из-за естественного развития CSS многие преимущества препроцессоров стали отходить на второй план. Появились [кастомные свойства](/css/custom-properties/), произошёл взрыв CSS-функций (`color-mix`, [`counter`](/css/css-counters/), тригонометрические функции и другие). + +Миксины — последняя причина держаться за препроцессоры. Некоторые особенности миксинов всё ещё заменить не получится. Но есть решение, которое заменит собой большую часть миксинов – _псевдоприватные кастомные свойства_. + +## Решение + +```html +
+
+
+
+
+
+
+``` + +```css +.product-list { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 12px; + + .product-list__item { + width: 100%; + aspect-ratio: 4/5; + } +} + +.product-card { + --_background-color: var(--background-color, #46ad8e); + --_border-color: var(--border-color, #ffffff); + + background-color: var(--_background-color); + border: 1px solid var(--_border-color); + border-radius: 12px; + + &.secondary { + --background-color: #999999; + } + + &.advertisment { + --background-color: #efcf2f; + } +} +``` + + diff --git a/people/alex-andr-19/index.md b/people/alex-andr-19/index.md new file mode 100644 index 0000000000..a5d7f6c957 --- /dev/null +++ b/people/alex-andr-19/index.md @@ -0,0 +1,6 @@ +--- +name: 'Алекс' +url: https://github.com/Alex-Andr-19 +badges: + - first-contribution-small +---