罗莎 - CSS

罗莎（Rosa）是一种CSS预处理器，是基于Ruby编写的。它允许程序员编写更具表现力和可维护性的CSS样式。

特性

• 变量 - 用于存储和重复使用值和颜色。
• 嵌套规则 - 用于更清晰和组织良好的CSS样式表。
• 混合 - 用于在样式表中共享和重用属性集。
• 继承 - 使用@extend关键字，可将一个选择器中的样式应用于另一个选择器。
• 循环 - 可以处理一系列类似的规则。
• 函数 - 用于高级计算和生成动态属性。

示例

变量

$primary-color: #007bff;
$secondary-color: #6c757d;

.btn-primary {
  background-color: $primary-color;
  border-color: $primary-color;
}

.btn-secondary {
  background-color: $secondary-color;
  border-color: $secondary-color;
}

嵌套规则

.card {
  width: 100%;
  margin: {
    top: 1rem;
    right: 0;
    bottom: 1rem;
    left: 0;
  }

  .card-header {
    background-color: #007bff;
    color: #fff;
  }

  .card-body {
    padding: 1rem;
  }
}

混合

@mixin link-colors($normal, $hover) {
  color: $normal;
  &:hover {
    color: $hover;
  }
}

a {
  @include link-colors(#007bff, #0056b3);
}

继承

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out,
              background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;

  &.btn-primary {
    @extend .btn;
    background-color: #007bff;
  }

  &.btn-secondary {
    @extend .btn;
    background-color: #6c757d;
  }
}

循环

@for $i from 1 through 4 {
  .mx-#{$i} {
    margin-right: #{$i}rem;
    margin-left: #{$i}rem;
  }
}

函数

@function em($value, $base: 16) {
  @return ($value / $base) * 1em;
}

.container {
  font-size: em(18);
}

以上是罗莎的一些基本功能，如有需要，可以查阅更多资料。