Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 232 lines (132 sloc) 9.43 kb
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
1
2 <!doctype html>
e42f8f20 » Divya Manian
2011-12-10 Site updated at 2011-12-11 00:44:12 UTC
3 <!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>Foldable CSS blocks in SASS with Textmate | Divya Manian</title>
8 <meta name="author" content="Divya Manian">
9
10 <meta name="description" content="I recently started using SASS for my CSS development (thanks to Deepak). SASS is a meta-language that makes developing CSS really easy - provided you &hellip;">
11
12
13 <meta name="viewport" content="width=device-width, initial-scale=1">
14
15
16 <link rel="canonical" href="http://nimbupani.github.com/foldable-css-blocks-in-sass-with-textmate.html">
17 <link href="/stylesheets/screen.css" rel="stylesheet">
8f21f859 » Divya Manian
2011-12-10 Site updated at 2011-12-11 02:10:56 UTC
18 <link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
19 <link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
20
21 </head>
22
23
cd5e6a91 » Divya Manian
2011-12-23 Site updated at 2011-12-24 06:16:39 UTC
24 <body >
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
25 <div class="container">
26 <div class="content">
27 <header role="banner"> <h1><a href="/">Divya Manian</a></h1>
28
69c30f54 » Divya Manian
2011-12-11 Site updated at 2011-12-11 14:45:02 UTC
29 <h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
30
31 </header>
9d25e1ee » Divya Manian
2011-12-10 Site updated at 2011-12-11 01:21:19 UTC
32 <nav class="sitenav"><a href="/">Home</a>
e42f8f20 » Divya Manian
2011-12-10 Site updated at 2011-12-11 00:44:12 UTC
33 <a href="/archives">Archives</a>
34 <a href="/about.html">About</a>
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
35 </nav>
e42f8f20 » Divya Manian
2011-12-10 Site updated at 2011-12-11 00:44:12 UTC
36
37
38
39
40
41
42
43
44 <article>
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
45 <nav class="article">
46
47 <a class="previous" href="/analysing-my-information-consumption.html" title="Analysing my Information Consumption"></a>
48
49
50 <a class="next" href="/book-reviews-for-june-2009.html" title="Book Reviews for June 2009"></a>
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
63 <time datetime="2009-06-12T00:00:00-07:00" pubdate><span class='month'>Jun</span> <span class='day'>12</span> <span class='year'>2009</span></time>
64
65 <h1 class="entry-title"><a href="/foldable-css-blocks-in-sass-with-textmate.html">Foldable CSS blocks in SASS with Textmate</a></h1>
66
67
68
69
70 </header>
71 <div class="entry-content"><p>I recently started using <a href="http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html">SASS</a> for my CSS development (thanks to <a href="http://deepak.jois.name">Deepak</a>). SASS is a meta-language that makes developing CSS really easy - provided you master the syntax. There is a very good <a href="http://github.com/chriseppstein/sass-textmate-bundle/tree/master">textmate bundle</a> which makes it really simple to use on a mac. I will write more about how it has proven useful, but this post is to resolve a problem of developing CSS with SASS.</p>
72
73
74 <p>SASS identifies child selectors using indentation. For example:</p>
75
76
77 <pre>
78 #parent
79 :font-weight bold
80
81 #child
82 :font-weight normal
83 </pre>
84
85
86 <p>would translate into CSS as:</p>
87
88 <pre>
89 #parent { font-weight:bold; }
90 #parent #child { font-weight:normal;}
91 </pre>
92
93
94
95
96 <p>When I have about 10 child (or sub-child) elements within each parent, tracking down the parent can become tricky. This is where folding CSS groups come in handy:</p>
97
98
99 <p><img src="/blog/files/sass-folded.png" alt="Folded CSS Group in action" /></p>
100
101 <h3>How did I do it?</h3>
102
103
104 <p>First, I found this post on creating <a href="http://css-tricks.com/forums/viewtopic.php?f=8&t=2783&p=13197">foldable CSS groups in textmate</a></p>
105
106
107 <p>Here are the steps:</p>
108
109
110 <ul>
111 <li>Go to Bundles>Bundle Editor>Edit Languages.</li>
112 <li>Select the SASS > SASS file on the left column.</li>
113 <li>Now you should see the language grammar file for SASS, starting with the line &ldquo;{ scopeName = &#8220;source.css&#8221;&rdquo;
114 find the line &ldquo;foldingStartMarker = &#8221; (line 4)</li>
115 <li>Edit it to:<br/>
116 <pre>
117 foldingStartMarker = '// START |^#|^\*|^\b|^\.';
118 </pre>
119 </li>
120 <li>Edit the foldingEndMarker to:<br/>
121 <pre>
122 foldingStopMarker = '// END |^#|^\*|^\b|^\.';
123 </pre>
124 </li>
125 </ul>
126
127
128 <p>Tada! Your folding groups are ready! But it is not easy to type in &ldquo;// START&rdquo; and &ldquo;// END&rdquo; every time. So, you can create a snippet to automate it for you:</p>
129
130
131 <ul>
132 <li>Go to Bundles>Bundle Editor>Edit Snippets&#8230;</li>
133 <li>Select SASS in the left column and click on the &ldquo;+&rdquo; icon at the bottom of the left column. Name it as you like. </li>
134 <li>Put this snippet on the right column with the snippet name, you created in the previous step, selected.<br/>
135 <pre>
136 // START ${1:name}
137 ${0:$TM_SELECTED_TEXT}
138 // END ${1:name}
139 </pre>
140 </li>
141 <li>Finally, assign a shortcut (Activation Trigger) that you can type and press tab so that you get access to the above (I used the characters &ldquo;fld&rdquo;).</li>
142 </ul>
143
144
145 <p>I have created an issue to add this to the sass-textmate-bundle on Github. <a href="http://github.com/seaofclouds/sass-textmate-bundle/issues#issue/2">Please vote for it, if you would like to see this feature in the bundle.</a></p>
146
147
148 <p>Thanks to <a href="http://twitter.com/chriseppstein">Chris Eppstein</a> for nudging me to blog about it!</p>
149
150 </div>
151
152 <footer>
153 <p class="meta">This post was posted by
154
155
156 <a href="/about.html">Divya Manian</a>
157 on
158
159
160
161
162
163
164 <time datetime="2009-06-12T00:00:00-07:00" pubdate><span class='month'>Jun</span> <span class='day'>12</span> <span class='year'>2009</span></time> in
165
166 <span class="categories">
167
168 <a class='category' href='/categories/web-development/'>Web Development</a>
169
170 </span>
171
e42f8f20 » Divya Manian
2011-12-10 Site updated at 2011-12-11 00:44:12 UTC
172 . If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2009-06-12-foldable-css-blocks-in-sass-with-textmate.md">please send a pull request</a>.
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
173 </p>
174 </footer>
175 </article>
176
177 <section>
178 <h1>Comments</h1>
179 <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
180 </div>
181 </section>
182
183
184 </div>
185 </div>
186 <aside id="articles">
e42f8f20 » Divya Manian
2011-12-10 Site updated at 2011-12-11 00:44:12 UTC
187 <p><img class="avatar" src="/assets/divya.png" height=50> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
188 <h2>Posts on Web Development</h2>
2cc14691 » Divya Manian
2012-01-23 Site updated at 2012-01-23 12:45:44 UTC
189 <ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
190 </aside>
191 <footer role="contentinfo"><p>
3c9d77b3 » Divya Manian
2012-01-01 Site updated at 2012-01-01 19:06:29 UTC
192 Copy to your heart’s content 2012 - Divya Manian -
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
193 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
194 </p>
195
196
197 </footer>
198
199
200 <script type="text/javascript">
201 var disqus_shortname = 'nimbublog';
202 var disqus_developer = 1;
203
204
205 var disqus_url = 'http://nimbupani.com/foldable-css-blocks-in-sass-with-textmate.html';
206 var disqus_identifier = 'http://nimbupani.com/foldable-css-blocks-in-sass-with-textmate.html';
207
208
209
210
211 (function () {
212 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
213 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
214 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
215 }());
216 </script>
217
218
e42f8f20 » Divya Manian
2011-12-10 Site updated at 2011-12-11 00:44:12 UTC
219 <script src="/javascripts/octopress.js"></script>
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
220
e42f8f20 » Divya Manian
2011-12-10 Site updated at 2011-12-11 00:44:12 UTC
221 <script>
222 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
223 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
224 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
225 s.parentNode.insertBefore(g,s)}(document,'script'));
226 </script>
418c1300 » Divya Manian
2011-12-10 Site updated at 2011-12-10 19:57:24 UTC
227
228
229
230
231 </body>
232 </html>
Something went wrong with that request. Please try again.