Sass директива @import


Оглавление (нажмите, чтобы открыть):

Sass — Import Directives

Description

Import directives, imports the SASS or SCSS files. It directly takes the filename to import. All the files which are imported in SASS will get combined in a single CSS file. There are few things that are compiled to a CSS when we use @import rule −

  • File extension .css
  • Filename begins with http://
  • Filename is url()
  • @import consist any media queries.

For example, create one SASS file with the following code −

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

The above code will be compiled to the CSS file as shown below −

The following are the ways to import files using @import rule −

Partials

Partials are SASS or SCSS files, which are written using underscore at the beginning of the name (_partials.scss). The partial file name can be imported in SASS file without using the underscore. SASS does not compile the CSS file. By using the underscore, it makes SASS understand that it is partial and should not generate the CSS file.

Nested @import

The @import directive can be included inside the @media rules and CSS rules. The base level file imports the content of the other imported file. The import rule is nested at the same place as the first @import.

For instance, create one SASS file with the following code −

Import the above file to the following SASS file as shown below −

The above code will be compiled to the CSS file as shown below −

Syntax

Given below is a syntax, used to import files, in the SCSS file −

Example

The following example demonstrates the use of @import in the SCSS file −

import.htm

Next, create file _partial.scss.

_partial.scss

Next, create file style.scss.

style.scss

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

Next, execute the above command; it will create the style.css file automatically with the following code −

style.css

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code in import.html file.

Open this HTML file in a browser, an output is displayed as shown below.

SASS для Начинающих: Вложенные стили, Фрагменты, Импорт

В этом уроке мы рассмотрим одни из наиболее полезных и мощных функций SASS: вложение стилей, фрагментирование и импорт.

01. Вложенные стили SASS

Вложенные стили SASS — это еще одна отличная функция, которая позволяет писать CSS правила и вкладывать их друг в друга. Вложение позволяет писать CSS в той же структуре, что и HTML, создавая визуальную иерархию в селекторах.

Например, вот обычный CSS код:

А с помощью SASS можно создавать нечто подобное:

Давайте добавим немного HTML, чтобы увидеть вложенные стили в действии.

Следудующий код представляет собой навигацию, находящуюся внутри “шапки сайта”:

Вы видите, что наши ссылки расположены в header, внутри nav. Этот код имеет очевидную визуальную иерархию. Давайте зададим стили для всех HTML элементов используя SASS.

Обратите внимание на правила, вложенные в другие правила:

А вот как выглядел бы тот же код на нативном CSS:

Вложение — это отличный способ организации и менеджмента вашего CSS кода.

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

Потому что то же самое можно сделать с помощью следующего короткого правила:

02. SASS фрагментирование — Разделение таблиц стилей

SASS фрагменты позволяют отделать небольшие части кода в отдельные файлы и использовать их позже при необходимости. Их можно импортировать с помощью команды @import и поместить в файл со стилями. С помощью фрагментов проще управлять большим количеством стилей. Если у вас есть отдельные таблицы стилей для header, вы можете назвать их _header.scss. Нижнее подчеркивание в начале дает SASS понять, что файл является фрагментом и может быть импортирован в другую таблицу стилей.

SASS фрагменты — Пример


В этот раз мы отделим SASS и CSS файлы в разные папки. Давайте создадим папку sass. Внутри папки sass создайте файл style.scss, который будет нашим основным файлом со стилями. Не нужно создавать папку CSS, так как SASS автоматически создаст ее сам.

Компиляция SASS в SCSS просходит следующим образом: откройте командную строку (возможно, понадобится открыть командную строку ruby) и вбейте:

Эта команда компилирует все внутри папки SASS в CSS папку. Вы возможно заметили, что папка CSS создалась автоматически. CSS папка содержит два файла: style.css и style.css.map.

Теперь создаим новые папки внутри папки SASS: папки header, main и footer.

  1. Внутри папки header создайте фрагмент _header.scss;
  2. В папке main 2 фрагмента _main.scss и _aside.scss;
  3. В папке footer один фрагмент _footer.scss.

Давайте напишем рандомные CSS правила во все фрагмент-файлы. Если вы сейчас сохранитесь, то ничего не изменится, потому что мы еще не подключили фрагменты к нашей гланой таблице стилей style.scss.

Использование SASS фрагментов

Ранее упоминалось, что для подключения SASS фрагментов используется директива @import. В нашем случае style.scss должен выглядеть примерно так:

Если вы откроете style.css после сохранения всех CSS правил, которые вы записывали в разных файлах, то увидите, что все эти правила компилированы в один CSS код. Это и есть магия SASS фрагментирования.

03. SASS импортирование

Функция импортирования в SASS позволяет нам импортировать CSS, написанный на SASS, в другой SASS файл.

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

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

Использование SASS импорта

Мы уже использовали SASS импорт в предыдущей части урока. Мы испортировали header/_header.scss в нашу таблицу стилей style.scss:

Здесь нет нижнего подчеркивания, да? Это потому что мы используем подчеркивание для того, чтобы проинформировать SASS. Нет необходимости также писать расширение в конце. SASS и так уже знает, что мы импортируем только .scss файлы. В таком случае синтаксис импорта должен выглядеть вот так:

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

