mirror of
https://github.com/danog/sass-site.git
synced 2024-12-02 17:38:26 +01:00
e367b287a7
This doesn't actually get the release data from anywhere yet, nor do Ruby Sass nor Dart Sass have their own pages yet.
147 lines
5.0 KiB
Plaintext
147 lines
5.0 KiB
Plaintext
---
|
|
title: Install Sass
|
|
---
|
|
|
|
%h2 There are a couple of ways to start using Sass:
|
|
%ol.list-columns
|
|
%li.gui-application
|
|
%h3 Applications
|
|
%p= image_tag "illustrations/mouse.svg", class: "header-image", height: "160", alt: "Mouse"
|
|
%p
|
|
There are a good many applications that will get you up and running
|
|
with Sass in a few minutes for Mac, Windows, and Linux. You can download
|
|
most of the applications for free but a few of them are paid apps
|
|
<small>(and totally worth it)</small>.
|
|
|
|
%ul.list-feature
|
|
%li
|
|
= link_to "CodeKit", "http://incident57.com/codekit/"
|
|
%span.info (Paid)
|
|
%span.mac-icon
|
|
%li
|
|
= link_to "Compass.app", "http://compass.kkbox.com/"
|
|
%span.info (Paid, Open Source)
|
|
%span.mac-icon
|
|
%span.windows-icon
|
|
%span.linux-icon
|
|
%li
|
|
= link_to "Ghostlab", "http://www.vanamco.com/ghostlab/"
|
|
%span.info (Paid)
|
|
%span.mac-icon
|
|
%span.windows-icon
|
|
%li
|
|
= link_to "Hammer", "http://hammerformac.com/"
|
|
%span.info (Paid)
|
|
%span.mac-icon
|
|
%li
|
|
= link_to "Koala", "http://koala-app.com/"
|
|
%span.info (Open Source)
|
|
%span.mac-icon
|
|
%span.windows-icon
|
|
%span.linux-icon
|
|
%li
|
|
= link_to "LiveReload", "http://livereload.com/"
|
|
%span.info (Paid, Open Source)
|
|
%span.mac-icon
|
|
%span.windows-icon
|
|
%li
|
|
= link_to "Prepros", "https://prepros.io/"
|
|
%span.info (Paid)
|
|
%span.mac-icon
|
|
%span.windows-icon
|
|
%span.linux-icon
|
|
%li
|
|
= link_to "Scout-App", "http://scout-app.io/"
|
|
%span.info (Free, Open Source)
|
|
%span.windows-icon
|
|
%span.linux-icon
|
|
%span.mac-icon
|
|
|
|
%li.command-line-unix
|
|
%h3 Command Line
|
|
%p= image_tag "illustrations/keyboard.svg", class: "header-image", height: "160", alt: "Keyboard"
|
|
%dl#install-ruby-linux
|
|
%dt Linux
|
|
%dd
|
|
If you're using a distribution of Linux, you'll need to install Ruby
|
|
first. You can install Ruby through the apt package manager, rbenv, or
|
|
rvm. You will also need the build-essential package, available
|
|
through a package manager as well.
|
|
%pre
|
|
:preserve
|
|
sudo gem install sass --no-user-install
|
|
|
|
%dl#install-ruby-windows
|
|
%dt Windows
|
|
%dd
|
|
Before you start using Sass you will need to install Ruby. The fastest
|
|
way to get Ruby on your Windows computer is to use
|
|
<a href="http://rubyinstaller.org">Ruby Installer</a>. It's a
|
|
single-click installer that will get everything set up for you super
|
|
fast.
|
|
|
|
%dd
|
|
The installer will also install a Ruby command line
|
|
powershell application that will let you use the Ruby libraries.
|
|
|
|
%dl#install-ruby-mac
|
|
%dt Mac
|
|
%dd
|
|
If you prefer the command line over an application then getting Sass
|
|
set up is a fairly quick process. Sass has a Ruby dependency but if
|
|
you're using a Mac, congratulations, Ruby comes pre-installed.
|
|
|
|
%dl
|
|
%dt Install Sass
|
|
%dd
|
|
%p
|
|
Here's the quickest way we've found to start using Sass by using
|
|
the command line:
|
|
|
|
%ol
|
|
%li
|
|
%p
|
|
<strong>Open your Terminal or Command Prompt.</strong> On the
|
|
Mac the Terminal.app comes installed by default. It's located
|
|
in your "Utilities" folder. On Windows, run `cmd`.
|
|
|
|
%li
|
|
%p
|
|
<strong>Install Sass.</strong> Ruby uses Gems to manage its
|
|
various packages of code like Sass. In your open terminal
|
|
window type:
|
|
%pre
|
|
:preserve
|
|
gem install sass
|
|
%p
|
|
This will install Sass and any dependencies for you. It's pretty
|
|
magical. If you get an error message then it's likely you will
|
|
need to use the <code>sudo</code> command to install the Sass
|
|
gem. It would look like:
|
|
%pre
|
|
:preserve
|
|
sudo gem install sass
|
|
|
|
%li
|
|
%p
|
|
<strong>Double-check.</strong> You should now have Sass
|
|
installed, but it never hurts to double-check. In your
|
|
terminal application you can type:
|
|
%pre
|
|
:preserve
|
|
sass -v
|
|
- if data.respond_to?(:version)
|
|
%p It should return <code>Sass #{impl_version :ruby}</code>.
|
|
Congratulations! You've successfully installed Sass.
|
|
- else
|
|
%p It should return <code>Sass ???</code>. Congratulations!
|
|
You've successfully installed Sass.
|
|
|
|
%li
|
|
%p
|
|
<strong>Go and play.</strong> If you're brand new to Sass
|
|
we've set up some resources to help you learn pretty darn
|
|
quick.
|
|
|
|
%p= link_to "Learn More About Sass", "/guide", :class => "button primary"
|