Rails의 적절한 SCSS 자산 구조

Rails의 적절한 SCSS 자산 구조

---

따라서 app/assets/stylesheets/다음과 같은 디렉토리 구조가 있습니다.

   |-dialogs
   |-mixins
   |---buttons
   |---gradients
   |---vendor_support
   |---widgets
   |-pages
   |-structure
   |-ui_elements

각 디렉토리에는 여러 개의 sass 부분 (일반적으로 * .css.scss이지만 * .css.scss.erb 하나 또는 두 개)이 있습니다.

나는 많은 것을 가정 할 수 있지만,는 레일 *= require_tree .application.css로 인해 해당 디렉토리의 모든 파일을 자동으로 컴파일해야 우리합니다 . 맞습니까?

최근에 모든 색상 변수를 제거하고 루트 app/assets/stylesheets폴더 (_colors.css.scss) 의 파일에 배치하여 파일을 정리해 보았습니다 . 그런 다음 app/assets/stylesheetsmaster.css.scss라는 루트 폴더에 다음과 같은 파일을 만들었습니다 .

// Color Palette 
@import "colors";

// Mixins
@import "mixins/buttons/standard_button";
@import "mixins/gradients/table_header_fade";
@import "mixins/vendor_support/rounded_corners";
@import "mixins/vendor_support/rounded_corners_top";
@import "mixins/vendor_support/box_shadow";
@import "mixins/vendor_support/opacity";

레일이 자산 순서를 처리하는 방법을 실제로 이해하지 못하지만 내 편이 아닙니다. 어떤 파일도 발생하지 않습니다.

Undefined variable: "$dialog_divider_color".
  (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)

Undefined mixin 'rounded_corners'.
  (in /home/blah/app/assets/stylesheets/widgets.css.scss)

변수 $dialog_divider_color는 _colors.css.scss 명확하게 정의에되어 있으며 _master.css.scss개 색상과 모든 믹스 인을 가져 옵니다 . 그러나 분명히 레일은 그 메모를 얻지 않았다.

어떤 방법이 있습니까? 아니면 모든 변수 정의를 각 개별 파일과 모든 mixin 가져 오기에 다시 넣어야?

불행히도, 이 사람 은 그것이 가능하다고 생각하지 않는 것 같지만 그가 틀렸기를 바라고 있습니다. 어떤 생각이라도 대단히 감사합니다.

---

CSS의 문제는 모든 파일을 자동으로 추가하고 싶지 않다는 것입니다. 브라우저에서 시트를로드하고 처리하는 순서는 있습니다. 따라서 항상 모든 CSS를 명시 적으로 가져옵니다.

예를 들어, 모든 끔찍한 다른 브라우저 구현 대신 기본 모양 을 얻기 위해 normalize.css 시트 가 있다고 가정 해 보겠습니다. 브라우저가로드하는 첫 번째 파일이어야합니다. CSS 가져 오기 오기의 어딘가에이 시트를 선택적으로 포함하면 기본 스타일 CSS 파일에 이전에로드 된 모든 재정의됩니다. 이것은 변수와 믹스 인에 동일합니다.

Euruko2012 에서 Roy Tomeij 의 프레젠테이션을보고 관리 할 CSS가 많으면 다음과 같은 접근 방식을 결정했습니다.

나는 일반적으로 다음 접근 방식을 사용합니다.

1. 모든 기존 .css 파일의 이름을 .scss로 바꿉니다.
2. application.scss에서 모든 내용을 제거합니다.

@import 지시문을 application.scss.

twitters 부트 가능한 경우 몇 개의 CSS 시트를 사용하는 경우 스타일을 사용할 시트가 먼저 부트를 가져와야합니다. 그래서 당신 @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아니라는 것은 아니라고 my_model.css.scss.

그런 다음 partials또는 라는 폴더를 만듭니다 modules. 이것은 대부분의 다른 파일의 위치가됩니다. application.scss다음과 같이 파일에 가져 오기를 추가 할 수 있습니다 .

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

이제 홈페이지에서 기사 스타일을 지정하기 위해 약간의 CSS를 만들면됩니다. 만하면 만들기 partials/_article.scss컴파일 된 application.css. 가져 오기 순서 때문에 자신의 scss 파일에서 부트 믹스 인과 변수를 사용할 수도 있습니다.

지금까지 발견 된 한이 방법의 유일한 단점은 레일이 항상 수행하는 것이 아니기 때문에 부분적으로 /*.scss 파일을 강제로 재확인해야한다는 것입니다.

---

다음 폴더 구조를 만듭니다.

+ 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'변수 나 믹스 인을 사용하려는 모든 스타일 파일에서 선언 하십시오. 이 오버 헤드를 고려할 수 있지만 실제로 모든 파일에서 스타일의 종속성을 선언해야한다는 생각이 마음에 듭니다. 물론 스타일 정의를 추가하지 않으므로 globals.css.scss의 믹스 인과 변수 만 가져 오는 것이 중요합니다. 그렇지 않으면 스타일 정의가 미리 컴파일 된 파일에 여러 번 포함됩니다.

---

파일간에 변수 등을 사용하려면 @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_admin", media: "all"

---

이 질문 에 따르면 가져 오기를 정의하고 템플릿간에 변수를 공유하기 위해서만 사용할 수 있습니다 application.css.sass.

=> 이름 문제인 것 같습니다.

다른 방법 은 모든 것을 포함하고이 파이프 라인을 비활성화하는 것 입니다.

---

나는 매우 비슷한 문제가 있었다. 부분을 ​​가져올 때 @import 문에 밑줄을 넣는 것이 도움이되었습니다. 그래서

@import "_base";

대신에

@import "base";

이상한 버그 일 수 있습니다 ...

참고 URL : https://stackoverflow.com/questions/9138946/proper-scss-asset-structure-in-rails