Вопрос по ruby-on-rails-3.2, compass-sass, zurb-foundation, sprockets, sass &#8211 Директива Sass @import при использовании в движке Rails не может найти ресурсы в плагинах

Я создавал движок Rails, который использует таблицы стилей zurb-foundation, и продолжал использовать ту же ошибку Sass :: Syntax. Это казалось странным, потому что я следовал той же процедуре в приложении Rails, и она работала с первой попытки. Поэтому я решил сосредоточиться на isse, запустив два новых проекта rails — одно приложение и один движок — и сконфигурировав их для использования фундамента с минимальным количеством настроек.

Я начал с 2 чистых проектов Rails 3.2.9 — одно приложение и одно engine —full и настроил их обоих вручную для фондов, добавив foundation_and_overrides.scss и require это в манифесте CSS.

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

Когда я попробовал то же самое для двигателя, я получил эту ошибку:

(Обратите внимание, что манифест CSS фиктивного приложения require — CSS-манифест плагина, который require -ing foundation_and_overrides.scss. Очевидно, что проблема не в разводке, потому что ошибка возникла из foundation_and_overrides.scss)

Я попробовал это с несколькими сборками Ruby-1.9.3 (p125, 194, p327, я думаю) с теми же результатами.

Это все еще не работало, когда я добавил эту строку в test / dummy / config / application.rb:

несмотря на то, что Foundation / Common / _ratios.scss существует на этом пути.

Проблема может быть в Sass, Sprockets, Compass, Foundation или Rails, поэтому я не знаю, куда идти дальше.

Я сообщил об этом какпроблема с фондомНо я не очень в этом убежден.

Кто-нибудь видел это раньше?

Проблема в том, что фиктивное приложение движка Rails и обычное приложение Rails имеют немного разные файлы config / application.rb.

В приложении Rails вы увидите этот код в верхней части:

Но в приложении-заглушке движка вы видите:

В приложении Rails первый Bundler.require включает все группы в Gemfile, но исключает: assets, если Rails.env не является: development или: test Второй Bundler.require включает в себя: default — то есть все в вашем Gemfile, которого нет в группа — а также: активы и либо: производство,: разработка или: тестирование

В фиктивном приложении ничего из этого не требуется, потому что 1) оно не предназначено для использования в производстве, и 2) тестирование и разработка обычно имеют схожие требования к зависимостям. Поскольку группа: assets — это просто удобный способ применить зависимости к: test и: development, но не к: production, в фиктивном приложении это то же самое, что и: default. Так что в фиктивном приложении ничего кроме: по умолчанию не требуется. поскольку Bundler.require это (Предупреждение: Спойлер впереди) так же, как Bundler.require(:default) , пустышка просто использует Bundler.require , Это означает, что все в вашем Gemfile, которое находится в группе, будет игнорироваться.

Поэтому у меня возникла проблема, заключающаяся в том, что я копировал и вставлял из Gemfile приложения Rails в фиктивное приложение Rails Gemfile, включая group :assets do. , Я удалил group линия и все заработало!

ДОБАВЛЕНО позже в тот же день 29/29:

Чтобы уточнить, ошибка, которую я вижу, заключается в том, что sass-rails не были включены (так как они были в группе: assets в моем Gemfile), поэтому вместо того, чтобы мои активы были проанализированы как Sass, они были проанализированы как CSS. поскольку @import означает что-то другое для CSS, чем для Sass, независимо от того, что синтаксический анализ файла CSS использовал другую реализацию @import и не смог найти файл.

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

При обычной установке Foundation в Rails он не работал для моего движка, поэтому я сделал это вручную:

Я добавил эту строку в application.html.erb:

Добавьте эту строку в your_engine / app / assets / javascripts / your_engine_name / application.js: //= require foundation

И вот как я это решил:

Добавьте эту строку в your_engine / app / assets / stylesheets / your_engine_name / application.css (ПРИМЕЧАНИЕ. Я не переименовал в application.scss): *= require your_engine_name/foundation_and_overrides

Что касается разработки, в строках, прокомментированных в Gemfile, говорится: «Объявите все зависимости, которые все еще находятся в разработке, а не в # вашем gemspec. Они могут включать в себя пограничные Rails или гемы из вашего пути или # Git. Не забудьте переместить эти зависимости в свой gemspec перед выпуском # вашего драгоценного камня на rubygems.org. » Поэтому я добавляю драгоценные камни, которые мне нужны (основание, sass, компас и т. Д.)

И это все, это мой способ работы моего движка с Foundation,

Sass Basics: @-rules and Directives

The @-Rules and directives in Sass are backbone features that you should at least know about, especially when it concerns the @import rule. Some of these @-rules are extensions of CSS @-rules while others are Sass specific directives. Either way it is best you know what these rules are for and how they work if you are going to be working with Sass.

@import


Sass extends the CSS @import rule so it can import SCSS/Sass files. Normally we use this rule to import our Sass into one master file. We include this master file as our main CSS file in a project to use all of the consolidated rules. Importing a file gives access to any mixins or variables included in the files.

