Sass / Less 转 CSS

使用浏览器加载的编译器将 Sass 或 Less 源码转换为 CSS。

SASS 源码

自动换行

CSS 输出

自动换行

Sass 与 Less 常用写法

变量集中颜色值，嵌套规则使用 & 引用父选择器，混入可复用一组样式。

Sass：变量、嵌套与混入

使用 $变量 管理值，通过 @mixin 定义并以 @include 复用样式。

$primary: #0f766e;

@mixin pill($radius: 999px) {
  border-radius: $radius;
  padding: 8px 14px;
}

.button {
  @include pill;
  background: $primary;

  &:hover { background: #0d5e57; }
}

Less：变量、嵌套与混入

使用 @变量 管理值，以带参数的类选择器定义并调用混入。

@primary: #0f766e;

.pill(@radius: 999px) {
  border-radius: @radius;
  padding: 8px 14px;
}

.button {
  .pill();
  background: @primary;

  &:hover { background: darken(@primary, 8%); }
}

输入与输出示例

$color: red; .a { color: $color; }.a { color: red; }

如何使用

选择 Sass 或 Less。
输入源码。
点击编译为 CSS。

能力与限制

浏览器本地处理
不读取文件系统、不请求网络；导入外部文件的语法不会解析。

常见问题

源码会上传吗？: 不会。