И так работая с препроцессором 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 обзор и установка я рассказывал как установить руби и его пакеты.