Sass by default looks for other Sass files in the current directory and then in the Sass file directory under Rails. You can also specify additional directories using the load paths option. If you are using Compass you can specify the directory by changing the sass_dir value in config.rb.

Мастер Йода рекомендует:  Как превратить любой PHP-код в консольное приложение создаем аналог библиотеки Python Fire от Google

@import looks for a Sass file to import but will compile to a CSS @import rule under the following conditions:

  • The file extension is .css
  • The filename begins with htp://
  • The filename is a url()
  • The @import has media queries

If the extension of the file is .scss or .sass the file will be imported. If there is no extension Sass will try and find a file that matches the name and the proper extension. For example:

Both of these @import statements are valid and will import the sample.scss file. The second import would also import sample.sass if it existed.

We can also import multiple files in one @import statement by including the files in a comma separated list.

Care must be taken when importing files, as they must be imported in a correct order. For example, lets say we have a file called myVariables that includes the variables in our project. If we have another file called myStyles that uses these variables, the myVariables file must be imported first.

If we import in this order we will get an error as myStyles will try and use variables that have not yet been defined.

This is the correct way to import as the variables referenced in the myStyles file have already been imported.

Partials @import

When you import a SCSS/Sass file it will compile to a CSS file of the same name. Normally we want to import separate SCSS/Sass files into one master CSS file versus multiple CSS files. In order to accomplish this we need to @import the files as partials. We make a SCSS/SASS file into a partial by adding an underscore in front of the name. The underscore tells Sass not to compile the file as an individual CSS file, but to merge it with the current file that contains the @import statement.

When we import these partials we do not have to include the underscore. Lets say we changed myVariables into _myVariables . We would import the file the same way.

The difference is that no myVariables.css file will be created, the file will be merged with the main CSS file. It is important to note that you cannot include a partial and non-partial with the same name in a directory. We could not have _myVariables.scss and myVariables.scss in the same location.

Nested @import

Most of the time we will have our @import at the top level of our document we can include them inside our rules. The imported rules will be nested where they were imported. For example lets say we have a file name test with the following rule

We can nest this import in our main file.

This will compile to:

Directives such as @mixin that are only allowed at the base level of a document cannot be in files that are nested imports. By the same token you cannot nest @import inside mixins or control directives.

@media

@media behaves the same as CSS @media rules with the exception that they can be nested inside of CSS rules. When @media directives are nested in CSS rules they will bubble up to the top level of the stylesheet.

Will compile to:

As you can see we get a separate rule for our media query even though it was nested inside of the .container class. We can also nest @media queries inside of another. The queries will be combined using and .

As you can see two media queries were created. Lastly we can use Sass expressions such as variables, functions, and operators for feature names and values.

As you can see we are using interpolation with our $format variable and nesting our queries. We use the different device variables to build the rest of our queries. This give us:

@extend

Sometimes when styling a page you may have an element that should have all the styles of another element as well as styles of its own. Lets say we had two classes for text, one regular and one for emphasized text.

This works well enough but in order to use emphasized text we have to do this:

Remember we can use Sass to lessen the amount of typing we have to do. The @extend directive allows us to have one element inherit the styles of another.

We have used @extend to rewrite the styles from above, which gives us:

As you can see .emphasis is included with .master as well as having styles that only apply to emphasized text. Now to use this class we just have to include the .emphasis class.

With the @extend directive we can extend complex selectors, have multiple @extends, chain @extends, and much more. I could write a whole article on @extends, for more information on @extends check out the Sass documentation.

Use @extend with caution as the outputted CSS can become bloated and because of how the directive works you could be creating some really bad CSS. Hugo has written a post on why he avoids using @extend and more in-depth post on it too.

@at-root

The @at-root directive creates rules at the root of the document instead of being nested in their parent element.

Which compiles to:

The @at-root directive works on a single line or a block of selectors. As you can see the selectors nested inside @at-root are at the root of the document. The other selectors are nested inside .top .

The @at-root directive also allows you to move outside of directives by using (without. ) or (with. ) . For example.

The @at-root directive also has a without , which could allow us to create a separate style without the @media query.

@debug

The @debug directive prints the value of a Sass expression to the standard error output stream. For example:

When I save the file the output is written to the output stream of my watch command.

The @warn directive prints the value of a Sass expression to the standard error output stream.

It will display the value of the expression as well as the line number of the warning.

@error

The @error directive gives the value of a Sass expression as an error, again to the standard error stream

This will display error, line number, and value in the standard error stream.

Conclusion


We have highlighted a number of @-Rules and Directives you may have not known about. You may not find much use for them but it is always good to know the full capabilities of your tools.

Sass для самых маленьких — подробное руководство

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

Все примеры и настроенный проект данного урока вы можете скачать с нашего сайта

Sass — это один из наиболее развитых и стабильных CSS препроцессоров, а также один из самых популярных препроцессоров у профессионалов.

Преимущества Sass

  • Совместимость с различными версиями CSS, благодаря которой вы можете использовать любые CSS библиотеки в вашем проекте;
  • Огромное количество разнообразных функций на любой случай жизни. Таким богатым функционалом могут похвастаться немногие CSS препроцессоры;
  • Sass — это один из самых старых CSS препроцессоров, вобравший большой опыт за долгие годы своего существования;
  • Замечательная возможность использовать Sass фреймворки, упрощающие жизнь разработчику. Один из таких фреймворков — Bourbon, который мы используем в некоторых выпусках Джедая верстки при написании Sass;
  • Синтаксис. Вы можете выбрать один из двух синтаксисов, который вам ближе — упрощенный (SASS) и развернутый CSS-подобный (SCSS).

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

Настройка окружения

В качестве окружения для работы с Sass в этом уроке, как и в других наших уроках, мы будем использовать версию Sass для таск-менеджера Gulp (gulp-sass). Для использования оригинальной Ruby версии или компиляции Sass посредством специального ПО, вы можете ознакомиться с инструкциями на оф. сайте. Данный урок носит преимущественно практический характер, поэтому останавливаться на возможных вариантах подключения к проекту не будем, подключим Sass наиболее популярным способом, используя Gulp.

Убедитесь, что у вас установлена последняя версия Node.js и Gulp. Если Node.js не установлен, скачайте его и установите. После установки Node.js установите gulp командой «npm i -g gulp» (Windows) или «sudo npm i -g gulp» (Linux, OS X). Почитать: Подробное руководство Gulp.

В папке вашего проекта выполните команду npm init и заполните пошагово информацию о вашем новом проекте. Пример, также, есть на странице руководства Gulp.

Далее установим в проект пакеты gulp и gulp-sass командой:

Далее в папке проекта создадим gulpfile.js следующего содержания:

Обратите внимание на строку 6 — здесь мы используем один из стилей вывода в результирующий файл: nested — вложенный, по умолчанию; expanded — развернутый; compact — компактный, когда селектор и его свойства в фигурных скобках выводятся в одну строку; compressed — сжатый. Кроме того, благодаря обработке .on(‘error’, sass.logError), если возникнет ошибка, нам не придется перезагружать команду выполенния Gulpfile и мы будем видеть, в какой строке Sass файла у нас ошибка. В примерах я буду использовать стиль вывода expanded для наглядности.

У вас должна быть следующая структура проекта в вашей файловой системе:

    myproject/

      css/

        common.css

      sass/

        common.sass

      node_modules/gulpfile.jspackage.json

Запускаем выполнение Gulpfile командой gulp в терминале папки проекта.

Здесь мы берем все Sass файлы из директории sass/ вашего проекта и выгружаем готовый CSS результат в папку css/. Кроме того, здесь мы устанавливаем наблюдение watch за изменениями в Sass файлах и автоматическую компиляцию в CSS, если такие изменения имеют место быть. Результирующий css файл подключается в верстку.

Если вам что-то не понятно по настройке Gulp пакетов в данном примере, прочтите руководство Gulp.

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

Синтаксис Sass

Есть 2 варианта написания Sass, 2 синтаксиса: SASS и SCSS. Самый старый вариант написания Sass — это синтаксис отступов. Именно этот вариант написания мы будем использовать в нашем уроке. Расширение файлов для такого синтаксиса — *.sass. Второй вариант — это синтаксис, расширяющий синтаксис CSS, Sassy CSS. SCSS пишется как обычный CSS, но расширен дополнительными возможностями Sass. Расширение файлов с SCSS синтаксисом — *.scss.

Очень важно! Синтаксис отступов требует очень четкого соблюдения отступов у вложенных свойств и если у вас возникают ошибки при запуске Gulp или неявные ошибки без указания строки в консоли — скорее всего, ошибка именно в неправильных отступах. Еще важная деталь — если у вас в качестве отступов используются табы, компилятор выдаст ошибку при попытке конвертировать Sass, в котором помимо табов, также, исвользуются пробелы в качестве отступов. Либо вы используете только табы, либо только пробелы.

SASS и SCSS синтаксис:

SASS — синтаксис отступов SCSS — синтаксис расширения

Кроме базовых правил написания (фигурные скобки, точка с запятой в конце строк), SASS и SCSS различаются также написанием некоторых функций. Так что будьте внимательны при использовании каких-либо примеров из интернета, проверяйте, какой именно синтаксис используется. Если довольно большой пример из интернета выполнен в SCSS стиле, а ваш проект написан в SASS, вы можете его импортировать в ваш основной файл, не меняя синтаксис и расширение файла посредством директивы @import, например, если вы скачали файл carousel.scss, то можете подключить его в ваш main.sass строкой @import «carousel». Также можно поступить в обратной ситуации, когда необходимо импортировать *.sass файлы в файл main.scss. В нашем примере с Гитхаба, мы импортируем все _x.x.sass файлы в один common.sass, где x.x — это номер заголовка примера из данной статьи.

Мы будем использовать синтаксис отступов.

1. Расширение возможностей CSS с помощью Sass

1.1 Правила вложения

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

Sass CSS — готовый результат
Sass CSS — готовый результат

1.2 Привязка к родительскому селектору

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

Sass CSS — готовый результат
Sass CSS — готовый результат

