scss 转css

// SCSS 代码示例
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// 嵌套规则
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { 
    display: inline-block;
  }

  a {
    text-decoration: none;
    color: white;
    padding: 6px 12px;
    display: block;
  }
}

/* 转换后的 CSS 代码 */
body {
  font: 100% Helvetica, sans-serif;
  color: #3498db;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  text-decoration: none;
  color: white;
  padding: 6px 12px;
  display: block;
}

解释说明：

• SCSS 是 CSS 的一种扩展语言，提供了更多的功能如变量、嵌套、混合等。上面的 SCSS 代码中定义了两个变量 $primary-color 和 $font-stack，并在 body 中使用了这些变量。
• 嵌套规则：在 SCSS 中可以将 CSS 规则进行嵌套书写，使代码更加简洁和易读。例如 nav 下面的 ul、li 和 a 标签的样式都是嵌套在 nav 内部编写的。
• 转换为 CSS：当我们将 SCSS 编译成 CSS 后，所有的变量会被替换为实际值，嵌套规则也会被展开为标准的 CSS 语法。