Sass,Compass

WIndows

Ubuntu

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

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

gem sources --remove https://rubygems.org/

gem sources --add http://rubygems.org

gem update --system

Railsinstaller

sass:

<del>gem install sass</del>

1	<del>gem install sass</del>

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

gem uninstall sass

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

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

gem update --system
gem install compass

1 2	gem update --system gem install compass

#!/bin/bash
sudo apt-get install ruby-full
sudo gem install sass
sudo 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 &amp;&amp; rm -rf sass &amp;&amp; mv scss sass

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 заходим в :

В общие настройки
Создаем проект
Настройки проекта и в препроцессорах указываем пути к sass паке вывода .

) В главном 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";

/*****/

@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'

1	gem install autoprefixer-rails -v '5.0.0.2'

andxbes

Sass,Compass

Leave a Reply Cancel reply