Обратите внимание на правило body.firefox &, которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце &.

Кроме того, привязку к родителю можно использовать для создания составных селекторов:


Sass CSS — готовый результат

1.3 Вложенные свойства

Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin-top, margin-bottom, margin-left, margin-right имеют общую основу margin и могут быть разбиты на вложения следующим образом:

Sass CSS — готовый результат

1.4 Селекторы-шаблоны

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

Sass CSS — готовый результат

2. SassScript

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

2.1 Переменные в Sass

Это действительно замечательная возможность — определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение.

Sass CSS — готовый результат

2.2 Операции с числами и строками + интерполяция

Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения ( , =, ==, !=) также поддерживаются для чисел.

Кроме того, в Sass есть возможность конкатенировать (соединять) строки.

Sass CSS — готовый результат

Как видим из примера $summ: 10 + 20 / 2, соблюдается приоритет в выполнении арифметических операций — сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике. Обратите внимание, что при сложении 12px + 8px, мы получим 20px.

Обратите также внимание на строки 2 и 9, здесь мы используем интерполяцию для размещения динамических значений в любом месте Sass файла, в том числе и в месте, где у нас идет название свойства, название селектора или в любой строке.

Интерполяция — это получение нового значения, используя другие.

Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #<>, например:

Sass CSS — готовый результат

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

2.3 Операции с цветами

Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.

Sass CSS — готовый результат

Обратите внимание, что при сложении rgba цветов, последний параметр непрозрачности 0.75 не должен отличаться от других в выражении, иначе произойдет ошибка сложения. Вместо этого, можно регулировать альфа-канал rgba, используя opacify и transparentize или управлять непрозрачностью HEX цвета, посредством функции rgba.

Sass CSS — готовый результат

3. Директивы и правила

3.1 @import

Вы можете импортировать в ваш Sass файл sass, scss и css файлы с помощью директивы @import, при этом все миксины и переменные будут работать в основном файле, в который происходит импорт.

@import сработает как обычный CSS @import, если:

  • в пути к файлу присутствует http://;
  • файл вызывается через url();
  • или в импорте присутствуют медиапараметры.

Для того, чтобы другой файл был полноценно импортирован в основной Sass файл, необходимо, чтобы расширение файла было *.sass, *.scss или *.css.

Давайте рассмотрим некоторые примеры.

Следующие файлы импортированы не будут:

Sass CSS — готовый результат

Следующие файлы будут импортированы:

Sass CSS — готовый результат

Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение .css

Возможен импорт нескольких файлов, через запятую: @import «header», «media».

Файлы, которые начинаются с нижнего подчеркивания, называются фрагменты и при импорте не требуют указания подчеркивания и расширения. Например, файл _header.sass можно импортировать так: @import «header».

Обратите внимание, что импорт происходит в том месте, где вы указываете директиву @import. Соответственно, есть возможность делать вложенный импорт в том месте, где это необходимо:

3.2 @at-root

Директива @at-root поднимает содержимые в ней правила в корень, отменяя цепочку от родителя. Тут все просто:

Sass CSS — готовый результат

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

4. Выражения

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

4.1 Директива @if()


Директива @if() позволяет осуществить выполнение SassScript с определенными условиями и имеет следующий синтаксис:

Sass CSS — готовый результат

4.2 Директива @for

@for выводит блок со стилями определенное количество раз. Во время выполнения можно задать переменную-счетчик.

Sass CSS — готовый результат

Вы можете указать through вместо to, если требуется пройтись от 1 до 11 включительно, а не только до 10, как в примере.

4.3 Директива @each

Если требуется пройтись по списку значений, а не просто чисел, можно использовать директиву @each:

Sass CSS — готовый результат

4.4 Директива @while

@while циклично выводит блоки стилей, пока выражение является true.

Sass CSS — готовый результат

5. Миксины

Миксины — блоки Sass кода (или примеси-шаблоны), которые могут принимать аргументы (опционально) и позволяют значительно расширить возможности написания стилей и сократить затраты времени на применении однотипных правил и даже целых CSS блоков. Это что-то вроде функции, которая может принять аргумент, выполнить огромный объем работы и выдать результат в зависимости от входного параметра.

Миксин объявляется директивой @mixin, после объявления должно быть указано имя миксина. Вызывается миксин директивой @include, которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.

Sass CSS — готовый результат

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

Сразу отвечу на вопрос — как работать с Sass стилями на готовом сайте, неужели нужно править готовый CSS и заливать по FTP? Нет, так делать нельзя. Вы должны иметь локальную копию ваших Sass стилей или даже целого сайта и после окончания работы деплоить (выгружать) по FTP готовые стили. Для этого, вы можете использовать Gulp пакет vinyl-ftp. Или настроить Sass окружение на вашем сервере для компиляции загружаемых по FTP/sFTP файлов.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Sass Import

Tijana D.

We can follow CSS progress by following the development of its pre-processors. Which preprocessor to use is a different time theme, but it’s really necessary to use one because they allow features that don’t exist in CSS yet. (We have also written about the ones that exist though e.g. columns, underline, font size)

