Using SASS and Compass to Solve 2 CSS files into 1 CSS File

I’m currently building a simple SenchaTouch app that includes a twitter stream.  The example CSS that came with the app was global  in nature.  That is, it set styles on all image tags, h2 tags, etc.  Here is what it looks like:

 

h2 {
    font-weight: bold;
    padding-bottom: 3px;
}

img {
    border-radius: 5px;
    float: left;
}

.tweet {
    font-size: 70%;
    margin-left: 60px;
    color: #333;
    min-height: 50px;
}

.x-list-item {
    border-top: 1px solid white;
}

.posted {
    float: right;
}

What this does is every img tag will get a float left.  Very bad!  So, I’ already using Sass (style with attitude) and compass in my app so all I need to do is wrap the code that actually uses these tags in a div tag like <div class=’tweetclassinapp’ >..</div> and then wrap the above css in a SASS construct as follows:

.tweetclassinapp {
    h2 {
        font-weight: bold;
        padding-bottom: 3px;
    }

    img {
        border-radius: 5px;
        float: left;
    }

    .tweet {
        font-size: 70%;
        margin-left: 60px;
        color: #333;
        min-height: 50px;
    }

    .x-list-item {
        border-top: 1px solid white;
    }

    .posted {
        float: right;
    }
}


Now, the generated CSS looks like this and my tweet stream works perfectly!

.tweetclassinapp h2 {
    font-weight: bold;
    padding-bottom: 3px;
}

.tweetclassinapp img {
    border-radius: 5px;
    float: left;
}

.tweetclassinapp .tweet {
    font-size: 70%;
    margin-left: 60px;
    color: #333;
    min-height: 50px;
}

.tweetclassinapp .x-list-item {
    border-top: 1px solid #fff;
}

.tweetclassinapp .posted {
    float: right;
}

And of course, now my new StarSaver app looks like this (correctly)

 

image

That’s it for now!  Hope this helps

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP for the past 7 years. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Follow

Get every new post delivered to your Inbox

Join other followers: