How to install sass linux

Установка SASS(SCSS) на Ubuntu. Наверняка многие из вас слышали о препроцессорах и о том, что они упрощают жизнь верстальщикам (хотя это оч спорный вопрос). Чтобы узнать, вкусная ли булочка лежит на витрине магазина, ее нужно купить и попробовать — именно это мы с вами сегодня и сделаем. В двух словах, для тех кто не слышал о том, что такое SASS: Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции css кода файлов каскадных таблиц стилей. Sass упрощает создание css, добавляя ему гибкости при написании кода. Конечно же, на выходе (после компиляции) вы получите все тот же обычный css-файл, но в процессе его написания у Вас будет ряд преимуществ. Вы можете удобно разбить свои стили на разные файлы, используя !import . Однако в отличии от стандартного импорта в css, у вас есть возможность подключать файл с переменными, в которых вы можете описать одинаковые значения свойств, да-да, вы не ослышались, в Sass есть возможность использовать переменные. Приведу небольшой пример:

Читайте также: Linux script exit while

Еще одним из преимуществ sass над css является возможность создавать вложения при написании кода, например:

На выходе вы получите такой css код:

Для начала, чтобы мы могли пользоваться Sass, нужно выполнить следующие действия:

Для использование Sass из командной строки используйте синтаксис: sass input.scss output.css — данная команда переконвертирует input.scss в output.css. Также вы можете сказать Sass, чтобы он смотрел за изменениями в input.scss и обновлял css-файл (output.css) каждый раз, когда изменяется файл Sass (input.scss): sass —watch input.scss:output.css . Если у вас папка с кучей Sass файлов, то вы можете использовать следующий синтаксис: sass —watch app/sass:public/stylesheets где app/sass — путь к папке с sass файлами, а public/stylesheets — путь, где лежат или будут лежать css. Если вас задалбывает каждый раз писать путь к файлам, то вы можете воспользоваться утилитой Compass для автоматического слежения за изменениями в Sass и генерации css. Для установки Compass нужно выполнить следующую команду в терминале:

Теперь, когда наш Compass установлен, нам необходимо создать файл конфигурации для последующего наблюдения за изменениями в фалах Sass и генерации css. Для этого нужно выполнить команду compass create . Далее запускаем Compass в режиме наблюдения командой: compass watch . По умолчанию все css файлы будут записываться в директорию stylesheets в текущей папке (Папка проекта), однако все это можно изменить в файле config.rb, который после генерации его командой compass create , лежит в папке вашего проекта. Содержимое файла изначально у вас будет примерно таким:

Как вы, наверное, сами догадались, параметр css_dir — это папка, куда будут помещаться уже сгенерированные из Sass css файлы. Заменяем css_dir = «stylesheets» на css_dir = «css» и вот у нас уже другая директория с нашими таблицами стилей. Аналогично и с другими параметрами.

У вас недостаточно прав для того чтобы тут гадить.

Источник

Установка Sass на виртуальный сервер Ubuntu

Sass – это CSS-препроцессор, который значительно ускоряет и упрощает процесс создания таблицы стилей по сравнению с использованием обычного CSS. Динамические компоненты Sass позволяют уменьшить код, а также делают его более универсальным. Синтаксис Sass похож на немного улучшенный синтаксис CSS.

Данное руководство продемонстрирует, как установить и запустить Sass на Ubuntu VPS. Для выполнения руководства нужно иметь предварительно настроенный сервер Ubuntu (и веб-сервер, если нужен браузер).

Пожалуйста, обратите внимание, что Sass можно установить и на системы Windows и OS X.

Чтобы получить инструкции по начальной настройке сервера, обратитесь к данной статье.

Установка Sass

Для установки Sass нужно сначала установить Ruby. Кроме того, необходимо установить rubygems (систему управления пакетами Ruby). Для этого используйте команды:

sudo apt-get update
sudo apt-get install ruby-full rubygems

Теперь используйте команду gem, чтобы установить Sass:

sudo gem install sass

Готово! Препроцессор Sass установлен, можно приступать к работе с ним.

Использование Sass

Итак, создайте тестовую таблицу стиля. Перейдите в root каталог веб-сервера (в Apache это /var/www) и создайте в нем файл style.scss:

cd /var/www
nano style.scss

В этот файл внесите правило css:

.box <
padding:20px;
background-color:red;
>

Как видите, это базовый css. Сохраните и закройте файл. Теперь Sass должен перевести этот файл в обычный формат css (с расширением .css):

sass —watch style.scss:style.css

При помощи данной команды Sass сгенерирует файл .css и проверит, нет ли изменений в файле .scss. При внесении изменений в .scss файл .css будет автоматически обновляться.

При первом запуске команды появится ошибка:

[Listen warning]:
Missing dependency ‘rb-inotify’ (version ‘

> 0.9′)!
Please run the following to satisfy the dependency:
gem install —version ‘

Чтобы устранить ее, установив зависимость, запустите команду:

gem install —version ‘

При работе с несколькими файлами Sass запустите команду –watch, чтобы скомпилировать целую папку файлов .scss:

sass —watch stylesheets/sass:stylesheets/css