One of the preprocessors is Sass and one of these extra features is import and that is the theme of this post. My next post is the export feature, so you’ll have something to look forward to.

Before you can use import feature or Sass at all, you need to set Sass on your project for which sass guide will presumably help.

@import

The import feature works pretty much as expected. You can import a .scss file in another one, and all the variables in it will be available. The syntax is @import and name of the scss file. The scss file you can define without .scss extension and it will work.

In this example, scss file with this code can use all styles defined in colors.scss , fonts.scss , btn_styles.scss and form_styles.scss files in the current directory. The content of these files will replace the @import statement.

Partials

Sass compiles all the .scss or .sass files inside the directory it’s watching. If you don’t want to compile it directly you don’t need to.

You can tell Sass not to compile a file with the file’s name. If you add an underscore to the start of the file name, Sass won’t compile it. So, if you don’t want colors.scss to compile to colors.css , name the file _colors.scss instead. Files named this way are called partials in Sass terminology. The rule about import without extension works here too.

Partials are used as general style files (reset, colors, fonts, typography, navigation, forms, buttons, grids, figures, header, sidebar, footer. ) and other files usually work as page styles.

Nested @import

We have already written about nesting and how important in CSS pre-processors it is.

Even if it’s typical to include your @import statements at the top of the importing file, you can nest @import wherever. The example which follows will explain the second most common usage of this feature.

Assuming the two files are located in the same folder, the code would compile to (homepage.css):

So you can import the partial file directly inside the block of code, and it’s going to be compiled just like expected.

Extra

Just to be sure it’s clear, with defining the file to import it’s possible to use all folders common definitions.

This way all the files in the style folder will be compiled.

This way buttons.scss in the corresponding place from the current file will be compiled.

Closing Word

If you’re using Sass you better make a good structure for your stylesheets, because it’s almost all about that. The structure without @import in Sass is impossible to make so.

For more about Sass and CSS features soon subscribe to our newsletter.

Препроцессор Sass. Полное руководство и зачем он нужен

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

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


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

Синтаксис

Для Sass доступно два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый повсюду в этой статье — это расширенный синтаксис CSS. Это означает, что каждая валидная таблица стилей CSS это валидный SCSS файл, несущий в себе туже самую логику. Более того, SCSS понимает большинство хаков в CSS и вендорные синтаксисы, например такой как синтаксис фильтра в старом IE. Этот синтаксис улучшен Sass функционалом описанным ниже. Файлы использующие этот синтаксис имеют .scss расширение.

Второй и более старый синтаксис, также известный как краёный синтаксис или иногда просто Sass, даёт более сжатую возможность работы с CSS. Он использует отступы вместо скобок, что отделить вложения селекторов и новые строки вместо точек с запятой для разделения свойств. Иногда люди находят такой способ проще для понимания и быстрее для написания, чем SCSS. По факту, такой синтаксис имеет тот же функционал, хотя некоторые из них имеют слегка другой подход. Файлы используемые этот синтаксис имеют расширение .sass .

Любой синтаксис может импортировать файлы, написанные в другом. Файлы могут быть автоматически сконвертированы из одного в другой, используя sass-convert команду:

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

Sass может быть использован тремя способами: как командной строкой, как отдельный модуль Ruby и как плагин для rack-фреймворка, включая Ruby on Rails и Merb. Первым делом для всего этого надо установить Sass гем:

Если вы на Windows, то возможно вам надо установить сначала Ruby.

Для запуска Sass из командной строки просто используйте:

sass input.scss output.css

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

sass —watch input.scss:output.css

Если у вас есть директория с множеством Sass файлов, то вы также можете указать Sass следить за всей директорией:

sass —watch app/sass:public/stylesheets

Используйте sass —help для полной документации.

Is it possible to import a whole directory in sass using @import?

I am modularizing my stylesheets with SASS partials like so:

is there a way to include the whole partials directory(it’s a directory full of SASS-partials) like @import compass or something?

12 Answers 12

If you are using Sass in a Rails project, the sass-rails gem, https://github.com/rails/sass-rails, features glob importing.

To answer the concern in another answer «If you import a directory, how can you determine import order? There’s no way that doesn’t introduce some new level of complexity.»

Some would argue that organizing your files into directories can REDUCE complexity.

My organization’s project is a rather complex app. There are 119 Sass files in 17 directories. These correspond roughly to our views and are mainly used for adjustments, with the heavy lifting being handled by our custom framework. To me, a few lines of imported directories is a tad less complex than 119 lines of imported filenames.

To address load order, we place files that need to load first – mixins, variables, etc. — in an early-loading directory. Otherwise, load order is and should be irrelevant. if we are doing things properly.

Sass: The @import Directive

You are here:
Home / Blog / CSS / Sass: The @import Directive

One way to writer DRYer code is to separate concerns and keep related code in separate files. This allows you to maintain code in one file as opposed to maintaining the same code over several or many files.

Naturally to be able to keep your code in separate files, you need to be able to combine them all back together. With CSS (and Sass) you can use the @import directive to include the content of one file in another.

For the past two weeks I’ve talked about @-rules and directives in Sass. Last week I focused on the @media directive. Today and next week I want to talk about @import.

