README

Stylize是一个CSS预处理器，使用来自SASS（版本3.x）的Scss语法，并增加了额外功能。
如果您不熟悉这种语言，可以参考SASS的基本文档。这里我将仅描述PHP API和Stylize的独家功能。源代码源自优秀的leafo-scssphp。

对SCSS的额外功能

基本用法

编译器

$scss = new \\RedCat\\Stylize\\Compiler();  
$scss->setImportPaths(['css']);  
$scss->addImportPath('redcat/css');  
$scss->compile(file_get_contents('css/style.scss'));

服务器

服务器将处理缓存，并且仅在文件已更改时重建它。它还通过Etag和Last-Modified处理HTTP。默认情况下，如果存在，还包括"_config.scss"和"_var.scss"。它将使用默认的缓存目录".tmp/stylish/"，该目录位于当前工作目录中，并且需要可写（chmod 0777）。

$server = new \\RedCat\\Stylize\\Server();  
$directories = ['css','redcat/css'];  
$server->serveFrom('style.scss',$directories);

PHP支持

PHP将在SCSS语法解析器之前执行。
通过tokenizer，PHP支持允许您使用简短的PHP语法，即使php.ini中的short_open_tag未启用。

嵌套

$img-path: '<?=$img_path?>' !default;  
  
<?if($bool){?>  
    // here is your scss code  
<?}?>  
  
<?foreach($elements as $key=>$val):?>  
    // here is your scss code  
<?endforeach;?>

混合PHP混入

混合PHP混入允许您在混入声明中将参数作为PHP变量传递给include，并使用不同的语法为include参数。
混合PHP混入参数的语法很简单：分隔符是逗号","，不需要引号，所有参数都将自动类型化。
声明中的区别在于您必须使用"@?"而不是"@"，同样对于include："*@?mixin "而不是"@mixin "和"@?include "而不是"@include *".
以下是一个声明示例（来自RedCat的SCSS Toolbox）

@import "include/grid.reset-star";  
@?mixin grid{<?  
    $selector = is_string($e=current($args))&&!is_numeric(str_replace(array('-',',','.'),'',$e))?array_shift($args):false;  
    $mw = is_string($e=end($args))&&substr($e,-2)=='px'?array_pop($args):false;  
    $tt = 0;  
    foreach($args as $i=>$w){  
        ?>  
            <?if($mw):?>  
                @media(min-width:<?=$mw?>){  
            <?endif;?>  
                <?if($selector):?>  
                    ><?=$selector?>{  
                <?else:?>  
                    >*:nth-child(<?=$i+1?>){  
                <?endif;?>  
                        <?if(!$mw):?>  
                            position: relative;  
                            display:block;  
                            float:left;  
                            min-height: 1px;  
                            -webkit-box-sizing: border-box;  
                            -moz-box-sizing: border-box;  
                            box-sizing: border-box;  
                        <?endif;?>  
                        <?if($tt>=100):?>  
                            <?$tt = 0;?>  
                            clear:left;  
                        <?else:?>  
                            clear:none;  
                        <?endif;?>  
                        <?  
                            if(is_string($w)){  
                                @list($margin_left,$w,$margin_right) = explode(',',str_replace('-',',',$w));  
                                if($margin_left){  
                                    ?>margin-left:<?=$margin_left?>%;<?  
                                    $tt += $margin_left;  
                                }  
                                if($margin_right){  
                                    ?>margin-right:<?=$margin_right?>%;<?  
                                    $tt += $margin_right;  
                                }  
                            }  
                            ?>width: <?=$w?$w.'%':'auto'?>;<?  
                        ?>  
                    }  
            <?if($mw):?>  
                }  
            <?endif;?>  
        <?  
        $tt += $w;  
    }  
?>}?@

然后，使用示例

body>header>h1>a{  
    @?include grid(*,    2-96-2);  
    @?include grid(100        ,1-48-1,    1-48-1,    480px);  
    @?include grid(1-51-1    ,1-21-1,    1-21-1,    768px);  
}

自动加载支持

混入

如果包含的混入在使用时尚未定义，自动加载支持将在"导入路径"中查找与混入名称对应的文件，路径后跟"include"，然后是".scss"扩展：$import-path/include/$name-of-mixin.scss。如果存在，将导入它们。

@include clearfix();  
@?include icon(css3);

此代码将触发自动加载在"导入路径"中查找include/clearfix.sccs和include/icon.scss，并将它们导入。

扩展

如果扩展的类在使用时尚未定义，自动加载支持将在"导入路径"中查找与类名称对应的文件，路径后跟"extend"，然后是".scss"扩展：$import-path/extend/$name-of-class.scss。如果存在，将导入它们。

body>footer>div:first-child{  
    @extend %surikat-powered;  
}

此代码将触发自动加载在"导入路径"中查找extend/surikat-powered.scss，并将其导入。

字体

如果用于字体族的字体声明在使用时尚未定义，自动加载支持将会在指定的导入路径中查找与字体族名称（小写并使用短横线-替换空格）对应的文件：$import-path/font/$name-of-font.scss。如果存在，则会导入它们。这不适用于变量字体名称。

header{  
    font-family: Indie Flower;  
}  
body{  
    font: bold 10px Rock Salt;  
}

此代码将触发自动加载，在导入路径中查找font/indie-flower.scss和font/rock-salt.scss，并导入它们。

redcatphp / stylize

维护者

详细信息