Frontend

Summarized using AI

The Future of Sass

Hampton Catlin • August 22, 2012 • Austin, TX

In this presentation titled "The Future of Sass" at Rails Conf 2012, speaker Hampton Catlin provided insights into the features and developments anticipated in the upcoming Sass 3.2 release. He began by sharing his background with Sass, admitting that he had taken a step back from actively discussing it due to burnout from previous consulting work. After detailing his journey, including his work on various mobile applications and his role at Move Web, Catlin shifted focus to notable improvements coming to Sass.

Key Points Discussed:
- Catlin announced the introduction of placeholder selectors in Sass 3.2, which allows developers to declare reusable classes without printing unused selectors. This feature enhances the ability to create cleaner and more organized code.
- Another significant improvement is the new mixins with content feature, which allows for more dynamic and flexible CSS structures through nested media queries and passed parameters.
- The presentation highlighted the resolution of issues with at media queries, allowing for nesting and more complex, responsive design implementations.
- Catlin emphasized the importance of load paths, making it easier to manage Sass files across different directories, streamlining the compilation process.
- He addressed deprecations including the minimum Ruby version required for Sass to function properly, enhancing compatibility and performance.
- Catlin concluded the features by teasing the right path for increased performance and accessibility improvements, signaling a shift towards a C implementation of Sass—dubbed LibSass—that promises significantly faster compilation times.
- The major theme of the presentation was the push to make Sass not only more powerful but also more accessible for designers, encouraging their participation in using the language effectively.

Throughout the talk, Catlin used anecdotes from his past experiences in the industry to illustrate the challenges faced in web application development and how Sass can help mitigate these issues. He expressed a vision where Sass would serve as a powerful tool in the web design toolkit, allowing developers and designers to create sophisticated stylesheets with ease. Catlin encouraged the community to try Sass, provide feedback, and spread the word about its advantages, particularly to designers who can benefit from its features without feeling overwhelmed with learning a new syntax.

Ultimately, Catlin's presentation was not just about new features but about championing Sass as a tool that bridges the gap between design and coding, making web styling more intuitive and enjoyable.

The Future of Sass
Hampton Catlin • August 22, 2012 • Austin, TX

A glimpse of some of the features coming to Sass in the pending 3.2 release. Plus, a huge announcement about the project that's been months in the making as we have secretly toiled away on something that we think will be awesome. Hear it first at this talk. Repositories will be made public when the talk is over. Shh! Its a secret!

RailsConf 2012

00:00:24.679 Hi, I'm Hampton. I'm here to talk to you about the future of Sass. How many people here use Sass? Hi, nice to meet you all! I created Sass about five years ago. It's been four years since I last talked at a RailsConf, and I feel really good being back with my people—finally, a crowd I understand. Before I get into the future of Sass, I want to give a quick update about where I've been because I know you love hearing about me.
00:01:13.890 Ryan Carson told me that I used to do all these cool things before I disappeared. I realized that I stopped talking about what I was doing; I stopped blogging and didn't tell anyone. The simple reason for my absence is burnout. I worked at a consultancy called N Space in Toronto. Despite what everyone says, I’m not Canadian; I wish I was. No, I’m American, but I was living in Canada. So yes, Sass was invented in Canada, but it was aimed at boutique consultants.
00:02:41.760 I was really proud of what we did there. I worked super hard, but what happened was clients would come in with decent ideas and too much money. They would say, 'Hey, you should do this whole web thing.' I would put my heart into it and make something I was proud of. However, inevitably, many of these clients failed to execute their ideas; they often gave up after a few months.
00:03:05.310 It’s amazing how quickly that can kill something. Even a good idea can die if no one visits the site or markets it. I tried to tweet about it, but that was it. I just realized that I couldn’t take it anymore. I felt the need to create something for myself; I think that's a common experience for people who do consulting. A friend of mine mentioned wishing he could view Wikipedia on his iPhone. I decided to create an app called 'iPedia,' which was the first Wikipedia app out there.
00:03:45.780 It wasn’t perfect, but I was proud of it. It had tons of downloads, but I faced a trademark issue because it used the 'W' in 'Wikipedia'. Mike Godwin, the legal counsel for the Wikimedia Foundation, called me to ask if I would change the app's name. I agreed, and they ended up acquiring the app and me, which is quite an achievement.
00:06:06.310 I worked on several versions of the app after that; the most recent version didn't get great feedback. There's a lot of credit due to my team, especially those working hard behind the scenes. The attempts made to improve the mobile site were really what I was passionate about, and I disappeared from the rails world, but I did show up with some significant contributions.
00:06:43.840 While my work got popular, I later joined Move Web as the Director of Engineering, overseeing platform development. We take regular websites and make them mobile-friendly without compromising quality. We've significantly grown in the past two years; we're profitable and have seen half a billion page views through our cluster.
00:07:45.940 Now moving back to Sass, I want to take a moment to acknowledge Nathan and Chris. They've done phenomenal work and really run the project brilliantly. When I initially stepped away from Sass, it lacked nesting, variables, and functions—the basics. But they have taken it to a new level by introducing more complex features and enhancements, making it a deeper language.
00:08:59.110 There's some clarity I want to provide regarding SCSS. It’s become somewhat contested, but it is the extension for Sass files now. Indented Sass will remain supported, but SCSS is very popular with new users. However, I urge you not to scream or over-emphasize 'Sass' when referring to it. It’s a backronym, not an acronym. I thought it was a funny name, and now it’s become an issue.
00:10:36.120 I want to talk about Sass 3.2, which has mainly been the work of Chris and Nathan. I'm here to inform you about it, but it's been a long time coming, and it’s going to release soon. One of the features coming to Sass is placeholder selectors. A lot of you use '@extend'—it’s a powerful feature within the language that allows you to define a class and use it later as if it inherited from other selectors. It’s akin to using mixins, but this syntax allows you to handle selectors directly.
00:12:13.200 It enables you to create reusable classes that don't print the selectors unless you tell them to do so. This is particularly useful in avoiding clutter in your compiled CSS. You can declare a placeholder selector with a percentage sign, and it won't print out unless you use it elsewhere in your file. This is just one of the exciting features coming in Sass 3.2.
00:13:48.450 Another feature I’m excited about is mixing content, which allows you to pass content into mixins. For example, I can create a media query inside a mixin and utilize '@content', which is akin to Ruby’s 'yield'. This allows for an unprecedented level of flexibility in how you define your styles, and I cannot wait for you all to start using this.
00:15:13.150 Another improvement is the ability to nest '@media' queries, which previously wasn't very manageable. You can now combine multiple queries in a nested way, which is essential for responsive design. I appreciate this enhancement and believe it will make your lives a lot easier when designing for multiple devices.
00:16:51.022 We also have load paths, allowing you to set an environment variable that directs Sass to search for Sass files in different folders, which can be useful for those of you who maintain libraries or repositories of reusable code snippets. Sadly, the minimum Ruby version is now 1.8.7, and we’ve deprecated the ‘foo’ function. The transition to a cleaner, more straightforward syntax is much preferred.
00:17:31.840 After some teasing about Sass 3.2, I have something really big to share. We've re-implemented Sass in C and renamed it LibSass! This project is about making it faster and to ensure it can compile anywhere without the need for Ruby. The effort is significant, but I believe it will drastically reduce compile times and enhance performance.
00:18:01.250 LibSass aims for an interface that is simple, fast, and easy to integrate with other languages. We've covered many edge cases and improved handling for mixins, variables, unit conversions, and more. We're still working on support for selector inheritance, but it's coming along nicely. All of this revolves around making Sass a more accessible, user-friendly tool, allowing designers to retain familiarity.
00:19:35.740 Most of what I used on a personal basis is already functional, and I encourage you to provide any feedback or suggestions. The aim is to make it easy for developers to utilize, regardless of the framework.
00:21:17.350 Chris has been tirelessly working with the W3C to propose additions like nesting in CSS. It's gratifying to see how these ideas are being incorporated into forward-looking web standards, as they can provide developers and designers with better tools.
00:22:44.060 I want you all to know how much I appreciate your engagement today. If you're interested in helping or have knowledge of C++, please reach out. As passionate advocates, we can improve Sass even more and help empower designers to embrace tools in their workflows.
00:24:09.620 So, in conclusion, I invite you to explore LibSass, Sassy, and all of the new features and changes. Check out the Pragmatic Guide to Sass for more extensive insights into the tool, and I sincerely hope you all get involved with it as you begin using these tools in your own designs.
00:25:52.160 For any final questions or discussions, I am here for you. Let's keep this conversation going and explore how we can continue pushing the boundaries of Sass and web design together.
00:27:10.270 Thank you all for coming to my talk!
Explore all talks recorded at RailsConf 2012
+65