The CSS @import Rule

The @import directive is a CSS @-rule that was briefly popular before falling out of favor due to performance issues. If you’ve been developing websites for awhile, you may remember using it a number of years ago.

Using CSS’ @import you could include stylesheets inside other stylesheets. The included files could either be located on the same server or included with a URL to a directory on another server.

While this allowed developers to import CSS files into other CSS files, the practice fell out of favor mainly because of a performance hit in @import, but some other issues as well. Sass removes the performance hit because the @import statements are removed from your Sass code when it compiles to CSS.

The Sass @import Directive

Sass extends the CSS @import rule so that it works with .scss and .sass files. It imports the file referenced and any variables or mixins that are defined in the imported file can be used in the main file.

Assuming there’s a file typography.scss in the current directory, the contents of typography.scss will replace the @import statement.

Sass makes it even simpler. If you forget to include the extension, it will look for a file with the same name and either a .scss or .sass extension.

The statement above would find either typography.scss or typography.sass in the same directory as the file importing the typography styles.

By default Sass will include the content of the file being imported in place of the @import statement, but there are times when Sass will compile to a CSS @import rule. In other words you’ll end up with an @import in the .css file instead of the code in the referenced file. Sass will compile to an @import if:

  • The file’s extension is .css
  • The filename begins with http://
  • The filename is a url()
  • The @import has any media queries

Given the previously mentioned issues with the CSS @import rule, you probably don’t want this and always want the content in the files to be included directly. As long as none of these four conditions exist the content of the file will be imported.

You aren’t limited to a single @import statement. You can use as many as you like. For example importing three different files will import the content of each file in the same order they are referenced.

You don’t have to use multiple @import statements to include multiple files. You can import multiple files in a single @import statement.

All three files would again be imported in the order listed.

Partials

Sass compiles all the .scss or .sass files inside the directory it’s watching. However, when your goal is to import a file, you don’t need to compile it directly.

You can tell Sass not to compile a file through the file’s name. If you add an underscore to the start of the file name, Sass won’t compile it. If you don’t want color.scss to compile to .color.css, name the file _color.scss instead. Files named this way are called partials in Sass terminology.

You can skip the underscore when referencing a file inside an @import rule, the same way you can skip the extension.


Sass understands to import the file _color.scss (or _color.sass) from the current directory, if present.

The ability to tell Sass which files to compile and which to only include in other files, allows you to create a file and directory structure that’s easier for you to maintain, without ending up with a lot of extra CSS files.

Nested @import Directives

You’ll typically include your @import statements at the top of the the importing file, but you can nest @import within other Sass rules similar to the way you can nest @media directives.

Let’s say you create a partial named _nav-bkgd.scss that only includes the background color of your navigation items.

You can import the partial file directly inside the block of code that styles your global navigation, say inside a class named .global-nav.

Assuming the two files are located in the same folder, the code would compile to:

You can’t import everything this way. For example directives like @mixin and @charset, which are allowed only at the base level of a document are not allowed inside a nested @import.

You also can’t nest an @import within mixins or control directives, both of which I’ll cover in the future. I’ll cover mixins later in this series and control directives in a series later in the year.

File and Folder Structure with @imports and Partials

There are a lot of different ways you can organize your files and folders using @import rules and partials to help make your project more maintainable. I’ll show you more next week, but let me at least show you one way today. I picked up from an article John Long wrote for The Sass Way.

I used this directory structure when building a small site for a client a few years ago. My .scss directory contained three folders (modules, partials, and vendor), each with one or more files inside. There’s also one top level file, main.scss.

The vendor folder holds any code you get from 3rd parties. In my example there’s a file called _ico-moon.scss, which comes from vendor Ico Moon.

The partials folder includes code that will be imported in place into another file and then compiled with the rest of the code in that file. In my partials folder I have some general styles in _base.scss and navigation specific styles in _navigation.scss that I want to import and compile.

Technically the files in all three folders are partials as they all include an underscore, but partials is the name given to this folder in John’s structure. Hopefully it’s not too confusing. Feel free to change the name of the folder in your project to something else if it is confusing. The main point is these files contain code what will be included into another file and then compiled with that file.

The modules folder includes code that won’t be compiled. It includes things like mixins and functions and variables. In my case, the two files _color.scss and _typography.scss both contained variables and nothing else.

A bit off topic, but I used the variable files to quickly show my client variations on the design. Instead of a single _color.scss file, I things like had _color-red.scss, _color-green.scss, _color-blue.scss where the color was the dominant color in the color scheme. It was a quick way to show the design with color variations and type variations.

Speaking of importing files, that’s what the main.scss file in the directory does. At the very top of the file are a series of @import statements.

  • @import “modules/color”;
  • @import “modules/typography”;
  • @import “partials/base”;
  • @import “partials/navigation”;
  • @import “vendor/ico-moon”;

Note that because the files are all technically partials, you don’t need to include the underscore or the file extension when referencing the file.

You can easily find more ways to organize your Sass files and folders in a project and I’ll show you some next week. Hopefully the simple structure above gets you thinking about a structure that would work for you.

