SCSS/Less/Sass vs <?php header("Content-type: text/css");

Question

我是一名长期的 PHP 开发人员，虽然我用 CSS 做了很多聪明的事情，但我从未真正深入研究过 SCSS/Less/Sass。

在 LAMP 堆栈中工作，我从未见过任何来自 SCSS/Less/Sass 的东西，只是让我的“css 文件”成为一个 .php 文件，我无法做得更好

<?php
header("Content-type: text/css");
/* Variables to be used in the following CSS heredoc */
echo <<< CSS
/* Lots of CSS code here that grabs calculated variables when I need them */
CSS;
?>

在 LAMP 堆栈中，我觉得这比安装额外的 SCSS/Less/Sass 编译器并遵循它们的语法更加通用和直接，并且它允许完整的语言发挥作用。

然而，我看到 SCSS/Less/Sass 一直在 LAMP 堆栈中使用，除了我自己和少数其他人之外，我几乎从未见过使用头技术。我已经尝试了 SCSS/Less/Sass 几次，只是对这些限制感到恼火。我错过了什么？

有哪些 SCSS/Less/Sass 提供的功能是通过创建带有 css 标头声明的 PHP 文件而缺少的？

（我自己发现的唯一一个是旧版本的 IE 会坚持将 .php 扩展名视为 - 不是 - 一个 css 文件，但这很容易通过一两行 .htaccess 来解决重定向，

但这种轻微的一次性不便似乎并不能抵消功能损失？）。

Answer 1

Sass 可以处理的不仅仅是变量。如果您认为这是 Sass 的唯一/主要好处，

你really want to dig into the docs a bit more。

首先，最有用的功能之一是允许原生 CSS 不允许的嵌套。这使您可以按逻辑方式对规则进行分组，因此：

#main {
    // some rules
}

#main .p {
    // some more rules
}

变得更清晰（更重要的是，从逻辑/可读性的角度来看，更清晰）：

#main {
    // some rules

    p {
        // some rules just for paragraphs
    }
}

将伪类及其元素逻辑分组也很方便：

a {
    // some rules

    &:hover {
        // some rules just for the hover
    }
}

与上述相同的方法也可以用于媒体查询。非常方便：

#foo {
    // some rules

    @media screen and (max-width: 320px) {
        // some media queried rules
    }
}

或者对于数学，PHP 无法原生处理（下面是一个明显人为的示例，但这种事情可以非常有用）：

width: 1px + 1px + 1px;

颜色数学：

>> #777 + #777
#eeeeee

您必须在 PHP 中复制各种各样的built-in functions。根据我的经验，彩色的可能非常有用。

最后一点：我见过的大多数走 PHP-as-CSS 路线的人不会对其进行任何类型的缓存，需要 PHP 每次都生成 CSS。 Sass 编译成 static 文件，这在您的服务器上更容易。