CODEWITHSUNDEEP
csssymfonysassstylesheetcompass-sass
user2986096
user2986096

Reputation: 107

What is the best way to create conditional stylesheets with Sass and Symfony2's Assetic?

My project framework is Symfony 2.0. I'm using the Compass filter via Assetic to compile my Sass files. However I'm unsure of how to structure my compiled CSS files once I place it in the head as I have conditional code to load certain css files. On top of this I want to be able to include my IE conditionals.

(i.e.<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->).

Not sure if I should be using the same If statements I have created below or if there's a more elegant solution to this:

i.e. CssBundle/Resources/views/stylesheets.html.twig

{% block stylesheets %}
    {% if isEspanol %}
        {% stylesheets filters=”compass” @cssBundle/Resources/css/core/es/main.desktop.scss” %}
    {% else %}
        {% stylesheets filters=”compass” @cssBundle/Resources/css/core/main.desktop.scss” %}
    {% endif %} 
<link rel=”stylesheet” href=”{{ asset_url }}” />
{% endstylesheets %}

CoreBundle/Resources/views/Layout/default.desktop.html.twig

<head>
    {% include “::stylesheets.html.twig” %}
</head>

Upvotes: 2

Views: 988

Answers (1)

Anas Nakawa
Anas Nakawa

Reputation: 2015

I have no idea about symphony framework, but if your only problem is conditional stylesheets for IE hacks, then the answer might be not to use conditional stylesheets

use html conditional classes instead

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->

see Paul Irish's recommendations here

Upvotes: 1

Related Questions