Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Apr 24th, 2012  |  syntax: None  |  size: 1.24 KB  |  hits: 8  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How to implement different attributes sharing one element with sass?
  2. ul.post, ul.user_profile {
  3.   /* this attributes are the same for both classes */
  4.   margin-top: 1em;
  5.   list-style: none;
  6.   padding-bottom: 20px;
  7.   border-bottom: 1px solid #CCC;
  8.  
  9.   /* how to implement different attributes for ul.user_profile li.minithumb here? */
  10.  
  11.   /* this for ul.user_profile */
  12.   li.minithumb {
  13.     float: right;
  14.     margin: 0 auto;
  15.   }
  16.  
  17.   /* this for ul.post */
  18.   li.minithumb {
  19.     float: left;
  20.     margin-right: 20px;
  21.  
  22.     span.feed_post_image_not_found {
  23.       width: 80px;
  24.       height: 55px;
  25.       color: #333;
  26.       font-size: 20%;
  27.       padding-top: 25px;
  28.       text-align: center;
  29.       display: block;
  30.       background-color: $lightgray;
  31.     }
  32.   }
  33.        
  34. ul.post, ul.user_profile {
  35.     /* shared */
  36. }
  37.  
  38. ul.post li.minithumb {
  39.     /* individual */
  40. }
  41. ul.user_profile li.minithumb {
  42.     /* individual */
  43. }
  44.        
  45. ul {
  46.     &.post, &.user_profile {
  47.         /* shared */
  48.     }
  49.  
  50.     &.post li.minithumb {
  51.         /* individual */
  52.     }
  53.  
  54.     &.user_profile li.minithumb {
  55.         /* individual */
  56.     }
  57. }
  58.        
  59. ul.post, ul.user_profile {
  60.     /* shared */
  61.  
  62.     &.post li.minithumb {
  63.         /* individual */
  64.     }
  65.  
  66.     &.user_profile li.minithumb {
  67.         /* individual */
  68.     }
  69. }