Как скомпилировать scss в css
Перейти к содержимому

Как скомпилировать scss в css

  • автор:

Установка — SASS: Основы работы

Использовать SASS можно во многих случаях. Это может быть:

  • онлайн-окружение, которое автоматически переводит код из SASS в CSS,
  • пакет в вашей системе (как например surge из первого проекта),
  • отдельное программное обеспечение, переводящее файлы из .sass/.scss в .css.

Разберёмся с каждым пунктом отдельно. Во время прохождения курса вы можете использовать любой вариант, который вам удобен. При работе с реальными проектами лучше устанавливать SASS в виде пакета в вашу систему. Тогда, используя сборщики можно будет автоматизировать процесс компиляции, то есть перевода кода из SASS в CSS.

Онлайн-окружение

Для использования SASS в онлайн-окружении подойдёт почти любой известный вам онлайн-редактор кода. Например, CodePen . Во вкладке с CSS выберите использование препроцессора SASS. Для синтаксиса SCSS необходимо выбрать соответствующий пункт выпадающего меню.

Это самый простой и быстрый вариант, который позволит вам писать CSS-код с использованием препроцессора SASS.

Другим популярным инструментом является сервис Sassmeister . Он позволяет быстро переводить код SASS в обычный CSS. Преимуществом данного сервиса является возможность выбора разных типов компиляторов. Это позволяет проверить свой код в разных условиях и, возможно, выявить несколько ошибок, с которыми можно столкнуться.

Программное обеспечение

Вы можете установить отдельное ПО, которое будет компилировать файлы препроцессора в обычный CSS. Таких программ достаточно много, и многие из них доступны под все основные платформы (Windows, Linux, macOS). Распространённой программой является Koala . Она доступна под все основные платформы, а её интуитивный интерфейс позволит быстро разобраться в процессе компиляции файлов препроцессора.

Просто выберете директорию с вашими файлами .scss, и Koala автоматически преобразует их в файлы .css.

Установка SASS в виде пакета

Вы можете установить SCSS в виде обычного npm-пакета в вашу систему. Это наиболее простой и быстрый путь, позволяющий вам использовать SASS без установки дополнительного программного обеспечения и не требует выхода в интернет, как в случае с онлайн-сервисами.

Для установки SASS убедитесь, что у вас установлен Node.js. Откройте терминал и выполните следующую команду:

sudo npm install -g sass 

Если вы используете операционную систему Windows, вам необходимо установить пакетный менеджер Chocolatey. О способах установки вы можете прочитать в руководстве Как начать разрабатывать в Windows.

После установки Chocolatey выполните следующую команду:

install sass 

Для установки SASS на macOS используйте следующую команду:

install sass/sass/sass 

После установки пакета вам в терминале станет доступна команда sass. В базовом её виде вам достаточно передать ей два параметра:

  • Путь к входному файлу. Это находящийся в вашей системе файл .sass/.scss.
  • Путь к выходному файлу. Здесь указывается путь до файла .css, в который запишется весь CSS после компиляции. Не обязательно создавать этот файл заранее. Если его не существует, то программа сама создаст его по пути, который вы указали.

Помимо возможности компиляции, у вас также будет возможность запустить интерактивную оболочку (shell). С помощью неё вы можете легко экспериментировать с различными функциями SASS. Для запуска интерактивной оболочки выполните в терминале команду sass -i:

-i >> 1px + 1px 2px 

По мере прохождения курса вы будете встречать различные функции. Пробуйте их в интерактивной оболочке.

Все примеры и упражнения в данном курсе будут компилироваться с помощью этой библиотеки. Библиотека называется Dart-SASS. Это важно, так как разные компиляторы могут по-разному обрабатывать SASS код. Различия незначительны, но при выборе другой библиотеки стоит поискать отличия.

Дополнительные материалы

  • Документация SASS по установке . По ссылке вы также найдёте и другое программное обеспечение, с помощью которого можно преобразовывать SASS-файлы.

Дополнительное задание

Установите на свой компьютер SASS с помощью пакетного менеджера. Попробуйте создать файл с расширением .scss и скомпилировать его. В scss-файле можете указать следующий код:

header  width: 50%; background: brown; &.w-100  width: 100%; > > 

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Как скомпилировать scss в css

Компиляция SASS/SCSS в CSS в VS CODE с помощью плагина Live Sass Compiler

Компиляция SASS/SCSS в CSS в VS CODE с помощью плагина Live Sass Compiler

14 апреля 2023
Оценки статьи
Еще никто не оценил статью

SASS (Syntactically Awesome Style Sheets) и SCSS (Sassy CSS) — это мощные препроцессоры CSS, которые предоставляют разработчикам множество дополнительных функций, таких как переменные, вложенность, миксины и многое другое, что делает стилизацию веб-сайтов более эффективной и организованной. Однако, браузеры не могут понимать эти языки препроцессоров напрямую, поэтому необходимо компилировать их в обычный CSS перед использованием на веб-страницах.

VS Code — одна из популярных интегрированных сред разработки (IDE) с множеством расширений для облегчения работы разработчиков. Одним из таких расширений является Live Sass Compiler, которое позволяет автоматически компилировать SASS/SCSS файлы в CSS и создавать уменьшенные версии CSS. Давайте рассмотрим, как установить и настроить это расширение.

Установка Live Sass Compiler

Для начала, откройте VS Code и перейдите в расширения VSCODE (Visual Studio Marketplace), либо используйте поиск расширений по идентификатору @glenn2223.live-sass . Установите расширение Live Sass Compiler и перезагрузите VS Code, если это требуется.

Устанавливаем расширение

Настройка компиляции SASS/SCSS в CSS

Теперь, когда расширение установлено, откройте ваш файл SASS/SCSS в VS Code. Внизу на панели инструментов вы увидите надпись «Watch Sass» с иконкой глаза. Щелкните по ней, чтобы включить автоматическую компиляцию SASS/SCSS файлов в CSS.

Нажимаем на иконку с глазом

При изменении файла SASS/SCSS, расширение будет автоматически компилировать его в CSS, и результат будет сохраняться в отдельном CSS файле.

Процесс компиляции

Оптимизация CSS файла с помощью Live Sass Compiler

Вы также можете настроить различные параметры компиляции, используя настройки расширения.

Например, вы можете настроить расположение экспортируемого CSS файла, стиль компиляции CSS (расширенный или сжатый), имя расширения для экспортируемого файла и другие параметры.

Для этого нажмите Ctrl+Shift+P, введите «Открыть пользовательские настройки (JSON)» и откройте файл с настройками. Затем добавьте необходимые параметры в файл настройки.

Например, добавим следующий фрагмент:

settings.json

"liveSassCompile.settings.formats":[    "format": "compressed"  >,  ] 

Выглядеть это будет следующим образом

При компиляции SASS/SCSS файлов, ваш CSS файл будет максимально сжат.

Другие полезные настройки:

Подробнее о них на github.

settings.json

  "liveSassCompile.settings.formats":[    "format": "expanded",  "extensionName": ".css",  "savePath": "/css"  >,    "extensionName": ".min.css",  "format": "compressed",  "savePath": "/dist/css"  >  ],  "liveSassCompile.settings.excludeList": [  "**/node_modules/**",  ".vscode/**"  ],  "liveSassCompile.settings.generateMap": true,  "liveSassCompile.settings.autoprefix": [  "defaults"  ] > 

Меню категорий

    Загрузка категорий.

Добро пожаловать в Блог Разработчика Владислава Александровича.

Ведется медленная, но уверенная разработка функционала сайта.

Django Core: 0.3.4 / Next.js 1.0 / UPD: 05.06.2023

Как установить Sass (SCSS) на Mac и скомпилировать в CSS

Как установить Sass (SCSS) на Mac и скомпилировать в CSS

Прежде всего уточним что такое Sass. Абревиатура SASS расшифровывается как Syntactically Awesome Style Sheets дословно переводится как синтетически потрясающие таблицы стилей. Установка sass или scss довольно проста — давайте разберем ее по шагам.

Как установить Sass (SCSS) на Mac

Для того чтобы установить Sass (он же будет обрабатывать и все scss файлы) на Mac, сначала установим джем для sass.

    Вводим в терминал команду:

sudo gem install sass 

Как установить Sass (SCSS) в Sublime Text

Для того, чтобы синтаксис Sass и scss правильно распознавался у вас в Sublime Text, нужно установить пакет Sass:

  1. Заходим в Sublime Text и идем в Tools — Command Palette.
  2. В появившуюся строку вводим Package Control и в выпадающем меню выбираем Package Control: Install Package.
  3. В появившейся строке вводим Sass и выбираем его.
  4. Немного ждем пока установится пакет и вуаля — теперь в правом нижнем углу, помимо всех остальных форматов, мы можем выбирать Sass. Но это еще не все.
  5. Чтобы и в дальнейшем у вас все scss файлы сразу открывались с форматированием и синтаксисом sass — открываем новый scss файл, идем в View — Syntax — Open all with current extension as . — Sass.

Как перекомпилириовать Sass (SCSS) в CSS. Преобразование SCSS в CSS

Как препроцессить Sass (scss) в CSS в терминале:

    Для того, чтобы препроцесить (скомпилировать) наш .scss файл в обычный .css запустим в терминале команду:

sass input.scss:output.css 
sass --watch input.scss:output.css 

Top articles

How to display current git branch and colours in terminal.

CSS selectors for test automation — selector types and syntax.

Add jquery library to a website page.

Get in touch

© 2011-2022 Stijit | All rights reserved | Images: Unsplash

Основы Sass

Прежде, чем Вы сможете использовать Sass, Вам необходимо его настроить в вашем проекте. Если Вы хотите просто почитать, то не стесняйтесь — читайте, но мы рекомендуем сначала установить Sass. Установите Sass для того, чтобы разобраться во всех возможностях Sass.

Препроцессинг

Написание CSS само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS , например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.

Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS -файл, который Вы сможете использовать на любом сайте.

Самый простой способ получить такой результат — использовать терминал. После того, как Sass установлен, вы можете компилировать ваш Sass в CSS , используя команду sass . Вам всего лишь нужно сообщить Sass, где взять файл Sass и в какой файл CSS его скомпилировать. Например, запустив команду sass input.scss output.css в терминале, вы сообщаете Sass взять один Sass файл, input.scss , и скомпилировать в файл output.css .

Также, вы можете следить за изменениями только определенных файлов или папок, используя флаг —watch . Данный флаг сообщает Sass, что необходимо следить за изменениями указанных файлов и при наличии таковых производить перекомпиляцию CSS после сохранения файлов. Если вы хотите отслеживать изменения (вместо ручной перекомпиляции) вашего файла, например, input.scss , то вам необходимо просто добавить флаг в команду:

sass –watch input.scss output.css

Вы также можете указать папки для отслеживания изменений и куда сохранять компилированные CSS файлы, для этого достаточно указать пути и разделить их двоеточием, например:

sass --watch app/sass:public/stylesheets 

Sass будет отслеживать все файлы в директории app/sass и компилировать CSS в директорию public/stylesheets .

Переменные

Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS , которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $ . Рассмотрим пример:

SCSS Syntax

$font-stack: Helvetica, sans-serif; $primary-color: #333; body  font: 100% $font-stack; color: $primary-color; > 

Sass Syntax

$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color 

CSS Output

body  font: 100% Helvetica, sans-serif; color: #333; > 

Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS -файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.

Вложенности

При написании HTML , Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

Sass позволит вам вкладывать CSS селекторы таким же образом, как и в визуальной иерархии HTML. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.

Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

SCSS Syntax

nav  ul  margin: 0; padding: 0; list-style: none; > li  display: inline-block; > a  display: block; padding: 6px 12px; text-decoration: none; > > 

Sass Syntax

nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none 

CSS Output

nav ul  margin: 0; padding: 0; list-style: none; > nav li  display: inline-block; > nav a  display: block; padding: 6px 12px; text-decoration: none; > 

Вы заметили, что селекторы ul , li , и a являются вложенными в селектор nav ? Это отличный способ сделать ваш CSS -файл более читабельным. Когда вы сгенерируете CSS -файл, то на выходе вы получите что-то вроде этого:

Фрагментирование

Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS , которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss . Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import .

Импорт

CSS имеет возможность импорта, которая позволяет разделить ваш CSS -файл на более мелкие и облегчить @import , то в CSS создается еще один HTTP -запрос. Sass берет идею импорта файлов через директиву @import , но вместо создания отдельного HTTP -запроса Sass импортирует указанный в директиве файл в тот, где он вызывается, т.е. на выходе получается один CSS -файл, скомпилированный из нескольких фрагментов.

Например, у вас есть несколько фрагментов Sass-файлов — _reset.scss и base.scss . И мы хотим импортировать _reset.scss в base.scss .

SCSS Syntax

// _reset.scss html, body, ul, ol  margin: 0; padding: 0; > 
// base.scss @import 'reset'; body  font: 100% Helvetica, sans-serif; background-color: #efefef; > 

Sass Syntax

// _reset.sass html, body, ul, ol margin: 0 padding: 0 
// base.sass @import reset body font: 100% Helvetica, sans-serif background-color: #efefef 

CSS Output

html, body, ul, ol  margin: 0; padding: 0; > body  font: 100% Helvetica, sans-serif; background-color: #efefef; > 

Обратите внимание на то, что мы используем @import ‘reset’; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение .scss . Sass — умный язык и он сам догадается.

Миксины (примеси)

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3 , где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS , которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform :

SCSS Syntax

@mixin transform($property)  -webkit-transform: $property; -ms-transform: $property; transform: $property; > .box  @include transform(rotate(30deg)); > 

Sass Syntax

=transform($property) -webkit-transform: $property -ms-transform: $property transform: $property .box +transform(rotate(30deg)) 

CSS Output

.box  -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); > 

To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin transform . We’re also using the variable $property inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Расширение/Наследование

Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходах, используя другие возможности Sass, которые идут рука-об-руку с расширением, классами-шаблонами. Класс-шаблон — особый тип классов, который выводится только при использовании расширения — это позволит сохранить ваш скомпилированный CSS чистым и аккуратным.

SCSS Syntax

/* This CSS will print because %message-shared is extended. */ %message-shared  border: 1px solid #ccc; padding: 10px; color: #333; > // This CSS won't print because %equal-heights is never extended. %equal-heights  display: flex; flex-wrap: wrap; > .message  @extend %message-shared; > .success  @extend %message-shared; border-color: green; > .error  @extend %message-shared; border-color: red; > .warning  @extend %message-shared; border-color: yellow; > 

Sass Syntax

/* This CSS will print because %message-shared is extended. */ %message-shared border: 1px solid #ccc padding: 10px color: #333 // This CSS won't print because %equal-heights is never extended. %equal-heights display: flex flex-wrap: wrap .message @extend %message-shared .success @extend %message-shared border-color: green .error @extend %message-shared border-color: red .warning @extend %message-shared border-color: yellow 

CSS Output

.message, .success, .error, .warning  border: 1px solid #ccc; padding: 10px; color: #333; > .success  border-color: green; > .error  border-color: red; > .warning  border-color: yellow; > 

Вышеуказанный код сообщает классам .message , .success , .error и .warning вести себя как %message-shared . Это означает, что где бы не вызывался %message-shared , то и .message , .success , .error и .warning тоже будут вызваны. Магия происходит в сгенерированном CSS , где каждый из этих классов получает css-свойства, как и %message-shared . Это позволит вам избежать написания множества классов в HTML элементах.

Вы можете расширить большинство простых CSS селекторов прибавление к классам-шаблонам в Sass, однако, использование шаблонов — простейший способ быть уверенным, что вы не расширяете класс везде, где он используется в ваших стилях, что могло бы привести к непреднамеренным наборам стилей в вашем CSS.

Когда вы генерируете ваш CSS , то он будет выглядеть как пример ниже. Обратите внимание, %equal-heights не попадает в CSS , так как ни разу не был использован.

Математические операторы

Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как + , — , * , / и % . В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article .

SCSS Syntax

.container  width: 100%; > article[role="main"]  float: left; width: 600px / 960px * 100%; > aside[role="complementary"]  float: right; width: 300px / 960px * 100%; > 

Sass Syntax

.container width: 100% article[role="main"] float: left width: 600px / 960px * 100% aside[role="complementary"] float: right width: 300px / 960px * 100% 

CSS Output

.container  width: 100%; > article[role="main"]  float: left; width: 62.5%; > aside[role="complementary"]  float: right; width: 31.25%; > 

Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:

Sass © 2006–2018 Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, Jina Anne, и многочисленные участники. Доступно для использования и изменения по лицензии MIT.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *