Cài đặt sass trong window

1) Install Ruby and Chrome:
– Download Ruby và install: http://rubyinstaller.org/downloads/
– Download Chrome Canary và install: https://www.google.com/intl/en/chrome/browser/canary.html
2) Cho gem vào command line:
My Computer -> Property -> Advance System Setting -> Evironment Variables -> Edit Path -> Thêm đường dẫn ruby bin vào (Ví dụ: C:\Ruby200\bin) -> Logout lại và gõ gem vào, nếu có giá trị thì thành công.
3) Install Sass:

gem install sass --pre --no-ri --no-rdoc

Quá trình install có thể mất vài phút. Sau khi thành công thì gõ, nếu version >= 3.3.0 thì ok:

sass -v

4) Compile Sass:
– File ‘index.html’:

  
	
    
	

	

		
a
		
b
	
	
c

– File ‘style.scss’:

// Variable Definitions
$page-width:    800px;
$sidebar-width: 200px;
$primary-color: #eeeeee;
// Global Attributes
body {
  font: {
    family: sans-serif;
    size: 30em;
    weight: bold;
  }
}
// Scoped Styles
#contents {
  width: $page-width;
  #sidebar {
    float: right;
    width: $sidebar-width;
  }
  #main {
    width: $page-width - $sidebar-width;
    background: $primary-color;
    h2 { color: blue; }
  }
}
#footer {
  height: 200px;
}

– Compile SASS:

sass --watch --scss --sourcemap style.scss:style.css

5) Debug Sass bằng Chrome:
– Gõ URL sau vào trình duyệt Chrome: chrome://flags
– Enable tính năng: Enable Developer Tools experiments -> Relaunch Now
– Vào Chrome Developer -> Setting -> Experiments -> Click vào SASS stylesheet debugging -> Close (cần close để Chrome effect tính năng này)
– Vào Chrome Developer -> Setting -> General -> Sources -> chọn ‘Enable source maps‘ và ‘Auto-reload CSS upon Sass save‘
———–
Kết quả nếu Chrome đọc được SASS là thành công: