Generate Boostrap like CSS spacing classes using SASS.
According to the documentation of Bootstrap 4 its spacing classes have the following format:
The classes are named using the format {property}{sides}-{size}
for xs
and {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, and xl
.
Where property
is one of:
m
- for classes that setmargin
p
- for classes that setpadding
Where sides
is one of:
t
- for classes that setmargin-top
orpadding-top
b
- for classes that setmargin-bottom
orpadding-bottom
l
- for classes that setmargin-left
orpadding-left
r
- for classes that setmargin-right
orpadding-right
x
- for classes that set both*-left
and*-right
y
- for classes that set both*-top
and*-bottom
- blank - for classes that set a
margin
orpadding
on all 4 sides of the element
Where size
is one of:
0
- for classes that eliminate themargin
orpadding
by setting it to0
1
- (by default) for classes that set themargin
orpadding
to$spacer * .25
2
- (by default) for classes that set themargin
orpadding
to$spacer * .5
3
- (by default) for classes that set themargin
orpadding
to$spacer
4
- (by default) for classes that set themargin
orpadding
to$spacer * 1.5
5
- (by default) for classes that set themargin
orpadding
to$spacer * 3
auto
- for classes that set themargin
to auto
Our focus is to generate all the css classes of the format {property}{sides}-{size}
.
For example:
m-0
tom-5
andm-auto
p-0
top-5
mt-0
,mb-0
,ml-0
,mr-0
tomt-5
,mb-5
,ml-5
,mr-5
andmt-auto
,mb-auto
,ml-auto
,mr-auto
pt-0
,pb-0
,pl-0
,pr-0
topt-5
,pb-5
,pl-5
,pr-5
mx-0
tomx-5
andmy-0
tomy-5
andmx-auto
,my-auto
px-0
topx-5
andpy-0
tomy-5
Notice, we are omitting {property}{sides}-{breakpoint}-{size}
pattern, which is not in the scope of this project.
If your project setup supports scss file, then you can copy the _spacing.scss
file from the src
directory into your project and import this file into your root style file using @use
rule.
// styles.scss file, in the same directory of _spaces.scss
@use "./spaces";
If you need compiled css, then you can copy the generated spacing.css
file from the dist
directory. However, you can install SASS on your machine and use the following command to generate spaces.css
file by yourself.
sass _spaces.scss spaces.css