diff options
Diffstat (limited to 'doc/development/fe_guide/style/scss.md')
-rw-r--r-- | doc/development/fe_guide/style/scss.md | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/doc/development/fe_guide/style/scss.md b/doc/development/fe_guide/style/scss.md index ffaaa3e87c7..5d5b250e9a9 100644 --- a/doc/development/fe_guide/style/scss.md +++ b/doc/development/fe_guide/style/scss.md @@ -133,6 +133,40 @@ Before adding a new variable for a color or a size, guarantee: - There isn't an existing one. - There isn't a similar one we can use instead. +### Using `extend` at-rule + +Usage of the `extend` at-rule is prohibited due to [memory leaks](https://gitlab.com/gitlab-org/gitlab/-/issues/323021) and [the rule doesn't work as it should to](https://sass-lang.com/documentation/breaking-changes/extend-compound). Use mixins instead: + +```scss +// Bad +.gl-pt-3 { + padding-top: 12px; +} + +.my-element { + @extend .gl-pt-3; +} + +// compiles to +.gl-pt-3, .my-element { + padding-top: 12px; +} + +// Good +@mixing gl-pt-3 { + padding-top: 12px; +} + +.my-element { + @include gl-pt-3; +} + +// compiles to +.my-element { + padding-top: 12px; +} +``` + ## Linting We use [stylelint](https://stylelint.io) to check for style guide conformity. It uses the |