Правильная структура активов SCSS в Rails

Ответ 1

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

В качестве примера скажем, что у вас есть normalize.css лист, чтобы получить представление по умолчанию вместо всех ужасных различных реализаций браузера. Это должен быть первый файл, загруженный браузером. Если вы просто произвольно включаете этот лист где-нибудь в свой импорт css, он не только переопределяет стили браузера по умолчанию, но также и любые стили, определенные во всех файлах css, которые были загружены до него. Это одинаково для переменных и mixins.

После просмотра презентации Roy Tomeij в Euruko2012 я решил использовать следующий подход, если у вас есть много CSS для управления.

Обычно я использую этот подход:

• Переименуйте все существующие .css файлы в .scss
• Удалить все содержимое из application.scss

Начните добавлять директивы @import в application.scss.

Если вы используете бутстрап для twitters и несколько собственных css-листов, вам сначала нужно импортировать bootstrap, потому что у него есть лист для стилей reset. Поэтому вы добавляете @import "bootstrap/bootstrap.scss"; к вашему application.scss.

Файл bootstrap.scss выглядит так:

// CSS Reset
@import "reset.scss";

// Core
@import "variables.scss";
@import "mixins.scss";

// Grid system and page structure
@import "scaffolding.scss";

// Styled patterns and elements
@import "type.scss";
@import "forms.scss";
@import "tables.scss";
@import "patterns.scss";

И ваш файл application.scss выглядит так:

@import "bootstrap/bootstrap.scss";

Из-за порядка импорта теперь вы можете использовать переменные, загруженные с помощью @import "variables.scss"; в любой другой файл .scss, импортированный после него. Поэтому их можно использовать в type.scss в папке bootstrap, но также в my_model.css.scss.

После этого создайте папку с именем partials или modules. Это будет место для большинства других файлов. Вы можете просто добавить импорт в файл application.scss, чтобы он выглядел следующим образом:

@import "bootstrap/bootstrap.scss";
@import "partials/*";

Теперь, если вы сделаете немного css, чтобы создать статью на своей домашней странице. Просто создайте partials/_article.scss, и он будет добавлен в скомпилированный application.css. Из-за заказа на импорт вы также можете использовать любые загрузочные микшины и переменные в ваших собственных файлах scss.

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

Ответ 2

Создайте следующую структуру папок:

+ assets
|
--+ base
| |
| --+ mixins (with subfolders as noted in your question)
|
--+ styles
  |
  --+ ...

В папке base создайте файл "globals.css.scss". В этом файле объявите все свои импортные данные:

@import 'base/colors';
@import 'base/mixins/...';
@import 'base/mixins/...';

В вашем приложении application.css.scss вы должны:

*= require_self
*= depends_on ./base/globals.css.scss
*= require_tree ./styles

И как последний шаг (это важно), объявите @import 'base/globals' в каждом файле стиля, где вы хотите использовать переменные или mixins. Вы можете подумать об этих накладных расходах, но мне действительно нравится идея, что вы должны объявлять зависимости ваших стилей в каждом файле. Конечно, важно, чтобы вы импортировали mixins и переменные в globals.css.scss, поскольку они не добавляют определения стилей. В противном случае определения стиля будут включены несколько раз в ваш предварительно скомпилированный файл...

Ответ 3

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

тогда используйте application.css, чтобы потребовать файл, объявляющий импорт. это способ добиться необходимого управления.

наконец, в вашем файле layout.erb вы можете указать, какой "главный" css файл использовать

будет более полезным:

скажем, у вас есть два модуля в вашем приложении, которым нужны разные наборы css: "application" и "admin"

файлы

|-app/
|-- assets/
|--- stylesheets/
|     // the "master" files that will be called by the layout
|---- application.css
|---- application_admin.css
|
|     // the files that contain styles
|---- config.scss
|---- styles.scss
|---- admin_styles.scss
|
|     // the files that define the imports
|---- app_imports.scss
|---- admin_imports.scss
|
|
|-- views/
|--- layouts/
|---- admin.html.haml
|---- application.html.haml

вот как выглядят файлы внутри:

-------- THE STYLES

-- config.scss
// declare variables and mixins
$font-size: 20px;

--  app_imports.scss
// using imports lets you use variables from `config` in `styles`
@import 'config'
@import 'styles'

-- admin_imports.scss
// for admin module, we import an additional stylesheet
@import 'config'
@import 'styles'
@import 'admin_styles'

-- application.css
// in the master application file, we require the imports
*= require app_imports
*= require some_other_stylesheet_like_a_plugin
*= require_self

-- application_admin.css
// in the master admin file, we require the admin imports
*= require admin_imports
*= require some_other_stylesheet_like_a_plugin
*= require_self


-------- THE LAYOUTS

-- application.html.haml
// in the application layout, we call the master css file
= stylesheet_link_tag "application", media: "all"

--  admin.html.haml
// in the admin layout, we call the admin master css file
= stylesheet_link_tag "application", media: "all"

Ответ 4

В соответствии с этим вопросом вы можете ТОЛЬКО использовать application.css.sass, чтобы определять импорт и обменивать переменные между вашими шаблонами.

= > Кажется, это только вопрос имени.

Другим способом может быть включить все и отключить этот конвейер.

Ответ 5

У меня была очень похожая проблема. То, что помогло мне, заключалось в том, чтобы подставить подчеркивание в оператор @import при импорте частичного. Так

@import "_base";

вместо

@import "base";

Это может быть странная ошибка...