redcatphp/stylize

Stylize - Css Preprocessor using Scss syntax ( SASS 3.x ) ported to PHP with added supports: php imbrication, php mixin, mixin autoload, extend autoload, font autoload - derived from leafo-scssphp

Stylize

Stylize is a CSS Pre-processor using Scss syntax from SASS ( version 3.x ) ported to PHP with additional features.
If you're not familiar with this language, you can consult the basic documentation on SASS. I'll describe here only the PHP API and exclusive features of Stylize. The source code is derived from the excellent leafo-scssphp., _(*1)

Additional Features to SCSS

• php imbrication
• hybride PHP Mixin
• mixin autoload (include)
• extend autoload
• font autoload

Basic Usage

Compiler

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

Server

The server will handle cache and rebuild it only if the files has changed and also deal in HTTP via Etag and Last-Modified. It also include by default, if they are present, "_config.scss" and "_var.scss". It will use a cache directory by default which is ".tmp/stylish/" from current working directory and which need to be writeable (chmod 0777)., _(*2)

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

PHP Support

The php will be executed before SCSS syntax parser.
By dint of tokenizer, the php support allow you tu use short php syntax even if short_open_tag is not enabled in php.ini., _(*3)

Imbrication

$img-path: '<?=$img_path?>' !default;  

<?if($bool){?>  
    // here is your scss code  
<?}?>  

<?foreach($elements as $key=>$val):?>  
    // here is your scss code  
<?endforeach;?>  
            

Hybride PHP Mixin

The hybride PHP mixins allow you to get your parameters passed to include as php variables in mixin declaration and using a different syntax for include parameters.
The syntax of hybride php mixins parameters is simple: the separator is the comma "," and no quotes are required, all parameters will be automaticaly typed.
The difference in declaration is that you have to use a "@?" instead of "@" and same for include: "@?mixin *" instead of "@mixin " and "@?include " instead of "@include *".
Let's take an example of declaration (the grid from RedCat's SCSS Toolbox):, _(*4)

@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;  
    }  
?>}?@  
            

And then, a usage:, _(*5)

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);  
}  
            

Autoload Support

Mixin

If the mixin to include isn't allready defined when used, the autoload support will look for presence of file corresponding to name of mixin in import paths followed by "include" and then ".scss" extension: $import-path/include/$name-of-mixin.scss. If they exists it will import them., _(*6)

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

This code will trigger autoload to look for include/clearfix.sccs and include/icon.scss in the import paths and import them., _(*7)

Extend

If the class to extend isn't allready defined when used, the autoload support will look for presence of file corresponding to name of class in import paths followed by "extend" and then ".scss" extension: $import-path/extend/$name-of-class.scss. If they exists it will import them., _(*8)

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

This code will trigger autoload to look for extend/surikat-powered.scss in the import paths and import it., _(*9)

Font

If the font-face declaration corresponding to font-familly which is used isn't allready defined when used, the autoload support will look for presence of file corresponding to name of font-family (lowercase and with spaces replaced by hyphen -) in import paths followed by "font" and then ".scss" extension: $import-path/font/$name-of-font.scss. If they exists it will import them. That doesn't work with variable font-name., _(*10)

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

This code will trigger autoload to look for font/indie-flower.scss and font/rock-salt.scss in the import paths and import it., _(*11)