Как да инсталирате SASS на Linux Mint? (кратки стъпки за инсталиране и добавяне към Webstorm)

Здравейте. Понеже ми трябваше SASS за курса Front-End на Java, а повече ми харесва да ползвам линукс минт пред уиндоус, реших да си инсталирам SASS на линукса и от там да си работя с него. При мен се получиха нещата и ще се опитам да ви опиша стъпките, които направих за да го подкарам.(Не е нищо сложно, но да не губите време да се ровичкате в нета, реших да опитам да ви го спестя.)

За източник на информация използвам https://sass-lang.com/install . Стига толкова празни приказки, да започваме:

 

1. Отворете терминала и напишете

sudo apt-get install ruby-sass

Възможно е да ви изреве някакви грешки за правата въпреки че ползвате sudo. Но въпреки тях инсталация минава.

За да проверите дали наистина всичко е наред, след като приключи инсталацията напишете в терминала

sass -v

Ако всичко е наред трябва да ви изпише моментната версия на SASS. При мен показва -

Sass 3.4.21 (Selective Steve)

 

2. Как да използвате SASS в Webstorm?

  2.1. Отворете WebStorm и създайте проект.

  2.2. Отворете File-Settings-File Watchers и кликнете на зеления плюс горе в дясно. От падащото меню изберете SCSS и   ако всичко е наред при вас трябва където пише Program да имате зададен път. При мен е /usr/bin/scss. Ако го нямате или ръчно трябва да го добавите или има някакъв проблем при инсталирането. Общо взето тук не се пипа нищо. Просто трябва да проверите дали си намира пътя. Ако си е намерило път вероятно всичко е наред и просто кликнете ОК.

За да пробвате дали работи, в проекта просто направете нов файл с разширение scss(десен бутон на папката с проекта и New File. Името на файла с разширение .scss - примерно styles.scss) И след това може да напишете някакъв елементарен код, за да видите дали просто ще компилира файла в .css

Примерно можете в SASS файла да напишете нещо елементарно от рода на

body{
  div{
    p{

      color: red;
    }
  }
}

 

И ако всичко е сработило в другия файл с разширение .css би трябвало да получите

body div p {
  color: red; }

/*# sourceMappingURL=styles.css.map */

 

Това е от мен. Надявам се да съм ви бил полезен. Държа да отбележа , че направих точно тези стъпки и при мен се получи. Но няма как да знам как ще е при вас. Ако има нещо пишете коментари и ако мога ще помагам. Успех.