1.1.0 โข Published 1 year ago
@fighting-design/fighting-theme v1.1.0
@fighting-design/fighting-theme
English | Chinese
๐ณ Introduction
Theme style directory of fighting-design
๐ฆฉ Catalog Description
โโโ config Some style definitions common to components, such as type, etc
โโโ src Main style sheet storage directory of each component
โโโ index.scss The main style entry file is also a package entry file
โโโ package.json package.json
โโโ README.en-US.md README.en-US.md
โโโ README.md README.md
๐ง Rule
- Create a new
*.scss
with the same component name in thesrc
directory file to develop component style sheets - At the main entrance
index.scss
You need to import your new*.scss
files are provided for use - Is not allowed in the style
!important
- The file names are connected by a short horizontal bar, and no uppercase letters are allowed
- In the
src/*
directory, it is the*.scss
file - In the
config/*
directory, there are some configuration variable files of components. The configuration files of components are all namedvar-component-name.scss
. The global configuration file usesconst-***.scss
Naming
๐ฟ๏ธ Unique Style
Each component will have a unique style, such as f-button
,f-icon
, etc. In order to avoid style conflicts, you need to strictly restrict the pollution of its internal style or peer style to other components.
For example, in the FButton
component, the round corner attribute can be configured through the round
attribute. The pseudo code is as follows:
<button
:class="[
'f-button',
{ 'f-button-round': round }
]"
>
ๆ้ฎ็ปไปถ
</button>
Because there will be a unique class
in a component, that is,f-button
, then f-button
should also be added in front of the f-button__round
attribute to prevent style pollution.
Negative example:
.f-button {
/* */
}
.f-button__round {
border-radius: 4px;
}
Positive examples:
.f-button {
/* */
}
.f-button.f-button__round {
border-radius: 4px;
}
๐ฆ Import
The following methods can be used anywhere in the world
import '@fighting-design/fighting-theme'