Allow Conditions like possible in SASS or SCSS ;)

[kaystrobach]

Hi Guys,

i really like the simple approach behind less and would like to have conditions like they are possible in scss or sas:

f.e. you ask the user in a cms to setup a color:

And then you need to calculate the textcolor from this color, you will need something like a condition to ensure, that the contrast is still big enough to read the text.

footer-container {

@if lightness($main-color) < 10% {
    color: lighten($main-color,15%);
} @else {
    color: darken($main-color,20%);
}

}

Thanks in advance
Kay

[marcvangend]

Kay, lessphp is a PHP implementation of the LESS syntax. If you need a new feature in LESS, I guess you should request it in the LESS project https://github.com/cloudhead/less, after which it can be ported to lessphp.

[kaystrobach]

ok, i've solved my problem with a combination of the fluid template engine and ported some functions of less to fluid ;) - therefore you may close that topic from my point of view (anyway i would like to have conditions in less in general) ;)

FLUID Example ;)

<fcss:AddCssAsFile>
    <fcss:RemoveWhitespace compress="1">
        <f:if condition="{additionalStylesheet}">
            <f:then>
                @import url("{layoutBaseUri}css/baseForSkins.css");
                <fcss:format.raw>{additionalStylesheet}</fcss:format.raw>
            </f:then>
            <f:else>
                some css ;)
            </f:else>
        </f:if>
        #header_logo {
            background-image:url({siteLogo});
        }
        <f:if condition="{fcss:CssModify.lightness(color:main-color)} < 50">
            <f:then>
                <fcss:Assign name="contrast1" value="{fcss:CssModify.lighten(color:main-color, delta:'50%')}" />
                <fcss:Assign name="contrast2" value="{fcss:CssModify.darken(color:main-color, delta:'30%')}" />
                <fcss:Assign name="contrast3" value="{fcss:CssModify.darken(color:main-color, delta:'10%')}" />
            </f:then>
            <f:else>
                <fcss:Assign name="contrast1" value="{fcss:CssModify.darken(color:main-color, delta:'50%')}" />
                <fcss:Assign name="contrast2" value="{fcss:CssModify.lighten(color:main-color, delta:'30%')}" />
                <fcss:Assign name="contrast3" value="{fcss:CssModify.lighten(color:main-color, delta:'10%')}" />
            </f:else>
        </f:if>
    </fcss:RemoveWhitespace>
</fcss:AddCssAsFile>

[leafo]

I agree with @marcvangend

Also the idea of adding procedural language like constructs has been brought up multiple times, and has been rejected. The idea being that LESS should stay a declarative language like CSS.

[leafo]

If you want conditions in your css preprocessor then you should check out my other project, scssphp: http://leafo.net/scssphp/

The way to do this is LESS is using pattern matching with mixins.