Python实现css代码压缩

废话不多说，上代码

import re
def compress_css(css):css=re.sub(r"/\*.*?\*/","",css,flags=re.DOTALL);css=re.sub(r"\s+"," ",css);css=re.sub(r"(}\s*)\n\s*@","@",css);css=re.sub(r"(}\s*)\n\s*","\n",css);css=re.sub(r"(;)?( )?}( )?","}",css);css=re.sub(r"( )?{( )?","{",css);css=re.sub(r"( )?:( )?",":",css);css=re.sub(r"( )?;( )?",";",css);css=re.sub(r"( )?\(( )?","(",css);css=re.sub(r"( )?\)( )?",")",css);css=re.sub(r"( )?\,( )?",",",css);css=re.sub(r":(:)?",":",css);return css.strip()

使用实例

original_css = """
:root {
  --primary: #6b5bfd;
  --greyLight: #cdd5f7;
  --greyLight-2: #f8f9ff;
  --greyDark: #646b8a;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  overflow-y: scroll;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.6px;
  line-height: 1.4;
  -webkit-user-select: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--greyLight-2);
  color: var(--greyDark);
}

ul {
  list-style-type: none;
}

.items-list {
  max-width: 90vw;
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 3rem;
  justify-content: center;
  align-content: center;
}
@media only screen and (max-width: 600px) {
  .items-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.item {
  width: 10rem;
  height: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--greyDark);
  cursor: pointer;
}
.item span {
  background: #ffffff;
  box-shadow: 0 0.8rem 2rem rgba(90, 97, 129, 0.05);
  border-radius: 0.6rem;
  padding: 2rem;
  font-size: 3rem;
  transition: all 0.3s ease;
}
.item:hover span {
  transform: scale(1.2);
  color: var(--primary);
}
.item p {
  font-size: 1.2rem;
  margin-top: 1rem;
  color: var(--greyLight);
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  margin: 3rem;
  border-radius: 0.6rem;
  background: #ffffff;
  box-shadow: 0 0.8rem 2rem rgba(90, 97, 129, 0.05);
}
.page__numbers, .page__btn, .page__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.8rem;
  font-size: 1.4rem;
  cursor: pointer;
}
.page__dots {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--greyLight);
  cursor: initial;
}
.page__numbers {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.4rem;
}
.page__numbers:hover {
  color: var(--primary);
}
.page__numbers.active {
  color: #ffffff;
  background: var(--primary);
  font-weight: 600;
  border: 1px solid var(--primary);
}
.page__btn {
  color: var(--greyLight);
  pointer-events: none;
}
.page__btn.active {
  color: var(--greyDark);
  pointer-events: initial;
}
.page__btn.active:hover {
  color: var(--primary);
}
"""
 
compressed_css = compress_css(original_css)
print(compressed_css)

效果

使用前

:root {
  --primary: #6b5bfd;
  --greyLight: #cdd5f7;
  --greyLight-2: #f8f9ff;
  --greyDark: #646b8a;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  overflow-y: scroll;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.6px;
  line-height: 1.4;
  -webkit-user-select: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--greyLight-2);
  color: var(--greyDark);
}

ul {
  list-style-type: none;
}

.items-list {
  max-width: 90vw;
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 3rem;
  justify-content: center;
  align-content: center;
}
@media only screen and (max-width: 600px) {
  .items-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.item {
  width: 10rem;
  height: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--greyDark);
  cursor: pointer;
}
.item span {
  background: #ffffff;
  box-shadow: 0 0.8rem 2rem rgba(90, 97, 129, 0.05);
  border-radius: 0.6rem;
  padding: 2rem;
  font-size: 3rem;
  transition: all 0.3s ease;
}
.item:hover span {
  transform: scale(1.2);
  color: var(--primary);
}
.item p {
  font-size: 1.2rem;
  margin-top: 1rem;
  color: var(--greyLight);
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  margin: 3rem;
  border-radius: 0.6rem;
  background: #ffffff;
  box-shadow: 0 0.8rem 2rem rgba(90, 97, 129, 0.05);
}
.page__numbers, .page__btn, .page__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.8rem;
  font-size: 1.4rem;
  cursor: pointer;
}
.page__dots {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--greyLight);
  cursor: initial;
}
.page__numbers {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.4rem;
}
.page__numbers:hover {
  color: var(--primary);
}
.page__numbers.active {
  color: #ffffff;
  background: var(--primary);
  font-weight: 600;
  border: 1px solid var(--primary);
}
.page__btn {
  color: var(--greyLight);
  pointer-events: none;
}
.page__btn.active {
  color: var(--greyDark);
  pointer-events: initial;
}
.page__btn.active:hover {
  color: var(--primary);
}

使用后

:root{--primary:#6b5bfd;--greyLight:#cdd5f7;--greyLight-2:#f8f9ff;--greyDark:#646b8a}*,*:before,*:after{margin:0;padding:0;box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%;overflow-y:scroll;font-family:"Poppins", sans-serif;letter-spacing:0.6px;line-height:1.4;-webkit-user-select:none;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased}.container{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--greyLight-2);color:var(--greyDark)}ul{list-style-type:none}.items-list{max-width:90vw;margin:2rem;display:grid;grid-template-columns:repeat(5, 1fr);grid-gap:3rem;justify-content:center;align-content:center}@media only screen and(max-width:600px){.items-list{grid-template-columns:repeat(2, 1fr)}}.item{width:10rem;height:10rem;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--greyDark);cursor:pointer}.item span{background:#ffffff;box-shadow:0 0.8rem 2rem rgba(90, 97, 129, 0.05);border-radius:0.6rem;padding:2rem;font-size:3rem;transition:all 0.3s ease}.item:hover span{transform:scale(1.2);color:var(--primary)}.item p{font-size:1.2rem;margin-top:1rem;color:var(--greyLight)}.page{display:flex;justify-content:center;align-items:center;height:5rem;margin:3rem;border-radius:0.6rem;background:#ffffff;box-shadow:0 0.8rem 2rem rgba(90, 97, 129, 0.05)}.page__numbers, .page__btn, .page__dots{display:flex;justify-content:center;align-items:center;margin:0.8rem;font-size:1.4rem;cursor:pointer}.page__dots{width:2.6rem;height:2.6rem;color:var(--greyLight);cursor:initial}.page__numbers{width:2.6rem;height:2.6rem;border-radius:0.4rem}.page__numbers:hover{color:var(--primary)}.page__numbers.active{color:#ffffff;background:var(--primary);font-weight:600;border:1px solid var(--primary)}.page__btn{color:var(--greyLight);pointer-events:none}.page__btn.active{color:var(--greyDark);pointer-events:initial}.page__btn.active:hover{color:var(--primary)}