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

Question

我是一名 long-time PHP 开发人员，虽然我用 CSS 做了很多聪明的事情，但我从未真正深入 SCSS/Less/Sass.

在 LAMP 堆栈中工作，我从来没有从 SCSS/Less/Sass 中看到任何我无法通过让我的 "css file" 成为 .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 堆栈中使用，而 header 技术我几乎从未见过，除了我自己和少数其他人。我已经 SCSS/Less/Sass 都尝试了几次，只是对这些限制感到恼火。我错过了什么？

SCSS/Less/Sass 提供的哪些功能仅通过创建带有 css header 声明的 PHP 缺少？

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

但是 one-time 的小不便似乎并不能抵消功能的损失？）。

Answer 1

Sass 可以处理的不仅仅是变量。如果您认为这是 Sass、

的 only/main 好处

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

首先，最有用的功能之一是允许嵌套，而本机 CSS 不允许。这可以让您以合乎逻辑的方式对规则进行分组，因此：

#main {
    // some rules
}

#main .p {
    // some more rules
}

变得更清洁（更重要的是，从 logical/readability 的角度来看，更清洁）：

#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 文件，这在您的服务器上更容易。

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

What are advantageous features are in SCSS/Less/Sass vs <?php header("Content-type: text/css");

css

php

sass

less