Question

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

在LAMP堆栈中工作，我从未见过SCSS / Less / Sass中的任何内容，因为只有我的＆＃34; css文件＆＃34;才能做得更好。是

的.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编译为静态文件，这在您的服务器上更容易。

什么是有利的功能在SCSS / Less / Sass vs <！ - ？php header（“Content-type：text / css”）;

1 个答案: