richthegeek / phpsass Goto Github PK

If you use you shorthand font syntax with a line-height, it will compile without the line-height.

h1 {
    font: normal 22px/1 Arial;
}

Will compile to:

h1 {
    font: normal 22px Arial;
}

By some could you provide an example of how to include this into a single standalone php file ? I'd like to include your work into a zend project and a handful of things.

Hello !
First, I'd like to thank you for the work you've done here :). I'm loving Sass, but PHamlP is really dead and finding that here was great help.
There's a little think I'd like to ask tho, I'm trying to avoid using submodules with packagist but as long as you're using "dev-master" (git repo), it's using git submodules. If you could just git tag, that'd help me a lot :). Thanks !

The following sass won't compile.

div {
    :first-child,
    h1 + * {

    }
}

Produces:

Fatal error: Uncaught exception 'SassScriptOperationException' with message 'Undefined operation "op_unary_times"

Edit: Further investigation has revealed it's the pseudo selector with nothing infront that is causing the problem.

div {
    :first-child {
        border: 0;
    }
}

The above code does not compile correctly, and no error is thrown.

If you define a variable in a function, you cannot change it from within a for loop. Example code is below.

@mixin test-mixin(val) {
  left: test-function(val);
}

@function test-function($var) {
  $inner-var: "Wrong!";

  @for $i from 1 through 1 {
    $inner-var: "It worked!";
  }

  @return $inner-var;
}


body {
  @include test-mixin('woot');
}

If i replace the line inside the for loop with a return statement then the correct value appears, so I know the loop is running.

The message in question:

Warning: Division by zero in /phpsass/script/literals/SassColour.php on line 861

Need to update the function's definition to be stated as a "public static function".

Error:
Strict warning: call_user_func_array() expects parameter 1 to be a valid callback, non-static method SassScriptFunctions::ie_hex_str() should not be called statically in SassScriptFunction->perform() (line 123 of C:\wamp\www\presence\1530chestnut.com\sites\all\libraries\phpsass\script\SassScriptFunction.php).

/*------------------------------------------------------------------------------------------------
OLD CODE - @file SassScriptFunctions.php
------------------------------------------------------------------------------------------------*/
  /**
   * returns an IE hex string for a color with an alpha channel
   * suitable for passing to IE filters.
   */
  function ie_hex_str($color) {// Line No. 657
    if (!($color instanceof SassColour)) {
      $color = new SassColour($color);
    }
    $alpha = round($color->alpha * 255);
    $alpha_str = str_pad(dechex($alpha), 2, '0', STR_PAD_LEFT);
    $col = $color->asHex(FALSE);
    return new SassString(strtoupper('#' . $alpha_str . $col));
  }

/*------------------------------------------------------------------------------------------------
SUGGESTED CODE - @file SassScriptFunctions.php
------------------------------------------------------------------------------------------------*/
  /**
   * returns an IE hex string for a color with an alpha channel
   * suitable for passing to IE filters.
   */
  public static function ie_hex_str($color) {// Line No. 657
    if (!($color instanceof SassColour)) {
      $color = new SassColour($color);
    }
    $alpha = round($color->alpha * 255);
    $alpha_str = str_pad(dechex($alpha), 2, '0', STR_PAD_LEFT);
    $col = $color->asHex(FALSE);
    return new SassString(strtoupper('#' . $alpha_str . $col));
  }

Many, many thanks for the wonderful work!!!

Hi, this is something I noticed yesterday while making a few tests. Are semi-colons not required for sass/scss or is this a minor parser bug?

It doesn't break anything so not urgent but it isn't valid CSS which might bother some people.

Hi, noticed a bug, that I thought I would report:

This SCSS:

@mixin box-shadow($params) {
    -mox-box-shadow: $params;
    -webkit-box-shadow: $params;
}

.shadow {
    @include box-shadow((1px 1px 2px black inset, -1px -1px 2px white inset));
}

Should output:

.shadow {
  -mox-box-shadow: 1px 1px 2px black inset, -1px -1px 2px white inset;
  -webkit-box-shadow: 1px 1px 2px black inset, -1px -1px 2px white inset; }

But instead I get:

Exception Unmatched parentheses: C:\path\to\file\test.scss::7

Content properties lose surrounding whitespace when compiled.

div:before {
    content: "- ";
}

Gets compiled to:

div:before {
    content: "-";
}

Using the phpsass toCss method on a file that contains double slashes (//) is interpreted as a comment when the file doesn't exists, even if isFile is set to true.

In SassParser.php file, at line 410 if $isFile is set to true but the file doesn't exist, it is then parsed as source code. This is misleading, since $isFile set to true it should certify that we are passing a filename and not source code.

The SassParser.php class tries to interpret the comment (due to the double slashes) and get stuck in an infinite loop at line 641, trying to find the end of the line.

I am really liking this library, but perhaps we can embrace namespaces instead or require statements. It will make the code a lot cleaner. We can utilise the PSR-0 standard and bundle an autoloader if required.

BTW, happy to spearhead

http://getcomposer.org

This basic sample will cause some crazy recursion with the getMixin function. Ends up causing timeouts trying to compile. And the longer it goes the deeper it is nested (The more parents $this will have, the eldest of which actually has the mixin).

@mixin small-window {
  @media (max-width : 100px) {
    @content;
  }
}

.awesome {
  width: 50%;

  @include small-window {
    width: 100px;
  }
}

I'm a front-end developer. My current scenario:

1. I write scss files
2. On change, compass 'watch' compiles the scss to css.
3. I manually FTP the outputted CSS file to the site in question.

What I'd like to do is:

1. Write scss file.
2. On change the .scss file is auto-uploaded to the server (I have tools that can auto-update the file when changed by the program).
3. A tool on the server [phpsass] compiles the scss into css and puts the new .css in the right folder (overwriting the old version).

Does phpsass do the compiling in that way? If so, can someone give me a quick overview of what files I place where and what config settings I need to change?

I'm happy to write up some documentation for the project on how to do this afterwards if that would help to.

This is not related to SASS-specific syntax, as it is standard CSS functionality.

The following, simple CSS code to produce a speckled background on the body:

body {
    background-image: url(data:image/png;base64,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);
}

When parsed using phpsass, it emits the following notices:

Notice: Undefined offset: 2 in script/SassScriptLexer.php on line 73

Notice: Undefined offset: 1 in script/SassScriptLexer.php on line 76

Note that I've already posted this same response in the following issue but since this is another bug, I think it needs a seperate issue.

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

This example is right off of the SASS reference page. Search for:
"If you want to use variables along with a plain CSS /, you can use #{} to insert them."
and you'll find it.

Where it says:
is compiled to:

p {
  font: 12px/30px;
}

Which is obviously not the case, since trying it in the SASS command line and the /try of PHPSASS, I get a positive result in the command line and a negative result online.

What I get when running it in the SASS command line from my PC:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

Is compiled via sass --watch sass:compiled to:

p {
  font: 12px/30px; }

Online the editor itself returns:

p {
  font: 0px;
}

And the ruby console returns nothing.

Clearly a bug?

Using code from http://www.colorzilla.com/gradient-editor/

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#ccffffff',GradientType=0 );

seems to break compilation for every style after this line.

Regarding this Post:

http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

this needs to be implemented:

$currentBreakpoint: 45em;

@media only screen and (min-width: $currentBreakpoint) {
//...
}

Its not working atm.

Hi! I'm not too sure where the problem is coming from but I'm getting a PHP Notice.

I've found a solution, essentially a check is needed to ensure that a usage of preg_match() actually returns matches. The new code simply has a condition that confirms the returned variable is an array and isn't empty.

As I said earlier, I'm really unsure about what might be causing the notice on my end and it's quite possible that it has something to do with the syntax in my SCSS file.

Error:
Notice: Undefined offset: 1 in SassScriptLexer->lex() (line 76 of C:\wamp\www\presence\1530chestnut.com\sites\all\libraries\phpsass\script\SassScriptLexer.php).

// CODE FROM SCSS FILE
@mixin background-gradient($from, $to, $alpha: 1.0) {
  $rgbaTo:      rgba($to, $alpha);
  $rgbaFrom:    rgba($from, $alpha);
  $ieHexTo:     ie-hex-str($rgbaTo);
  $ieHexFrom:   ie-hex-str($rgbaFrom);

/* Old browsers */
  background: $from;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* Chrome10+,Safari5.1+ */
  background: -webkit-linear-gradient(top, $rgbaFrom 0%, $rgbaTo 100%);
/* Chrome,Safari4+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $rgbaFrom), color-stop(100%, $rgbaTo));
/* FF3.6+ */
  background: -moz-linear-gradient(top, $rgbaFrom 0%, $rgbaTo 100%);
/* IE10+ */
  background: -ms-linear-gradient(top, $rgbaFrom 0%, $rgbaTo 100%);
/* Opera 11.10+ */
  background: -o-linear-gradient(top, $rgbaFrom 0%, $rgbaTo 100%);
/* W3C */
  background: linear-gradient(to bottom, $rgbaFrom 0%, $rgbaTo 100%);
/* IE lte 8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = $ieHexFrom, endColorstr = $ieHexTo);
/* IE8 */
  ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = $ieHexFrom, endColorstr = $ieHexTo);
}

/*----------------------------------------------------------------------------------------
OLD CODE - @file SassScriptLexer.php
----------------------------------------------------------------------------------------*/
if (($match = $this->isWhitespace($string)) !== false) { // Line No. 67
  $tokens[] = null;
}
elseif (($match = SassScriptFunction::isa($string)) !== false) {
  preg_match(SassScriptFunction::MATCH_FUNC, $match, $matches);
  $args = array();
  foreach (SassScriptFunction::extractArgs($matches[SassScriptFunction::ARGS], false, $context) as $key => $expression) {
    $args[$key] = $this->parser->evaluate($expression, $context);
  }
  $tokens[] = new SassScriptFunction($matches[SassScriptFunction::NAME], $args);
}

Hope this helps!

When used, they get stripped of "rem", which leaves just a number, which gives em based sizing. This is reproducible with the demo.

There seems to be two methods missing SassNumber::length(), and SassNumber::nth().

Is that a bug, when i try to parse my ".sass" file with scss (cause of eclipse syntax hightlighting problems) he use automaticly sass parser.

 $options = array(
    'syntax' => "scss"
  );
  // Execute the compiler.
  $parser = new SassParser($options);
  return $parser->toCss("style.sass"); // Use sass not scss parser

The "other-color" test fails at https://github.com/richthegeek/phpsass/blob/master/tests/other-color.scss

An example of a failed TravisCI test is http://travis-ci.org/#!/richthegeek/phpsass/jobs/1967109

More specifically, the issue is scale-color not working correctly and is most likely a rounding issue with conversion RGB > HSL > RGB

SASS:
body {
top: 3px!important;
}

PHPSass's compiled output
body{
top: 3!important;
}

Notice the px is missing unless there is a space between px and !important.

We were seeing a problem with embedded images. What was happening is that at the semicolon in the statement, SassParser was figuring that it was the end of a statement and we would get a statement like this:

background: url(data:image/svg+xml

I added the following exception and it fixes the issue:

         case self::END_STATEMENT:
-          $token = $this->createToken($statement . $c);
-          if (is_null($token)) {
-            $statement = '';
+          if(strpos($statement, 'svg+xml') !== FALSE && strpos($statement, 'base64') === FALSE) {
+            $statement .= $c;
+          } else {
+            $token = $this->createToken($statement . $c);
+            if (is_null($token)) {
+              $statement = '';
+            }
           }

Basically telling the while statement to keep going if it finds a semicolon in this specific context.

If you had the following

@supports (display: flex) {   
     #id\:with\:colons {
        display: flex;
     }        
}

It gets outputted as:

@supports (display: flex){#id\:with\:colons;#id\-display:flex;}

Since #4 was closed -

You mention there the Extensions method from the original Phamlp.

the extensions method has been temporarily removed ... We will be adding them back in once we have fixed on a way to do it properly.

Did you ever got to that ? if not, any hint on what was removed and what should be done ? I'd like to help with that. I'm looking to be able to add compass as it was in the original phamlp, without listing all the functions etc.

I get the following SassContextException with the following example code

@mixin mxn() { }
@media only screen and (min-width: 1300px) {
    @include mxn();
}

Fatal error: Uncaught exception 'SassContextException' with message 'Undefined Mixin: mxn' in /home/XXX/public_html/phpsass/tree/SassContext.php:96 Stack trace:
#\0 /home/XXX/public_html/phpsass/tree/SassMixinNode.php(60): SassContext->getMixin('mxn')
#\1 /home/XXX/public_html/phpsass/tree/SassNode.php(332): SassMixinNode->parse(Object(SassContext))
#\2 /home/XXX/public_html/phpsass/tree/SassRootNode.php(71): SassNode->parseChildren(Object(SassContext))
#\3 /home/XXX/public_html/phpsass/tree/SassRootNode.php(80): SassRootNode->parse(Object(SassContext))
#\4 /home/XXX/public_html/phpsass/tree/SassMediaNode.php(80): SassRootNode->render()
#\5 /home/XXX/public_html/phpsass/tree/SassNode.php(332): SassMediaNode->parse(Object(SassContext))
#\6 /home/XXX/public_html/phpsass/tree/SassRootNode.php(71): SassNode->parseChildren(Object(SassContext))
#\7 /home/os in /home/XXX/public_html/phpsass/tree/SassContext.php on line 96

the Adjacent-Sibling Selector "+" is buggy with phpsass,
exemple:

dl>dt{
    color:red;
    +dd{
        color:green;
    }
}

don't works

workaround (before fix):

dl>dt{
    color:red;
    &+dd{
        color:green;
    }
}

As we have some functional tests, it would be great if those were available as PHPUnit tests, and then we could easily expose them to Travis-CI for continuous goodness.

Their bugs on the test page : http://www.phpsass.com/try/ :

• Shift+C shortcut don't works on Firefox (and "C" char can be used in code) use another shortcut (control+enter) or/and button.
• ruby compilation don't seem to works

For example, this works:

@media only screen and (max-width: 480px) {
    .excerpt .attachment-thumb {
        display: block;
    }
}

but this doesn't:

@media only screen and (max-width: 480px) {
    .excerpt {
        .attachment-thumb {
            display: block;
        }
    }
}

This is referring to the @content feature.

When a mixin that has a @content block is used more than once, the same content is output for recurring calls.

Here's a quick example that shows the problem (tested on http://www.phpsass.com/try just now). Note that the code is used to output keyframe animation declarations with browser prefixes, but the outputted CSS re-declares "FadeIn" twice, rather than declaring the "GrowWidth" animation as it should:

// Outputs the keyframe declarations with browser prefixes. 
@mixin Keyframes($name) {
    @-webkit-keyframes #{$name} { @content; }
    @-moz-keyframes #{$name} { @content; }
    @keyframes #{$name} { @content; }
}

// Defines a named keyframe sequence, fading an element in.
@include Keyframes(FadeIn) {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

// Defines a named keyframe sequence, growing an element's width.
@include Keyframes(GrowWidth) {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

// creates an animation using defined keyframes.
@mixin Anim($name, $duration, $count) {
    -webkit-animation: $name $duration $count;
    -moz-animation: $name $duration $count;
    animation: $name $duration $count;
}

div#fadeIn {
    @include Anim(FadeIn, 1s, 1);
}

div#growWidth {
    @include Anim(GrowWidth, 1s, 1);
}

This is preprocessed to:

@-webkit-keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}
@-moz-keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}
@keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}

@-webkit-keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}
@-moz-keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}
@keyframes FadeIn {  from {  opacity: 0;}  to {  opacity: 1;}}

div#fadeIn {
  -webkit-animation: FadeIn 1s 1;
  -moz-animation: FadeIn 1s 1;
  animation: FadeIn 1s 1;
}

div#growWidth {
  -webkit-animation: GrowWidth 1s 1;
  -moz-animation: GrowWidth 1s 1;
  animation: GrowWidth 1s 1;
}

Got this error message:

Call to undefined method SassIfNode::render() in /Users/adrian/treehouse/a_code/a_webdevelopment/mapping.io/app/vendor/PHPSass/tree/SassMediaNode.php on line 82

Here is the code surrounding:

$app->get('/assets/css/style.min.css', function() use ($app){
    $scss = file_get_contents('../precompiles/sass/mapping.io.scss');
    $options = array(
        'style' => 'nested',
        'cache' => FALSE,
        'syntax' => 'scss',
        'debug' => TRUE,
        'callbacks' => array(
            'warn' => 'cb_warn',
            'debug' => 'cb_debug',
        ),
    );

    // Execute the compiler.
    $parser = new \SassParser($options);
    echo $parser->toCss('../precompiles/sass/mapping.io.scss');
});

