Как подключить SCSS

SCSS — это некий слэнг языка SASS, который больше приближен к обычному CSS. Если вы никогда не пользовались препроцессором для CSS, то перейти на SCSS не составит проблем

Что такое SCSS?

SCSS это код, который очень похож на CSS, но чтобы он работал, нужно через специальную RUBY программу конвертировать в обычный CSS.

У SCSS есть масса полезных штуковин, к примеру переменные. Допустим у вас есть основные цвета и отступы на сайте, все что вам нужно, так задать их в переменные

Пример:

$green: #3ace62;
$padding: 15px;

.content{
padding: $padding;
   h3{
     color: $green;
   }
}

Как вы уже заметили, можно использовать вложения, т.е. как видно на примере, мы задали блоку .content отступ и внутри блока заголовок h3 будет зеленого цвета

Так же в языке SCSS есть такие штуки как : Циклы, условия, математика

Математика:

.link {
  padding: $padding / 2;
}
.link:hover{
  color: darken($green, 5%)
}

Условия:

@mixin clearfix($width: 'auto') { // Если переменная не задана, ставим значение auto

  @if $width == 'auto' {

    display: block;
    width: 100px;

  } @else { // Если переменная width не auto

    display: inline-block;
    width: $width;

  }
}

По началу может показаться, что все это сложно и вам не нужно, но если вы разок поработаете с SCSS, уже будет трудно отказаться! Ближе с синтаксисом вы можете ознакомиться на официальном сайте

Как начать работать с SCSS?

Для начало вам нужно установить RUBY, по этому переходим на сайт и жмем на большую красную кнопку download. Открываете инсталятор и все время кликаете next. Главное учесть, что в одном из пунктов, он предложит установить переменную, чтобы можно было работать в консоле (cmd) , это важно, если галочку не поставите, то переменную потом придется ставить вручную!

После установки ruby, нужно открыть консоль (Открыть run (window + R) , написать cmd и нажать enter), откроется черное окошко, где надо написать gem install sass и нажать enter, дальше установим framework compass ( В дальнейшем он вам понадобиться ) gem install compass

gem install sass
gem install compass

Если все прошло гладко, то в этом же окошке так и будет написано (Successfully installed)

Все самое необходимое уже сделали

Теперь вы можете создавать файлы с типом .scss и начать писать стили, но как их потом компилировать в обычный css?

Использовать IDE

В основном у всех IDE, уже есть встроенный функционал, программа за вас создаст файл и при сохранении скомпилирует в обычный css

Использовать командую строку

Если вы тру кодер и используете предположим блокнот для работы, то вы можете использовать командную строку для конвертирования и даже для отслеживания изменений в файле. Чтобы инициировать папку для scss, в консоле нужно написать:

compass init

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

compass watch

Использовать программу помощник Koala

Koala — Это программа, которая делает все тоже самое, что и команды в консоле, только для удобства сделали графический интерфейс, где вы наглядно и даже не трогая клавиатуру, можете указать путь к рабочей папке, отслеживать изменения и компилировать ваши scss файлы.

Основные преимущества SCSS

Вложенность

.content {
  border: 1px solid red;
  .block { background: white; }
}

Переменные

$green: #3ace62;
$padding: 15px;

.content{
padding: $padding;
   h3{
     color: $green;
   }
}

Математика

$block_width: 10px;
.block{
   width: $block_width - ( 5px * 2 ) - ( 1px * 2 );
}

Циклы

$class: col_;

      // 100 раз по кругу
      @for $i from 1 through 100 {

        // для каждого $col_#{i} вместо i номер цикла 
        .#{$class}#{$i} {

          // Устанавливаем задний фон цвета cornflowerblue и 
          // каждый цикл, делаем его чуть чуть светлее
          background-color: darken(cornflowerblue, 0% + ($i / 2));
        }
      }
	  

Вот и все! Если у вас остались вопросы, пишите в комментариях! Так же можете почитать о кнопках поделиться в социальных сетях