Closing Thoughts

The @import rule is one CSS @rule we’ve been told not to use for years, but all of its issues go away when you use the extended Sass @import directive.

You can help make your code more maintainable by using @import and breaking down large files into smaller and more focused files that get imported into other files and eventually one top level file that will be compiled into CSS.

There’s no one way or right way to set up the structure, though there are some common threads to the different structures people use. Next week I’ll show you a few more structures and point you to some resources with more details for how and why they were created.

Download a free sample from my book, Design Fundamentals.

Директива Sass @import при использовании в Rails-движке не может найти активы в плагинах

Я создавал механизм Rails, который использует таблицы стилей zurb-foundation, и kep ударяет по той же ошибке Sass:: Syntax. Это показалось странным, потому что я выполнил ту же процедуру в приложении Rails, и это сработало с первой попытки. Поэтому я решил обнулить на isse, запустив два новых проекта рельсов — одно приложение и один движок — и настроил их на использование основы с минимальным количеством настроек.

Я начал с двух чистых проектов Rails 3.2.9 — одного приложения и одного engine —full и настроил их как вручную для фондов, добавив base_and_overrides.scss и require -в его в манифест CSS.

Затем я создаю контроллер bare-bones, чтобы у меня была страница для загрузки. Для приложения, загружая эту страницу и глядя на источник страницы, я вижу, что основа CSS была скомпилирована правильно и загружена.

Когда я попробовал то же самое для движка, я получил эту ошибку:

(Обратите внимание, что манифест манифестного приложения — require — пример манифеста CSS плагина, который является require -ing foundation_and_overrides.scss. Проводка явно не проблема, потому что ошибка возникает из base_and_overrides.scss)

Я пробовал это с несколькими сборками Ruby-1.9.3 (p125, 194, p327, я думаю) с теми же результатами.

Это все еще не сработало, когда я добавил эту строку в test/dummy/config/application.rb:

хотя на этом пути существует основание /common/ _ratios.scss.

Проблема может быть с Sass, Sprockets, Compass, Foundation или Rails, поэтому я не знаю, куда идти отсюда.

Я сообщил об этом как проблеме с Foundation, но я не настолько убежден в этом.

Кто-нибудь видел это раньше?

Проблема заключается в том, что фиктивное приложение Rails и обычное приложение Rails имеют несколько разные файлы config/application.rb.

В приложении Rails вы увидите этот код вверху:

Но в манекере для движка вместо этого вы видите:

В приложении Rails первый Bundler.require включает все группы в Gemfile, но исключает: активы, если Rails.env не является: разработка или: тест Второй Bundler.require включает в себя: по умолчанию — то есть все, что содержится в вашем Gemfile, а не в группе, а также: активы и либо: production,: development или: test

В фиктивном приложении ничто из этого не требуется, потому что 1) оно не предназначено для использования в производстве, и 2) тестирование и разработка обычно имеют схожие требования к зависимостям. Поскольку группа: assets — это просто удобный способ применения зависимостей к: test и: development, но не к: production, в фиктивном приложении это то же самое, что и: default. Так что в фиктивном приложении ничего, кроме: по умолчанию. Поскольку Bundler.require (Предупреждение: Spoiler вперед) совпадает с Bundler.require(:default) , фиктивное приложение просто использует Bundler.require . Это означает, что что-либо в вашем Gemfile, которое в группе будет проигнорировано.

Итак, проблема была в том, что я копировал и вставлял из Rails-приложения Gemfile в Gemfile Rails Dummy, включая group :assets do. . Я удалил строку group , и все сработало!

ДОБАВЛЯЕТСЯ позже в день 11/29:

Чтобы прояснить, ошибка, которую я видел, связана с тем, что sass-rails не был включен (поскольку это было в группе: assets в моем Gemfile), поэтому вместо того, чтобы мои активы анализировались как Sass, они анализировались как CSS. Поскольку @import означает нечто иное, чем CSS, чем для Sass, все, что анализировалось в файле CSS, использовало другую реализацию @import и не могло найти файл.

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

Обычная установка Foundation in Rails для моего движка не работала, поэтому я сделал это вручную:

Я добавил эту строку в application.html.erb:

Добавьте эту строку в your_engine/app/assets/javascripts/your_engine_name/application.js: //= require foundation

И вот как я решил:

Добавьте эту строку в каталог your_engine/app/assets/stylesheets/your_engine_name/application.css(ПРИМЕЧАНИЕ: я не переименовал приложение application.scss): *= require your_engine_name/foundation_and_overrides

Для разработки в строках, прокомментированных в Gemfile, говорится: «Объявляйте любые зависимости, которые все еще находятся в разработке здесь, а не в # вашем gemspec. К ним могут относиться ребра Rails или драгоценные камни с вашего пути или # Git. переместите эти зависимости в ваш gemspec, прежде чем выпустить # ваш камень на rubygems.org.» Поэтому я добавляю драгоценные камни, которые мне нужны (Foundation, Sass, Compass и т.д.)

И все это так, что я получаю мой движок, работающий с Foundation,

Мастер Йода рекомендует:  Введение в XUL
Добавить комментарий