I have a _mixins.scss and I include that from my style.scss. In the style.css I want to extend a container class with a clearfix that is declared in the _mixins.scss.
But for some reason the generated CSS doesn't show the container being extended with the clearfix:

'_mixins.scss'

/* Clearfix - h5bp.com/q */
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

'style.scss'

@import "mixins";

#container {
  @extend .clearfix;
  overflow: hidden;

  & > div {
    float: left;
  }
}

which is compiled to:

/*
 * Clearfix - h5bp.com/q
 */
.clearfix {
  *zoom: 1; }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: ""; }
  .clearfix:after {
    clear: both; }

#container {
  overflow: hidden; }
  #container > div {
    float: left; }

P.S: Thanks so much for maintaining this project, I almost thought I had to put up with PHamlP from 2010, when all I need is a little Sass ...

I don't see any of compass's partials included here, should I take them from somewhere else ? I'm used to other phamlp forks including them under /extensions.
thanks.

Never mind, was accidentally using an old version.

Hi I would like to know if you are planning to implement PSR to your library?

I would like to help that happening.

I'm currently just seeing an "It works!" page.

@include don't works if it's before @mixin

exemple :

.cadre{
    @include myborder;
}

@mixin myborder{
    border:1px dotted  red;
} 

give error :

Undefined Mixin: myborder: styles/test.scss::2 Source: .cadre

It would be nice to have support for @extend-Only Selectors as explained here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders

It has already been added here: 2e3133a

… but the PHPSASS online parser didn't compile as expected.

I tried it with this:

%media {
    overflow: hidden;
    &:first-child {
        float: left;
    }
    &:last-child {
        overflow: hidden;
    }
}

.status {
    @extend %media;
}

Currently, @import searches only in the base directories.
I've been able to add relative @imports, based on $parser->token->filename but I'm encountering a problem.

Let's say I have, in my compass.scss file, the following content :

@import "utilities";
@import "typography";
@import "css3";

PhpSass will fail to find it because it can not understand relativity.
With my version, it works, however when utilities is finished resolving, PhpSass tries to resolve typography with token->filename as ... The last parsed file in utilities

If you try and compile @jlong/sass-twitter-bootstrap it fails.

an error of

PHP Fatal error:  Uncaught exception 'SassNumberException' with message  
'Incompatible units: 'px' and 'in': /bootstrap/_mixins.scss::522  
Source: *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%)'

Which oddly enough is a comment line: https://github.com/jlong/sass-twitter-bootstrap/blob/master/lib/_mixins.scss#L522

This mixin returns the same output for every call despite passed arguments are different

@mixin webfont($fontname){
    @font-face{
        font-family: $fontname;
    }
}
@include webfont('first-fontname');
@include webfont('second-fontname');

Renders as:

@font-face {  font-family: 'first-fontname';}
@font-face {  font-family: 'first-fontname';}

@extending a class with nested properties like .clearfix below results in the nested properties being applied to the selector itself—for example, .clearfix:after styles are applied to ul li instead of ul li:after.

.clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }
}

div { @extend .clearfix; } // works fine

ul li { @extend .clearfix; } // does not

compiles to:

.clearfix,
div,
ul li {
  zoom: 1; }
  .clearfix:before,
  .clearfix:after,
  div:before,
  ul li,
  div:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden; }
  .clearfix:after,
  div:after,
  ul li {
    clear: both; }

Simple fix, if $other->value is 0 just return 0:

return new SassNumber(($this->value / $other->value).$this->unitString(

becomes

return new SassNumber(($other->value == 0 ? 0 : $this->value / $other->value)).$this->unitString(

On Ubuntu 12.04 using Firefox Shift+c just types C.

Using Google Chrome however it works fine.

Hey hey

Nice work on the Sassy + prepro + this :) Ran into a slight snag while refactoring one of my projects, something (I took a stab and guessed sass hence why this is here and not in the Sassy queue) isn't liking css calc(), it works fine in my straight css doc, in the scss I'm getting the "incompatible units" error. Sass apparently supports it, not sure as of when, guessing recently as I seem to recall you're slightly behind the ruby version.

Is there a way to get them to play nicely or do I just have to wait til it's caught up?

thanks :)

I have been searching all over for a PHP SASS Parser and this seems to be one of the only ones but there is no documentation so could you please tell me how i could use this to parse SASS text?