복붙노트

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

RUBY-ON-RAILS

레일에 적정 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";
    

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

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