Блог о программировании на PHP, Yii2, 1C-Bitrix

Добавление sass на сайт

И так, решил добавить стилизацию через sass. Автоматическое компилирование убрал, т.к. скорее всего будет приличная нагрузка, да и не нужно оно, css ведь обновляется раз в 100 лет.

Установка на хостинге осуществляется через:

gem install sass

Так же необходимо создать файлы конфигурации .gemrc:

gemhome:/homepath/.gem/ruby/1.8
gempath:
- /homepath/.gem/ruby/1.8
- /usr/lib64/ruby/gems/1.8

И файл конфигурации для профиля .profile:

export GEM_HOME=$HOME/.gem/ruby/1.8/
export GEM_PATH=$GEM_HOME:/usr/lib64/ruby/gems/1.8
export GEM_CACHE=$GEM_HOME/cache
export PATH=$GEM_HOME/bin:$PATH

Инициализация конфига в текущей директории с css:

compass config config.rb --sass-dir=. --css-dir=.

Компиляция файла scss:

compass compile style.scss

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

Моменты с которыми удалось поэксперементировать:

Вложенность:

article{ display: block; margin: 0 0 15px 0; padding: 10px 0;
	.plusone{ float: right; padding: 5px 0 0 0; }
	h1{ font-size: 24px;
		a{ color: #000; font-weight: bold; text-decoration: none; }
	}
	footer{ clear: left; }
}

Переменные:

$border: 1px solid #ccc;
$image-dir: 'images/';

$link: #0167ab;
$link-hover: $link * 2;
$line-height: $font-size * 1.4;

Арифметические выражения радуют :)
И не нужно для каждой картинки прописывать путь до images.

Вызов функции градиента:

@mixin gradient( $start, $end ){ background: $start; background: -moz-linear-gradient(top, $start 0%, $end 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $start), color-stop(100%,$end)); background: -webkit-linear-gradient(top, $start 0%, $end 100%); background: -o-linear-gradient(top, $start 0%, $end 100%); background: -ms-linear-gradient(top, $start 0%, $end 100%); background: linear-gradient(to bottom, $start 0%, $end 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start', endColorstr='$end',GradientType=0 ); }

Использование @media:

$small: 320px;
$large: 1024px;

@mixin respond-to($media) {
	@if $media == handhelds {
		@media only screen and (max-width: $small) { @content; }
	}
	@else if $media == medium-screens {
		@media only screen and (min-width: $small + 1) and (max-width: $large - 1) { @content; }
	}
	@else if $media == wide-screens {
		@media only screen and (min-width: $large) { @content; }
	}
}

...

#share42{
...
@include respond-to(medium-screens){ left: 0; top: 250px !important; }
	@include respond-to(wide-screens){ left: 27px; }
}