Css预编译less、sass常用方法封装和使用案例

LESS 和 Sass 都是 CSS 预处理器，它们扩展了 CSS 的功能，允许使用变量、嵌套规则、混合（mixins）、函数等功能来使 CSS 更易于维护和扩展。以下是一些 LESS 和 Sass 的常用方法封装和使用案例。

变量

LESS:

@primary-color: #42b983;
@secondary-color: darken(@primary-color, 10%);

.container {
  color: @primary-color;
  border: 1px solid @secondary-color;
}

Sass:

$primary-color: #42b983;
$secondary-color: darken($primary-color, 10%);

.container {
  color: $primary-color;
  border: 1px solid $secondary-color;
}

混合（Mixins）

LESS:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
}

.box {
  .rounded-corners(10px);
}

Sass:

@mixin rounded-corners($radius: 5px) {
  border-radius: $radius;
}

.box {
  @include rounded-corners(10px);
}

函数

LESS:

.lighten(@color, @percentage) {
  return: lighten(@color, @percentage);
}

.background {
  background-color: .lighten(@primary-color, 20%);
}

Sass:

@function lighten($color, $amount) {
  @return lighten($color, $amount);
}

.background {
  background-color: lighten($primary-color, 20%);
}

循环

LESS:

.loop(@index) when (@index > 0) {
  .item-@{index} {
    width: (@index * 10px);
  }
  .loop(@index - 1);
}

.loop(5); // 将生成 5 个不同的 .item-N

Sass:

@for $i from 1 through 5 {
  .item-#{$i} {
    width: ($i * 10px);
  }
}

条件语句

LESS:

.box {
  height: 100px;
  & when (@primary-color = #42b983) {
    background-color: @primary-color;
  } 
  & when (isnumber(@secondary-color)) {
    border-color: @secondary-color;
  }
}

Sass:

.box {
  height: 100px;
  @if $primary-color == #42b983 {
    background-color: $primary-color;
  }
  @if type-of($secondary-color) == number {
    border-color: $secondary-color;
  }
}

继承

LESS:

.base {
  margin: 10px;
}

.derived {
  .base; // 继承 .base 的样式
  padding: 10px;
}

Sass (使用 @extend):

.base {
  margin: 10px;
}

.derived {
  @extend .base;
  padding: 10px;
}

使用案例

假设你正在为一个网页应用创建一个按钮样式，你可能会想要重用一些样式，并且根据不同的状态（如悬停、激活）改变样式。

LESS:

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid @primary-color;
  color: @primary-color;
  text-decoration: none;
  .rounded-corners;

  &:hover {
    background-color: @primary-color;
    color: white;
  }

  &:active {
    border-color: @secondary-color;
  }
}

.submit-btn {
  .btn;
  border-color: green;
}

Sass:

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid $primary-color;
  color: $primary-color;
  text-decoration: none;
  @include rounded-corners;

  &:hover {
    background-color: $primary-color;
    color: white;
  }

  &:active {
    border-color: $secondary-color;
  }
}

.submit-btn {
  @extend .btn;
  border-color: green;
}

在实际项目中，你可能还会使用 LESS 或 Sass 进行更高级的操作，如主题管理、响应式设计、CSS 动画等。预处理器的强大功能可以帮助你编写更高效、更易于维护的样式代码。

我的博客只写前端博文，点击我去看更多喜欢的前端博文，欢迎大家一起讨论学习！【https://blog.csdn.net/qq_29101285?spm=1011.2266.3001.5343】