A study of Sass (meta-language on top of CSS)

June 14, 2009 by Noel Gomez · 8 Comments
Filed under: Programming 

I’ve been experimenting with different technologies as I learn Ruby on Rails and recently I have been looking into using HAML instead of ERB and Sass instead of CSS.  I started using HAML a while back and I really enjoy how clean the template files look. This article has an argument for HAML and I agree with the author. I found an article on A List Apart on sprites and I thought it was a good way to showcase the awesomeness of Sass.  The article covers creating an image map with a hover effect.

The Links

The HTML for the map is below: (I modified the IDs from the original article to make it simpler to follow)

1
2
3
4
5
6

<ul id="menu" >
  <li id="menu_item1"><a href="#1"></a></li>
  <li id="menu_item2"><a href="#2"></a></li>
  <li id="menu_item3"><a href="#3"></a></li>
  <li id="menu_item4"><a href="#4"></a></li>
</ul>

Here is the same map in HAML: (WP-Syntax does not support HAML/Sass, but this is not too bad)

1
2
3
4
5
6
7
8
9

%ul#menu
  %li#menu_item1
    %a{:href => "#1"}
  %li#menu_item2
    %a{:href => "#2"}
  %li#menu_item3
    %a{:href => "#3"}
  %li#menu_item4
    %a{:href => "#4"}

The Style

In the article they discuss how the hover effect is achieved using this image. (dimensions added for clarity)
test-1
The CSS used for the hover effect is below with some minor modifications to the original:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

 
#menu {
  width: 400px; 
  height: 200px;
  background: url(../../images/test-1.jpg);
  margin: 2em 2em; 
  padding: 0;
  position: relative;
}
 
#menu li, #menu a {
  height: 200px; 
  display: block;
}
 
#menu li {
  position: absolute;
  list-style: none;
}
 
#menu_item1 {margin-left: 0; width: 96px;}
#menu_item2 {margin-left: 96px; width: 76px;}
#menu_item3 {margin-left: 172px; width: 111px;}
#menu_item4 {margin-left: 283px; width: 118px;}
 
#menu_item1 a:hover {
  background: transparent url(../../images/test-1.jpg) 0 -200px no-repeat;
}
 
#menu_item2 a:hover {
  background: transparent url(../../images/test-1.jpg) -96px -200px no-repeat;
}
 
#menu_item3 a:hover {
  background: transparent url(../../images/test-1.jpg) -172px -200px no-repeat;
}
 
#menu_item4 a:hover {
  background: transparent url(../../images/test-1.jpg) -283px -200px no-repeat;
}

In the article they discuss the math that must be performed to make this work, but it’s hard to go from all the values presented to the logic that was used to arrive at those values. In addition, there are a lot of constants and repetition in the CSS. Not very DRY in my mind. Now here is the Sass that will produce the same CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

!menu_image = "url(../../images/test-1.jpg)"
!width_item_1 = 96
!width_item_2 = 76
!width_item_3 = 111
!width_item_4 = 118
!height_menu = 200
!unit = px
 
#menu
  :margin 2em 2em
  :position relative
  :width 400px
  :height = !height_menu + !unit
  :padding 0
  :background = !menu_image
  a
    :height = !height_menu + !unit
    :display block
  li
    :display block
    :position absolute
    :list-style none
    :height = !height_menu + !unit
    &#menu_item1
      :margin-left 0
      :width = !width_item_1 + !unit
      a:hover
        :background = "transparent " !menu_image "0 " -(!height_menu) + !unit no-repeat
    &#menu_item2
      :margin-left = !width_item_1 + !unit
      :width = !width_item_2 + !unit
      a:hover
        :background = "transparent " !menu_image " " -(!width_item_1) + !unit " " -(!height_menu) + !unit no-repeat
    &#menu_item3
      :margin-left = (!width_item_1 + !width_item_2) + !unit
      :width = !width_item_3 + !unit
      a:hover
        :background = "transparent " !menu_image " " -(!width_item_1 + !width_item_2) + !unit " " -(!height_menu) + !unit no-repeat
    &#menu_item4
      :margin-left = (!width_item_1 + !width_item_2 + !width_item_3) + !unit
      :width = !width_item_4 + !unit
      a:hover
        :background = "transparent " !menu_image " " -(!width_item_1 + !width_item_2 + !width_item_3) + !unit " " -(!height_menu) + !unit no-repeat