Данная команда скажет Sass отслеживать все файлы .scss в папке stylesheets/sass, автоматически компилировать их и превращать их в эквиваленты в папке stylesheets/cs. После запуска этой команды Sass будет оставаться в дежурном режиме (watch mode) до тех пор, пока он не будет отключен.

Чтобы отключить дежурный режим, нажмите Ctrl+C. После этого все изменения файлов .scss перестанут автоматически передаваться в файлы .css до следующего запуска команды –watch.

Итак, все довольно просто: нужно только внести правила css в один файл, и его содержимое будет скопировано в другой файл. Но это еще далеко не все функции Sass.

Вложения (Nesting)

Использование вложений – это отличный способ сэкономить время на постоянном переписывании одного и того же селектора. К примеру, на данный момент есть три селектора, которые начинаются одинаково: .box ul, .box li и .box li a. Как правило, для таких селекторов нужно создавать три отдельных правила:

Но Sass позволяет их вложить:

Как видите, это устраняет необходимость трижды прописывать часть .box в селекторе. Кроме того, такой код выглядит просто и понятно. Теперь команда –watch автоматически создаст три эквивалента блоков .css:

.box <
padding: 20px;
background-color: red;
>
.box ul <
margin: 10px;
>
.box li <
float: left;
>
.box li a <
color: #eee;
>

Кроме того, таким же образом можно вкладывать свойства. К примеру, можно написать что-то вроде:

Это сэкономит время, поскольку теперь не придется четыре раза писать padding.

Переменные

Еще одна удобная функция Sass, которая способна сэкономить время разработки – это переменные. Подобно языкам программирования вроде PHP или Java, Sass позволяет задавать переменные один раз и использовать их в коде в случае необходимости. Например, можно написать что-то вроде:

Тогда Sass заменит все значения переменной $color по всему файлу только что установленным кодом цвета #eee.

Миксины (примешивания; mixins)

Это, пожалуй, самая мощная функция Sass. Миксины ведут себя в основном как функции. При помощи миксинов можно использовать целые объявления стиля и даже передавать их аргументы. Подобно функции, миксин сначала нужно объявить. Для примера объявите два разных миксина:

@mixin box-size <
width:200px;
height:200px;
padding:10px;
margin:0px;
>
@mixin border($width) <
border: $width solid #eee;
>

Как видите, в первом миксине нет аргументов. Это можно использовать следующим образом:

В результате получится следующий css:

.box <
width:200px;
height:200px;
padding:10px;
margin:0px;
>

Можно задать второму миксину аргументы:

.box2 <
@include border(1px);
>

При этом будет использоваться правило, определенное в миксине, которое передаст ему аргумент size, что сделает его еще более гибким. Получится следующий css:

.box2 <
border: 1px solid #eee;
>

Это только основные возможности Sass; охватить все функции данного препроцессора в рамках одной статьи, к сожалению, невозможно. Чтобы получить более подробную информацию, обратитесь к веб-сайту Sass.

Форматы вывода Sass

При запуске команды –watch Sass выводит получившиеся данные CSS в файл .css стандартным путем (nested). В целом, существует 4 типа вывода Sass:

Nested (вложенный): отображает структуру стилей CSS и документа HTML.
Expanded (расширенный): добавляет строки со свойствами и правилами.
Compact (компактный): каждое правило CSS со всеми свойствами занимает только одну строку.
Compressed (сжатый): без пробелов (за исключением необходимых пробелов для отделения селекторов и новой строки в конце файла).

Больше об этих форматах вывода можно прочесть по данной ссылке.

Самый простой способ изменения формата вывода – это команда –watch, запущенная с соответствующим флагом в конце. К примеру, чтобы использовать формат expanded:

sass —watch style.scss:style.css —style=expanded

Итоги

Sass – очень мощный препроцессор; научившись использовать его продуктивно, можно тратить намного меньше времени и сил на фронт-энд. Он дополняет синтаксис CSS, делает его более гибким, а также позволяет повысить производительность работы.

Источник

Install Sass

Applications

There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps (and totally worth it).

CodeKit (Paid) Mac
Ghostlab (Paid) Mac Windows
Hammer (Paid) Mac
LiveReload (Paid, Open Source) Mac Windows
Prepros (Paid) Mac Windows Linux
Scout-App (Free, Open Source) Windows Linux Mac

Command Line

When you install Sass on the command line, you’ll be able to run the sass executable to compile .sass and .scss files to .css files. For example:

First install Sass using one of the options below, then run sass —version to be sure it installed correctly. If it did, this will include 1.43.1 . You can also run sass —help for more information about the command-line interface.

Once it’s all set up, go and play. If you’re brand new to Sass we’ve set up some resources to help you learn pretty darn quick.

Install Anywhere (Standalone) You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your PATH . That’s allвЂ”there are no external dependencies and nothing else you need to install. Install Anywhere (npm)

If you use Node.js, you can also install Sass using npm by running

However, please note that this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here. But it has the same interface, so it’ll be easy to swap in another implementation later if you need a bit more speed! Install on Windows (Chocolatey)

If you use the Chocolatey package manager for Windows, you can install Dart Sass by running

Install on Mac OS X or Linux (Homebrew)

If you use the Homebrew package manager for Mac OS X or Linux, you can install Dart Sass by running

Источник

How to install sass linux

Установка Sass

Приложения

Командная строка