{"id":2363,"date":"2015-03-19T16:26:00","date_gmt":"2015-03-19T14:26:00","guid":{"rendered":"http:\/\/dima.fi\/blog\/?p=2363"},"modified":"2026-01-10T22:59:03","modified_gmt":"2026-01-10T20:59:03","slug":"get-into-sass","status":"publish","type":"post","link":"https:\/\/dima.fi\/blog\/get-into-sass\/","title":{"rendered":"Dude, get into sass!"},"content":{"rendered":"\n

I found out that many hesitate to learn sass<\/strong>. Internet is full of guides with complicated instruction for \u00fcber super editors and SDK. They just ruin an idea of easier approaching and spreading this lovely invention.<\/p>\n\n\n\n

So if you are one of those hesitators, dude, throw away all thought you have about sass<\/strong> or scss<\/strong>. Especially if you think that it’ll take too long to learn or it requires odd apps. Nope! Don’t waste your time any more. The only thing you need is a compiler. You still can use a code editor you love.<\/p>\n\n\n\n

Sass\/scss itself is quite simple. Sass is kind of Ruby style coding and scss is more like css. I prefer scss, because I like that it is visually the same as css. And it also suitable for my brain to process quickly \ud83d\ude1b<\/p>\n\n\n\n

In web developing I use Notepad++<\/a> on Windows and BBEdit<\/a> on Mac. I’ve chosen them, because of their best, IMO, solution for editing over ssh connection to the servers. And their GUI is so lovely minimalistic.<\/p>\n\n\n\n

But stuff you want to know is Koala<\/a>. The simplest, freest and cross-platformiest compiler you’ll ever find. Sure there is many other apps and ways to compile. But Koala is best to start from or to stick with for entire life. Did I say that it is free? Still, it would be better to donate something to developers as you are a developer yourself. Aren’t you?<\/p>\n\n\n\n

Just drop folder, containing scss files, into Koala and you are done \ud83d\ude09 Just write something in scss and save in .scss<\/code> extension and Koala compiles it automatically to .css<\/code>. Later you can little by little get familiar with Koala’s settings. There is only a few \ud83d\ude09<\/p>\n\n\n\n

You can keep both .scss<\/code> and .css<\/code> files open in editor’s split-screen and see compiled results almost in real-time. In Notepad++ you can manually reload file by adding some short keys to Reload or use Document Monitor plugin that reloads changed files automatically in 3sec intervals.<\/p>\n\n\n\n

But if you are very familiar with Linux and used to edit files over ssh connection. You probably think how to compile files on the server. The simplest way is to use Ruby based Sass compiler.<\/p>\n\n\n\n

Make sure that ruby is installed and then type gem install sass<\/code> and sass compiler will be installed. Finally just go to the directory where you see both scss<\/em> and css<\/em> folders and type sass --watch scss:css -t compressed --sourcemap=none<\/code> And it will automatically watch for changes in scss<\/em> folder and compile everything into css<\/em> folder. -t compressed<\/code> parameter will compress your css file. See more options by typing sass -h<\/code>.<\/p>\n\n\n\n

And now I yell that you’ll learn scss in 5 seconds. Ready?<\/p>\n\n\n\n

$mycolor: red;\n.header { color: $mycolor; }<\/code><\/pre>\n\n\n\n
A compiled result will be .header { color: red; }<\/code><\/p>\n\n\n\n
You have just learnt how to create a variable and use it in css!<\/p>\n\n\n\n
The very best place to learn sass and scss basics just in few minutes is Sass<\/a>: Syntactically Awesome Style Sheets<\/a><\/p>\n\n\n\n
More nuances of sass you find there The Sass Way<\/a><\/p>\n\n\n\n
Think again and enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"
I found out that many hesitate to learn sass. Internet is full of guides with complicated instruction for \u00fcber super editors and SDK. They just ruin an idea of easier approaching and spreading this lovely invention. So if you are one of those hesitators, dude, throw away all thought you have about sass or scss. Especially if you think […]<\/p>\n","protected":false},"author":1,"featured_media":2436,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg","fifu_image_alt":"Dude, get into sass!","footnotes":""},"categories":[133],"tags":[145,139,146,147,134],"class_list":["post-2363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-devs","tag-css","tag-dev","tag-sass","tag-scss","tag-web","has-thumbnail"],"_links":{"self":[{"href":"https:\/\/dima.fi\/blog\/wp-json\/wp\/v2\/posts\/2363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dima.fi\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dima.fi\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dima.fi\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dima.fi\/blog\/wp-json\/wp\/v2\/comments?post=2363"}],"version-history":[{"count":3,"href":"https:\/\/dima.fi\/blog\/wp-json\/wp\/v2\/posts\/2363\/revisions"}],"predecessor-version":[{"id":2385,"href":"https:\/\/dima.fi\/blog\/wp-json\/wp\/v2\/posts\/2363\/revisions\/2385"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dima.fi\/blog\/wp-json\/wp\/v2\/media\/2436"}],"wp:attachment":[{"href":"https:\/\/dima.fi\/blog\/wp-json\/wp\/v2\/media?parent=2363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dima.fi\/blog\/wp-json\/wp\/v2\/categories?post=2363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dima.fi\/blog\/wp-json\/wp\/v2\/tags?post=2363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}