【问题标题】:How can I reduce the CSS to a few properties如何将 CSS 减少到几个属性
【发布时间】:2015-04-08 07:23:11
【问题描述】:

如何使用 PHP 减少 CSS/(或)LESS? 从此:

.header-logo-holder{
    display: block;
    float: none;
    text-align: center;
    margin: 10px 0;
    color: #fff;
    background: #333;
    padding-bottom: 15px;
    border-bottom: 1px solid darken(@rw-header-background-color, 10%);
    .logo{
        margin: 0;
    }
    .eg-clearfix();
}

到这里:

.header-logo-holder{
    color: #fff;
    background: #333;
    border-bottom: 1px solid darken(@rw-header-background-color, 10%);
}

我只想留下规则颜色、背景和边框。

【问题讨论】:

  • 如果我理解正确,你有第一个 css,但想通过 PHP 删除一些行?
  • 为什么要用 PHP 删除 CSS?如果您的 CSS/Less 是独立的(应该是),您可以在 CSS/Less 中删除 CSS。
  • 我找到了解决方案,但问题出在.logo { ... } 部分。但是你为什么要这样做呢?
  • 永远,我想将 CSS 最小化为只有颜色。这样我就可以在不涉及其他样式的情况下创建不同的配色方案。

标签: php css regex less


【解决方案1】:

这是我的解决方案:

<?php

//give the file (string) to the function
function keepColorBackgroundBorder($input) {

    //didn't check if the input was correct (string, not empty, etc)

    //we turn the input into an array
    $input = explode("\n", $input);

    //here is the list of strings which must be in a line to keep it in our final string
    $keep = ['{', '}', 'color', 'background', 'border'];

    $result = '';

    //foreach over the lines of the input
    foreach ($input as $key => $value) {

        //foreach over each characters we want to keep
        foreach ($keep as $key => $value2) {

            //if the characters are somewhere in the line
            if (strpos($value, $value2) !== false) {

                //we add the line + a newline character
                $result .= $value . "\n";

                //we stop the check for characters as we don't want a line to be included twice
                //e.g: border-bottom: 1px solid darken(@rw-header-background-color, 10%);
                //this example contains border and background
                break;
            }
        }
    }

    //we return the result, end delete the last newline character
    return trim($result);
}

//we get the file as a string
$input = file_get_contents('file.css');

//we call the function and we look at what was outputted
echo keepColorBackgroundBorder($input);

cmets可能太多了,但是太多总比不够好。

我使用了一个数组,以便您可以轻松更改。例如,您可以使用['background:', 'border:', 'border-bottom:'] 等来确保如果一行在开头以外的位置包含允许的单词,则不包含该行,例如包含background 但不包含background:border-bottom: 1px solid darken(@rw-header-background-color, 10%);

如果file.css 包含:

.header-logo-holder{
    display: block;
    float: none;
    text-align: center;
    margin: 10px 0;
    color: #fff;
    background: #333;
    padding-bottom: 15px;
    border-bottom: 1px solid darken(@rw-header-background-color, 10%);
    .logo{
        margin: 0;
    }
    .eg-clearfix();
}

你会得到:

.header-logo-holder{
    color: #fff;
    background: #333;
    border-bottom: 1px solid darken(@rw-header-background-color, 10%);
    .logo{
    }
}

【讨论】:

  • 看起来还不错。我自己也找到了解决方案,但它仍然需要手动删除一些元素。它与您的非常相似。 :) 无论如何,谢谢你的帮助。 ;) 干杯。
  • @Smartik 很高兴为您提供帮助。编辑了我的答案以添加一些细节。我不知道LESS,但我不认为.logo { } 实际上不是问题。
猜你喜欢
  • 2013-04-23
  • 2015-11-12
  • 2013-06-11
  • 2020-05-23
  • 2022-12-18
  • 2019-07-23
  • 2015-03-30
  • 2017-09-29
  • 1970-01-01
相关资源
最近更新 更多