The top of the Sass file defines the constants that will be used for all the calculations in the CSS. This may seem like a little extra work, but it has a few advantages. First, this makes it simpler to calculate the position of the background image for the :hover and it allows the developer to quickly change the CSS if the image changes. For example, imagine that the image changed to this:


test-2
Not only did the dimensions for each item change, but the overall height changed from 200 to 50. If CSS was written directly, not only would the url to the new image need to be changed, but the positions would have to be recalculated and the height and negative y-position would need to change. Using Sass, we can just change the constants defined at the top of the Sass file:

1
2
3
4
5
6
7

!menu_image = "url(../../images/test-2.png)"
!width_item_1 = 75
!width_item_2 = 100
!width_item_3 = 50
!width_item_4 = 175
!height_menu = 50
!unit = px

I like the simplicity and flexibility that Sass enables when defining CSS. When I learned about CSS, the selling point was to allow the design of a site to be flexible, but having to statically define colors, positions, heights and widths for items like the one discussed here, make maintenance more complex and error prone. Imagine the potential for errors when the image was changed above. Finally, I believe maintenance and readability increases as it is simple to follow how the values are arrived at instead of simply stating the value.
 
Sass has a lot more to offer than what I present above. If you would like to learn more check out the HAML/Sass site.

Tags: , ,

iPhone 3G S, The world’s most accessible smart phone

June 8, 2009 by Noel Gomez · 1 Comment
Filed under: General 

Today Apple upgraded the iPhone and made it the most accessible phone.  As I had predicted in an earlier post, with more capable hardware they were able to improve accessibility.  Apple gets it, they see accisibility not as a hindrance, but as a way to create a competitive advantage.

Voice Over, speak it to me

With Voice Over anyone can now control the iPhone without needing to see the screen.  Gestures are used to move around and the entire OS is opened up to the blind:

You’ll hear descriptions of every item on the screen, including status information such as battery level, Wi-Fi and cellular network signal levels, the cellular network provider, and time of day. It even lets you know when the display changes to landscape or portrait orientation, and when the screen is locked or unlocked.

It is also localized

VoiceOver includes built-in voices that speak 21 languages including Chinese (Cantonese), Chinese (China), Chinese (Taiwan), Dutch, English (US), English (UK), Finnish, French (Canada), French (France), German, Italian, Japanese, Korean, Norwegian, Polish, Portuguese (Brazil), Portuguese (Portugal), Russian, Spanish (Mexico), Spanish (Spain), and Swedish.

This feature also allows a blind person to interact with a sighted person by displaying a Voice Over cursor which displays a rectangle around the item being described and the screen can be turned off for privacy.  The Voice Over feature could be great for a sighted person as well.  You can control the iPhone without taking it out of your pocket and you can probably extend battery life by not having the LCD on.

howitworks-20090608I am not sure how typing is handled (probably by selecting each letter at a time with the gestures), but Voice Over is a real win for the iPhone.

Voice Control, do as I say

Another feature that makes the new iPhone more accessible is Voice Control.  Apple prominently showcased this feature during the keynote announcement of the iPhone as one that has mass appeal, but here is another feature which helps the disabled by allowing dialing and music selection via voice commands.  It also supports 21 Languages.

you can use your voice to play music and make a phone call. Just press and hold the home button, listen for the audio prompt, and speak the name of the artist, album, or playlist you want to hear. You can pause, play, change tracks, even shuffle your music.

Zoom Zoom Zoom

The iPhone 3G S now lets you magnify the screen of any application on the iPhone.  Not only does this help those who traditionally need magnification, but Baby Boomers with poor eye sight now have an option for an accessible smart phone.

Zoom works everywhere, including the Home, Unlock, and Spotlight screens—even with applications you purchase from the App store.

zoom-on-iPhone

And there’s more…

These are just a few of the accessibility features of the iPhone , but these are ones which potentially have uses outside the disabled community.  It is clear that Apple is motivated to create accessible products, but by addressing this need, it also opens up the possibility to market these features outside the disabled community.

Be sure to check out Apple’s iPhone accessibility page for more information of solutions for the hearing impaired and those with physical and motor skills difficulties.

Tags: