ajax ... nettuts

Sublime Text 3 — установка и настройка препроцессора SASS/SCSS

sass_sublime

И так работая с препроцессором SASS/SCSS возникла необходимость повесить пакет и компилятор на редактор Sublime Text 3. В посте ранее я рассказывал как установить дополнительные пакеты в Sublime Text 3. Теперь расскажу как установить пакет SASS/SCSS.

1. Ставим дополнительный пакет SCSS.

2. Ставим дополнительный пакет Compass

2. В консоли устанавливаем SASS/SCSS синтаксис (Syntax Highlighting)


import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

3. После в корне проекта необходимо создать файл config.rb, увы пока не нашел способ по автоматическому созданию данного конфига. Поэтому создаем ручками и впихиваем следующее


# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Ну теперь можно создать файл с расширением *.scss и чтобы скомпилировать в *.css нажмите сочетание клавиш CTRL + B либо Tools -> Build

P.S. не забываем, что ruby должен быть установлен. В статье sass/scss обзор и установка я рассказывал как установить руби и его пакеты.