Making Hyperlink colors specific to just one <UL> Unordered List with SASS and CSS

  I’m having to do much of my own CSS for the Silicon Valley Code Camp which happens in just two short weeks.  I’ve never been very good at CSS and SASS but having been thrown into the first somewhat I’m learning quickly.  I’m not sure the original intent, but the default on the SV Code Camp site for hyperlinks is not to show them.  I think it might have to do with the menu structure but the person who made that decision is tens of thousands of miles away and not available. What I want to do is create a new class I can use in my unorder list that just affects that one list and does not break the rest of the site.  Here is what I put in the SASS file to make this happen. a.myhyperlink { color: #ce4dd6; &:hover { … Continue Reading

Using Compass With Visual Studio for SASS work

image.png

CSS for me has always been somewhat of a mystery to use in medium to large projects.  The idea of having to write individual classes and combine them in different ways to get affects seem to be beyond what I can keep in my head.  That is, if you have an html page with a body, the body has some div’s, nested div’s, header tags, etc, it can get really confusing to try and figure out how to author the CSS in a way it makes sense.  SASS comes to the rescue here.  It allows you to create variables, it allows you to create hierarchies of styles and just provides lots of conveniences that are otherwise difficult in CSS.  I won’t go into the details here, but simply provide a recipe of sorts for how to use it with Visual … Continue Reading

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

image.png

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 … Continue Reading

Follow

Get every new post delivered to your Inbox

Join other followers: