Css файл можно переименовать в scss и он будет валидным

Обновлено: 02.07.2024

Есть ли вообще возможность импортировать обычный файл CSS с помощью команды Sass @import ? Хотя я не использую весь синтаксис SCSS из sass, мне все еще нравятся его функции объединения/сжатия, и я хотел бы иметь возможность использовать его без переименования всех моих файлов в*. scss

Допустим, я создал файл .CSS, который скомпилировал из файла .SCSS. Что произойдет, если один из членов моей команды непосредственно отредактирует файл .CSS, а я приду и перекомпилирую изменения в файл .SCSS? Как остановить потерю прямых обновлений файла CSS?

Я делаю свои первые шаги в PhpStorm и SASS. Я зашел в Файл > Настройки > файловый наблюдатель и добавил SCSS Это моя текущая конфигурация: Программа: C:\Ruby23\bin\scss.bat Аргументы: --no-cache --update $FileName$:$FileParentDir$\$FileNameWithoutExtension$.css Рабочий каталог: $FileDir$ Выходные.

После того, как у меня возникла та же проблема, я запутался со всеми ответами здесь и комментариями по репозиторию sass в github.

Я просто хочу отметить, что по состоянию на декабрь 2014 года этот вопрос был решен. Теперь можно импортировать файлы css непосредственно в ваш файл sass. Следующий PR в github решает эту проблему.

Синтаксис такой же , как и сейчас - @import "your/path/to/the/file" , без расширения после имени файла. Это позволит импортировать ваш файл напрямую. Если вы добавите *.css в конце, это переведется в правило css @import url(. ) .

Если вы используете некоторые из новых комплектов модулей "fancy", таких как webpack , вам, вероятно, придется использовать use

в начале пути. Итак, если вы хотите импортировать следующий путь node_modules/bootstrap/src/core.scss , вы бы написали что-то вроде
@import "

NOTE:
Похоже, это работает не для всех. Если ваш интерпретатор основан на libsass , он должен работать нормально (проверьте этот )., который я тестировал с помощью @import на узле-sass, и он работает нормально. К сожалению, это работает и не работает на некоторых экземплярах ruby.

Чтобы сократить длинную историю, синтаксис в следующем:

для импорта (включения) необработанного CSS-файла синтаксис не имеет расширения .css в конце (приводит к фактическому чтению частичного s[ac]ss|css и включению его в строку SCSS/SASS):

чтобы импортировать CSS-файл традиционным способом

синтаксис идет традиционным способом, с расширением .css в конце (приводит к @import url("path/to/file.css"); в вашем скомпилированном CSS):

И это чертовски хорошо: этот синтаксис элегантен и лаконичен, плюс обратная совместимость! Он отлично работает с libsass и node-sass . __

ответ может быть обновлен, как только что-то изменится .

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

И он будет включать в себя содержимое файла, а не использовать стандартную директиву CSS @import.

Я использую gulp в качестве бегуна задач, который объединяет и сокращает для меня файлы scss . В этом случае, если я попытаюсь импортировать обычный файл CSS , он скомпилируется в оператор css import , как показано ниже: /* style.scss */ @import ../../bower_components/animate.css/animate.css; /*.

Похоже, что это неосуществимо на момент написания этой статьи:

Для реализации libsass (C/C++) импорт работает для *.css так же, как и для файлов *.scss - просто опустите расширение:

Это приведет к импорту path/to/file.css .

См. этот ответ для получения более подробной информации.

См. этот ответ для реализации Ruby (sass gem)

Теперь импортировать файл CSS так же просто, как:

Если у вас есть файл .css , который вы не хотите изменять, а также изменять его расширение на .scss ( например, этот файл из разветвленного проекта, который вы не поддерживаете), вы всегда можете создать символическую ссылку, а затем импортировать ее в свой .scss .

Создает символическую ссылку:

Импортирует файл символической ссылки в целевой файл .scss :

Ваш целевой выходной файл .css будет содержать содержимое импортированного файла symlink .scss , а не правило импорта CSS ( упомянутое @yaz с наибольшим количеством голосов комментариев )., и у вас нет дублированных файлов с различными расширениями, что означает, что любое обновление, сделанное внутри исходного файла .css , немедленно импортируется в ваш целевой выходной файл.

Вы можете использовать сторонний importer для настройки семантики @import .

node-sass-import-once, который работает с узлом-sass (для Node.js), может встроенно импортировать файлы CSS.

Пример прямого использования:

Обратите внимание, что node-sass-import-once в настоящее время не может импортировать партиалы Sass без явного начального подчеркивания. Например, с файлом partials/_partial.scss :

@import partials/_partial.scss удастся
@import * partials/partial.scss не удается

В общем, имейте в виду, что пользовательский импортер может изменить любую семантику импорта. Прочтите документы, прежде чем начать его использовать.

Если я прав, то css совместим с scss, так что вы можете изменить расширение a css на scss, и оно должно продолжать работать. Как только вы измените расширение, вы можете импортировать его, и он будет включен в файл.

Если вы этого не сделаете, sass будет использовать css @import, что вам не нужно.

Я придумал элегантный, похожий на Rails способ сделать это. Во-первых, переименуйте свой файл .scss в .scss.erb , то используйте синтаксис следующего вида (пример для highlight_js-rails4 gem CSS активов ):

Почему вы не можете разместить файл непосредственно через SCSS :

Выполнение @import в SCSS прекрасно работает для файлов CSS, если вы явно используете полный путь так или иначе. В режиме разработки rails s обслуживает ресурсы без их компиляции,поэтому такой путь работает.

. потому что размещенный путь буквально /assets/highlight_js/github.css . Если вы щелкните правой кнопкой мыши на странице и выберите "просмотреть исходный код", а затем нажмите на ссылку для таблицы стилей с приведенным выше @import , вы увидите там строку, которая выглядит следующим образом:

Движок SCSS переводит "highlight_js/github.css" в url(highlight_js/github.css) . Это будет работать плавно, пока вы не решите попробовать запустить его в производстве, где предварительно скомпилированные активы имеют hash, введенный в имя файла. Файл SCSS все равно будет преобразован в статический /assets/highlight_js/github.css , который не был предварительно скомпилирован и не существует в рабочей среде.

Как работает это решение:

Во-первых, переместив файл .scss в .scss.erb , мы фактически превратили SCSS в шаблон для Rails. Теперь всякий раз, когда мы используем теги шаблона <%= . %> , процессор шаблона Rails заменит эти фрагменты выводом кода (как и любой другой шаблон).

Указание asset_path("highlight_js/github") в файле .scss.erb делает две вещи:

Запускает задачу rake assets:precompile для предварительной компиляции соответствующего файла CSS.
Генерирует URL, который соответствующим образом отражает актив независимо от среды Rails.

Это также означает, что движок SCSS даже не анализирует файл CSS; он просто размещает ссылку на него! Так что нет никаких хитрых обезьяньих патчей или грубых обходных путей. Мы обслуживаем актив CSS через SCSS по назначению и используем актив URL для указанного актива CSS по назначению Rails. Сладко!

Простой обходной путь:

Все или почти все файлы css также могут быть интерпретированы так, как если бы это был scss. Он также позволяет импортировать их внутри блока. Переименуйте css в scss и импортируйте его таким образом.

В моей реальной конфигурации я делаю следующее:

Сначала я копирую файл .css во временный, на этот раз с расширением .scss. Пример конфигурации Grunt:

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

Примечание: это может быть опасно, так как фактически приведет к тому, что css будет проанализирован несколько раз. Проверьте свой оригинальный css на то, что он содержит какой-либо SCSS-интерпретируемый артефакт (это маловероятно, но если это произойдет, результат будет трудно отлаживать и опасен).

Когда речь идет о Sass , как правило, мы подразумеваем препроцессор и язык в целом.

Тем не менее, используя Sass (препроцессор) мы можем использовать два различных синтаксиса:

Sass (отступы) ;
SCSS ( CSS-подобный синтаксис).

Немного истории

Поэтому стили Sass использовали Ruby-подобный синтаксис, без скобок, без точек с запятой и строгих отступов, например:

По сравнению с синтаксисом CSS есть ощутимая разница.

Переменная задается через ! , а не $ , символ присвоения значения = , а не :.

Но так Sass выглядел до версии 3.0, выпущенной в мае 2010 года, в которой был представлен совершенно новый синтаксис под названием SCSS или Sassy CSS .

Его целью было приблизить синтаксис Sass к CSS , сделав его более совместимым с CSS :

SCSS определенно более близок к CSS , чем Sass . Разработчики Sass потрудились над тем, чтобы сделать оба синтаксиса ближе друг к другу, заменив ! (знак переменной) и = (знак присвоения) на $ и : из CSS .

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

Плюсы синтаксиса Sass с отступами

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

В нем не нужны @mixin или @include , когда достаточно простого символа: = и + .

Также в Sass присутствуют чистые стандарты кодирования из-за использования отступов. Так как неправильный отступ может сломать всю таблицу стилей .sass , здесь в первую очередь обеспечивается, чтобы код был чистым и надлежащим образом отформатированным.

Существует только один метод составления кодов Sass : составлять их правильно.

Не забывайте, что отступы имеют логическое значение в Sass . Когда применяется отступ блока селектора, это означает, что это вложенный селектор.

Простой факт смещения .element-b на один уровень вправо означает, что он является дочерним элементом от .element-a , что приводит к изменению результативного CSS -кода. Так что, будьте осторожны с отступами!

Полагаю, что синтаксис на основе отступов больше понравится команде, работающей в основном с Ruby/Python , нежели команде PHP/Java программистов (но это не точно).

Плюсы SCSS синтаксиса

Во-первых, он полностью совместим с CSS . Это означает, что вы можете переименовать файл CSS в .scss , и он будет работать, как ни в чем не бывало.

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

Кроме того, они стараются следить, за тем, что может стать валидным синтаксисом CSS в будущем, и реализовать это (отсюда @directives ).

Так как SCSS совместим с CSS , он практически не требует дополнительного обучения. Синтаксис почти тот же: в конце концов, это просто CSS с некоторыми дополнениями.

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

Кроме того, он более читаем, так как конкретные конструкции уже имеют смысл. Когда вы видите @mixin , вы знаете, что это объявление примеси; когда вы видите @include , вы знаете, что это вызов примеси.

Нет никаких привязок, и все имеет смысл без интерпретации.

Также почти все существующие инструменты, плагины и демо-презентации для Sass разрабатываются с помощью синтаксиса SCSS . Этот синтаксис становится все более ориентированным на профессионалов и выбирается ими по умолчанию (если не является единственно возможным).

В основном в силу указанных выше причин. Например, становится все труднее найти подсветку чистого синтаксиса Sass с отступами; как правило, доступны только варианты подсветки SCSS .

Заключение

Прежде, чем Вы сможете использовать 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 , то вам необходимо просто добавить флаг в команду:

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

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

Переменные

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

SCSS Syntax

Sass Syntax

CSS Output

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

Вложенности

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

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

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

SCSS Syntax

Sass Syntax

CSS Output

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

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

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

Импорт

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

SCSS Syntax

Sass Syntax

CSS Output

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

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

SCSS Syntax

Sass Syntax

CSS Output

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

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

SCSS Syntax

Sass Syntax

CSS Output

Вышеуказанный код сообщает классам .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

Sass Syntax

CSS Output

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

Я много писал в последнее время о Sass , но по некоторым недавним комментариям я понял, что не все четко себе представляют, что такое Sass . Внесем немного ясности:

Когда мы говорим о Sass , мы обычно имеем в виду препроцессор и язык в целом. Мы говорим, например, « мы используем Sass », или « вот примесь Sass ».

Между тем, Sass (препроцессор) допускает два различных синтаксиса:

Sass , также известный как синтаксис с отступами;
SCSS , CSS-подобный синтаксис.

История

Как видите, по сравнению с обычным CSS разница ощутимая! Даже если вы пользователь Sass (препроцессора), вы можете видеть, что это сильно отличается от того, к чему мы привыкли.

Переменная обозначается через ! , а не $ , символ присвоения значения = , а не : . Довольно необычно.

Его целью было приблизить синтаксис Sass к CSS , сделав его более совместимым с CSS :

Поэтому при запуске нового проекта вы можете задуматься, какой синтаксис использовать. Позвольте мне осветить эту тему и пояснить все плюсы и минусы каждого из синтаксисов.

Плюсы синтаксиса Sass с отступами

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

Даже лучше! В нем не нужны @mixin или @include , когда достаточно простого символа: = и + .

Также синтаксис Sass обеспечивает чистые стандарты кодирования из-за использования отступов. Так как неправильный отступ может сломать всю таблицу стилей .sass , здесь в первую очередь обеспечивается, чтобы код был чистым и надлежащим образом отформатированным.

Существует только один метод составления кодов Sass : составлять их правильно.

Но будьте осторожны! Отступы имеют логическое значение в Sass . Когда применяется отступ блока селектора, это означает, что это вложенный селектор.

Как сторонний наблюдатель, я думаю, что синтаксис на основе отступов, вероятно, больше понравится команде, работающей в основном с Ruby/Python , нежели команде PHP/Java программистов (хотя не факт, я хотел бы услышать и обратные мнения).

Плюсы SCSS синтаксиса

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

Нет никаких привязок, и все имеет смысл без интерпретации.

Заключение

Выбор в любом случае остается за вами, но если у вас нет действительно веских причин использовать синтаксис с отступами, я бы настоятельно рекомендовал использовать SCSS , а не Sass . Это не только более просто, но и более удобно.

Как-то я попробовал синтаксис с отступами, и он мне понравился. Особенно его краткость и простота. Я уже хотел было перевести все свои рабочие коды на Sass , но в последнюю минуту передумал.

Я рад, что не совершил этот шаг, потому что сейчас мне было бы очень трудно работать с некоторыми инструментами, если бы я использовал синтаксис с отступами.

Читайте также: