scss转css在线

// 示例 SCSS 代码
$primary-color: #3498db;
$font-size: 16px;

body {
  font-size: $font-size;
  color: darken($primary-color, 10%);
}

.button {
  background-color: $primary-color;
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  font-size: $font-size;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

/* 转换后的 CSS 代码 */
body {
  font-size: 16px;
  color: #2e8ccb;
}

.button {
  background-color: #3498db;
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  font-size: 16px;
}

.button:hover {
  background-color: #2e8ccb;
}

解释说明：

1. SCSS 变量：在 SCSS 中，我们使用 $ 符号定义变量。例如，$primary-color 和 $font-size 分别定义了主要颜色和字体大小。
2. 嵌套规则：SCSS 支持嵌套的 CSS 规则，使得代码更简洁。例如，.button 类中的 &:hover 表示当按钮悬停时的样式。
3. 函数：SCSS 提供了一些内置函数，如 darken()，用于调整颜色的深浅。
4. 转换结果：通过在线工具或编译器，SCSS 代码可以被转换为标准的 CSS 代码，浏览器可以直接解析和应用这些 CSS 样式。