И так, решил добавить стилизацию через 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; } }