Sass,Compass

 

WIndowsUbuntu

Ruby

Так же, были проблемы с сертификатами , решаются  удалением , добавлением репозитория , обновлением   руби.

 gem sources --remove https://rubygems.org/
 gem sources --add http://rubygems.org
 gem update --system

 

Railsinstaller

 

sass:

gem install sass

Если нужно удалить более новую версию и спользуем

gem uninstall sass

далее выбираем версию которая нам не нужна

Установка compass (сам установит нужную версию sass )

gem update --system
gem install compass
#!/bin/bash
sudo apt-get install ruby-full
sudo gem install sass
sudo gem install compass

 

создаем проект :

compass create <myproject> /* создаем compass проект */

compass watch [path/to/compass-project] /* запускаем Compass просматривать на изменения папку [path/to/compass-project]*/

 

 

В директории с созданным проектом появится файл , где нужно будет указать параметры для спрайтов а именно :

  • относительный url
  • корневую директорию
  • путь к папке с изображениями
  •  к sass , к папке с css
  •  сжатие css
  • формировать карту со ссылками на оригинальный scss

Пример созданного config.rb  (с моими дополнениями ):

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/wp-content/themes/medic_theme/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
#javascripts_dir = "javascripts"
#output_style = :compact
output_style = :compressed
#project_path    = 'D:\doc\NetBeansProjects\newManeken\wp-content\themes\medic_theme\config.rb'
sourcemap = true

# 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

Используется для консольных команд compass watch, compass update.

А так же можно параметры задать через главный scss файл , но некоторые параметры нужно будет устанавливать как ключи для компилятора (препроцессора).

Подробнее про sass  можно почитать тут .

Про конфигурацию compass тут .

 

 

 

Для Netbeans  заходим в :

  1. В общие  настройки Снимок2
  2. Создаем проект
  3. Настройки проекта и в препроцессорах указываем  пути к sass паке  вывода . Снимок
  4. ) В главном scss  прописываем пути  к паке с фото и ее url адресом на сервере
    @import "compass";
    @import "compass/reset";
    @import "compass/css3/selection";
    
    
    /* for sprites **/
    $project-path: absolute-path("..");//выходим на папку назад , он    ищет   папку images
    @import "compass/configuration";
    
    $compass-options: (
    http_path: "/wp-content/themes/metalsetka/",
    images_dir: "img"
    );
    @include compass-configuration($compass-options);
     
    @import "compass/utilities/sprites";
    // Пример подключения папки для  спрайтов с картинками 
    //@import "img/*.png";
    
    /*****/

     

    Autoprefixer

gem install autoprefixer-rails -v '5.0.0.2'

 

Leave a Reply

Your email address will not be published. Required fields are marked *

3 + 17 =

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.