今天分享一个自己的classScss文件,参考tailwind的添加的属性,对于不想导入tailwind的项目去使用。
样式基本是参考tailwind的样式,有条件的自己去继续添加。
tailwind基础数值是按1/4rem去计算的,我这是直接按照的百分比或则px去实现h、w、p、m的数值。
$num: 0;
@while $num <= 100 {
.p-#{$num} {
padding: #{$num}px !important;
}
.pt-#{$num} {
padding-top: #{$num}px !important;
}
.pb-#{$num} {
padding-bottom: #{$num}px !important;
}
.pl-#{$num} {
padding-left: #{$num}px !important;
}
.pr-#{$num} {
padding-right: #{$num}px !important;
}
.m-#{$num} {
margin: #{$num}px !important;
}
.mt-#{$num} {
margin-top: #{$num}px !important;
}
.mb-#{$num} {
margin-bottom: #{$num}px !important;
}
.ml-#{$num} {
margin-left: #{$num}px !important;
}
.mr-#{$num} {
margin-right: #{$num}px !important;
}
$num: $num + 5;
}
$pos: -20;
@while $pos <= 20 {
.top-#{$pos} {
top: #{$pos}px !important;
}
.bottom-#{$pos} {
bottom: #{$pos}px !important;
}
.left-#{$pos} {
left: #{$pos}px !important;
}
.right-#{$pos} {
right: #{$pos}px !important;
}
$pos: $pos + 5;
}
$spacing: 0;
@while $spacing <= 100 {
.w-#{$spacing} {
width: #{$spacing}px !important;
}
.h-#{$spacing} {
height: #{$spacing}px !important;
}
$spacing: $spacing + 5;
}
$percentage: 0;
@while $percentage <= 100 {
.w-#{$percentage}\% {
width: #{$percentage + '%'} !important;
}
.h-#{$percentage}\% {
height: #{$percentage + '%'} !important;
}
$percentage: $percentage + 5;
}
.w--unset {
width: unset !important;
}
.font-style {
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
html,
body {
height: 100% !important;
}
.select-none {
user-select: none !important;
}
.w-full {
width: 100% !important;
}
.h-full {
height: 100% !important;
}
.relative {
position: relative !important;
}
.absolute {
position: absolute !important;
}
.fixed {
position: fixed !important;
}
.flex {
display: flex !important;
}
.inline-block {
display: inline-block !important;
}
.text-center {
text-align: center !important;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.cursor-pointer {
cursor: pointer !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-nowrap {
flex-wrap: nowrap !important;
}
.flex-col {
flex-direction: column !important;
}
.flex-row {
flex-direction: row !important;
}
.justify-center {
justify-content: center !important;
}
.justify-between {
justify-content: space-between !important;
}
.justify-around {
justify-content: space-around !important;
}
.justify-evenly {
justify-content: space-evenly !important;
}
.items-baseline {
align-items: baseline !important;
}
.items-center {
align-items: center !important;
}
.items-stretch {
align-items: stretch !important;
}
.align-top {
vertical-align: top !important;
}
.align-middle {
vertical-align: middle !important;
}
.align-bottom {
vertical-align: bottom !important;
}
这是colors文件,需要导入就使用,这将会多余解析1500行格式化后的代码,
$Slate: (
100: #f1f5f9,
200: #e2e8f0,
300: #cbd5e1,
400: #94a3b8,
500: #64748b,
600: #475569,
700: #334155,
800: #1e293b,
900: #0f172a,
);
$Gray: (
100: #f3f4f6,
200: #e5e7eb,
300: #d1d5db,
400: #9ca3af,
500: #6b7280,
600: #4b5563,
700: #374151,
800: #1f2937,
900: #111827,
);
$Zinc: (
100: #f4f4f5,
200: #e4e4e7,
300: #d4d4d8,
400: #a1a1aa,
500: #71717a,
600: #52525b,
700: #3f3f46,
800: #27272a,
900: #18181b,
);
$Neutral: (
100: #f5f5f5,
200: #e5e5e5,
300: #d4d4d4,
400: #a3a3a3,
500: #737373,
600: #525252,
700: #404040,
800: #262626,
900: #171717,
);
$Stone: (
100: #f5f5f4,
200: #e7e5e4,
300: #d6d3d1,
400: #a8a29e,
500: #78716c,
600: #57534e,
700: #44403c,
800: #292524,
900: #1c1917,
);
$Red: (
100: #fee2e2,
200: #fecaca,
300: #fca5a5,
400: #f87171,
500: #ef4444,
600: #dc2626,
700: #b91c1c,
800: #991b1b,
900: #7f1d1d,
);
$Orange: (
100: #ffedd5,
200: #fed7aa,
300: #fdba74,
400: #fb923c,
500: #f97316,
600: #ea580c,
700: #c2410c,
800: #9a3412,
900: #7c2d12,
);
$Amber: (
100: #fef3c7,
200: #fde68a,
300: #fcd34d,
400: #fbbf24,
500: #f59e0b,
600: #d97706,
700: #b45309,
800: #92400e,
900: #78350f,
);
$Yellow: (
100: #fef9c3,
200: #fef08a,
300: #fde047,
400: #facc15,
500: #eab308,
600: #ca8a04,
700: #a16207,
800: #854d0e,
900: #713f12,
);
$Lime: (
100: #ecfccb,
200: #d9f99d,
300: #bef264,
400: #a3e635,
500: #84cc16,
600: #65a30d,
700: #4d7c0f,
800: #3f6212,
900: #365314,
);
$Green: (
100: #dcfce7,
200: #bbf7d0,
300: #86efac,
400: #4ade80,
500: #22c55e,
600: #16a34a,
700: #15803d,
800: #166534,
900: #14532d,
);
$Emerald: (
100: #d1fae5,
200: #a7f3d0,
300: #6ee7b7,
400: #34d399,
500: #10b981,
600: #059669,
700: #047857,
800: #065f46,
900: #064e3b,
);
$Teal: (
100: #ccfbf1,
200: #99f6e4,
300: #5eead4,
400: #2dd4bf,
500: #14b8a6,
600: #0d9488,
700: #0f766e,
800: #115e59,
900: #134e4a,
);
$Cyan: (
100: #cffafe,
200: #a5f3fc,
300: #67e8f9,
400: #22d3ee,
500: #06b6d4,
600: #0891b2,
700: #0e7490,
800: #155e75,
900: #164e63,
);
$Sky: (
100: #e0f2fe,
200: #bae6fd,
300: #7dd3fc,
400: #38bdf8,
500: #0ea5e9,
600: #0284c7,
700: #0369a1,
800: #075985,
900: #0c4a6e,
);
$Blue: (
100: #dbeafe,
200: #bfdbfe,
300: #93c5fd,
400: #60a5fa,
500: #3b82f6,
600: #2563eb,
700: #1d4ed8,
800: #1e40af,
900: #1e3a8a,
);
$Indigo: (
100: #e0e7ff,
200: #c7d2fe,
300: #a5b4fc,
400: #818cf8,
500: #6366f1,
600: #4f46e5,
700: #4338ca,
800: #3730a3,
900: #312e81,
);
$Violet: (
100: #ede9fe,
200: #ddd6fe,
300: #c4b5fd,
400: #a78bfa,
500: #8b5cf6,
600: #7c3aed,
700: #6d28d9,
800: #5b21b6,
900: #4c1d95,
);
$Purple: (
100: #f3e8ff,
200: #e9d5ff,
300: #d8b4fe,
400: #c084fc,
500: #a855f7,
600: #9333ea,
700: #7e22ce,
800: #6b21a8,
900: #581c87,
);
$Fuchsia: (
100: #fae8ff,
200: #f5d0fe,
300: #f0abfc,
400: #e879f9,
500: #d946ef,
600: #c026d3,
700: #a21caf,
800: #86198f,
900: #701a75,
);
$Pink: (
100: #fce7f3,
200: #fbcfe8,
300: #f9a8d4,
400: #f472b6,
500: #ec4899,
600: #db2777,
700: #be185d,
800: #9d174d,
900: #831843,
);
$Rose: (
100: #ffe4e6,
200: #fecdd3,
300: #fda4af,
400: #fb7185,
500: #f43f5e,
600: #e11d48,
700: #be123c,
800: #9f1239,
900: #881337,
);
$colors: (
slate: $Slate,
gray: $Gray,
zinc: $Zinc,
neutral: $Neutral,
stone: $Stone,
red: $Red,
orange: $Orange,
amber: $Amber,
yellow: $Yellow,
lime: $Lime,
green: $Green,
teal: $Teal,
cyan: $Cyan,
sky: $Sky,
blue: $Blue,
indigo: $Indigo,
violet: $Violet,
purple: $Purple,
fuchsia: $Fuchsia,
pink: $Pink,
rose: $Rose,
);
$num: 100;
@while $num <= 900 {
@each $key, $val in $colors {
#{$key} {
@at-root .text-#{&}-#{$num} {
color: map-get($val, $num) !important;
}
@at-root .bg-#{&}-#{$num} {
background-color: map-get($val, $num) !important;
}
}
}
$num: $num + 100;
}
colors 效果
color色卡去掉了所有的50的值