[RUBY-ON-RAILS] 레일에 적정 SCSS 자산 구조

레일에 적정 SCSS 자산 구조

그래서, 응용 프로그램 / 자산 / 스타일 / 디렉토리 구조가 그 같은 외모 뭔가 :

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

각 디렉토리에서 여러 말대꾸의 파셜 (보통 * .css.scss하지만, 하나 또는 두 개의 * .css.scss.erb)이 있습니다.

나는 많은 가정 할 수 있지만 레일은 자동으로 인해 * = require_tree의 해당 디렉토리에있는 모든 파일을 컴파일해야한다. application.css에서 오른쪽?

나는 최근에 모든 색상 변수를 제거하고 루트 응용 프로그램 / 자산 / 스타일 폴더 (_colors.css.scss)에있는 파일에 배치하여 이러한 파일의 구조 조정 노력했다. 그때라고 master.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";

정말 핸들을 자산 컴파일의 순서를 레일 방식을 이해하지 않지만, 내 찬성 분명히 아니다. 이 파일의 아무도 그들이 어떤 변수 나 유지 mixin이 가져가 실현되지, 그것은 오류를 던져 내가 컴파일 할 수 있도록 나타납니다.

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을 가져 오는 중입니다. 그러나 분명히 레일은 그 메모를하지 않았다.

나는이 오류를 수정할 수있는 몇 가지 방법이, 또는 내가 믹스 인 수입은 모든뿐만 아니라, 각각의 파일로 백업 내 모든 변수 정의를 퍼팅에 의지해야합니까?

불행하게도,이 사람은 가능하다고 생각하지 않는 것,하지만 난 그가의 잘못을 희망하고있다. 어떤 생각이 크게 감사하고 있습니다.

해결법

1. ==============================

   1.CSS의 문제는 자동으로 모든 파일을 추가하지 않으입니다. 당신의 시트가 브라우저에 의해로드 및 처리되는 순서는 필수적이다. 당신은 항상 끝날 그래서 명시 적으로 모든 CSS를 가져 오기.

   CSS의 문제는 자동으로 모든 파일을 추가하지 않으입니다. 당신의 시트가 브라우저에 의해로드 및 처리되는 순서는 필수적이다. 당신은 항상 끝날 그래서 명시 적으로 모든 CSS를 가져 오기.

   예를 들어, 당신이 모든 끔찍한 다른 브라우저 구현 대신 기본 모양을 얻을하는 normalize.css 시트가 있다고 할 수 있습니다. 이것은 첫 번째 파일 브라우저로드해야합니다. 그냥 무작위로 CSS의 수입이 시트 곳을 포함하면, 다음 브라우저의 기본 스타일을 무시하지만, 또한 이전에로드 된 모든 CSS 파일에 정의 된 스타일 것뿐만 아닙니다. 이 변수 및 유지 mixin 같은 간다.

   당신이 관리하는 CSS의 많은 경우 다음과 같은 접근 방식에 대한 결정 Euruko2012 I 로이 Tomeij하여 프리젠 테이션을보고 한 후.

   나는 일반적으로이 방법을 사용 :

   application.scss에 @import 지시어를 추가 시작합니다.

   당신이 twitters 부트 스트랩과 자신의 몇 가지 CSS 시트를 사용하는 경우는 스타일을 재설정 할 수있는 시트를 가지고 있기 때문에, 당신은 먼저 수입 부트 스트랩에 있습니다. 당신은 "부트 스트랩 / bootstrap.scss"@import 추가 그래서; 당신의 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에 사용할 수 있도록.

   이 후 폴더를 이름 파셜 또는 모듈을 만들 수 있습니다. 이것은 다른 파일의 대부분의 장소가 될 것입니다. 이 모양을, 그래서 당신은 단지 application.scss 파일 가져 오기를 추가 할 수 있습니다 :

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

   지금 당신은 스타일 홈페이지에 기사를 CSS의 비트를 만들 경우. 그냥 파셜 / _article.scss를 작성하고이를 컴파일 application.css에 추가됩니다. 때문에 가져 오기 위해 당신은 또한 자신의하는 SCS 파일에있는 부트 스트랩이나 mixin과 변수를 사용할 수 있습니다.

   은 때때로 당신은 / * 부분의 재 컴파일을 강제로, 지금까지 발견 된이 방법의 환급. SCS들에게 파일을 레일이 항상 당신을 위해 그것을 못해 때문이다.

2. ==============================

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

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

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

   폴더 기반의 파일 "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
   

   그리고 마지막 단계 (이 중요하다)와 같은, 당신은 변수 나이나 mixin을 사용하려는 모든 스타일 파일에 선언 @import '기본 / 전역'. 이 오버 헤드를 고려하지만, 수 나는 실제로 당신이 모든 파일에 스타일의 종속성을 선언해야한다는 생각있다. 물론, globals.css.scss에서 당신만을 수입이나 mixin 변수들이 스타일 정의를 추가하지 않는 것이 중요합니다. 그렇지 않으면 스타일 정의는 미리 컴파일 된 파일을 여러 번 포함 할 것입니다 ...

3. ==============================

   3.사용 변수와 같은 파일에서, 당신은 @import 지시어를 사용해야합니다. 파일이 지정된 순서대로 가져옵니다.

   사용 변수와 같은 파일에서, 당신은 @import 지시어를 사용해야합니다. 파일이 지정된 순서대로 가져옵니다.

   다음, 사용은 수입을 선언 파일을 요구하는 application.css. 이것은 당신이 원하는 제어를 달성 할 수있는 방법입니다.

   마지막으로, 당신의 layout.erb 파일에, 당신은 사용에있는 "마스터"CSS 파일을 지정할 수 있습니다

   예를 들어 더 도움이 될 것입니다 :

   "응용 프로그램"과 "관리":하자 당신이 CSS의 다른 세트를 필요로 앱에 두 개의 모듈이 있다고

   |-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"
   

4. ==============================

   4.이 질문에 따라, 당신은 당신의 템플릿 사이 가져 오기 및 공유 변수를 정의하기 위해 application.css.sass 사용할 수 있습니다.

   이 질문에 따라, 당신은 당신의 템플릿 사이 가져 오기 및 공유 변수를 정의하기 위해 application.css.sass 사용할 수 있습니다.

   =>는 이름 만 문제가 될 것으로 보인다.

   다른 방법은이 파이프 라인을 모두 포함하고 비활성화 할 수 있습니다.

5. ==============================

   5.나는 매우 비슷한 문제가 있었다. 나 한테 무슨 도움 것은 부분을 가져올 때 @import 문에 밑줄에 넣어했다. 그래서

   나는 매우 비슷한 문제가 있었다. 나 한테 무슨 도움 것은 부분을 가져올 때 @import 문에 밑줄에 넣어했다. 그래서

   @import "_base";
   

   대신에

   @import "base";
   

   그것은 이상한 버그가 있습니다 ...

from https://stackoverflow.com/questions/9138946/proper-scss-asset-structure-in-rails by cc-by-sa and MIT license