Cấu trúc nội dung SCSS thích hợp trong Rails

Vì vậy, tôi có một app/assets/stylesheets/cấu trúc thư mục trông giống như sau:

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

Trong mỗi thư mục, có nhiều phần chia sass (thường là * .css.scss, nhưng một hoặc hai * .css.scss.erb).

Tôi có thể giả định rất nhiều, nhưng rails NÊN tự động biên dịch tất cả các tệp trong các thư mục đó vì *= require_tree .trong application.css, phải không?

Gần đây tôi đã thử cấu trúc lại các tệp này bằng cách loại bỏ tất cả các biến màu và đặt chúng vào một tệp trong app/assets/stylesheetsthư mục gốc (_colors.css.scss). Sau đó, tôi đã tạo một tệp trong app/assets/stylesheetsthư mục gốc có tên là master.css.scss trông giống như sau:

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

Tôi không thực sự hiểu cách rails xử lý thứ tự biên dịch nội dung, nhưng rõ ràng là nó không có lợi cho tôi. Có vẻ như không có tệp nào nhận ra rằng chúng có bất kỳ biến hoặc hỗn hợp nào đang được nhập, và do đó, nó tạo ra lỗi và tôi không thể biên dịch.

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)

Biến $dialog_divider_color được xác định rõ ràng trong _colors.css.scss và _master.css.scssđang nhập màu và tất cả các mixin của tôi. Nhưng rõ ràng rails đã không nhận được bản ghi nhớ đó.

Có cách nào để tôi có thể sửa những lỗi này không hoặc tôi sẽ cần dùng đến việc đưa tất cả các định nghĩa biến của mình trở lại từng tệp riêng lẻ, cũng như tất cả các lần nhập mixin?

Thật không may, anh chàng này dường như không nghĩ là có thể, nhưng tôi hy vọng anh ta đã sai. Ý kiến ​​nào cũng được hoan nghênh.

Vấn đề với CSS là bạn không muốn tự động thêm tất cả các tệp. Thứ tự các trang tính của bạn được tải và xử lý bởi trình duyệt là điều cần thiết. Vì vậy, bạn sẽ luôn kết thúc nhập tất cả css của mình một cách rõ ràng.

Ví dụ, giả sử bạn có normalize.css trang tính , để có giao diện mặc định thay vì tất cả các triển khai trình duyệt khác nhau khủng khiếp. Đây sẽ là tệp đầu tiên mà trình duyệt tải. Nếu bạn chỉ ngẫu nhiên bao gồm trang tính này ở đâu đó trong các lần nhập css của mình, thì nó sẽ không chỉ ghi đè các kiểu mặc định của trình duyệt mà còn cả bất kỳ kiểu nào được xác định trong tất cả các tệp css đã được tải trước đó. Điều này cũng xảy ra tương tự đối với các biến và mixin.

Sau khi xem bài thuyết trình của Roy Tomeij tại Euruko2012, tôi đã quyết định chọn cách tiếp cận sau nếu bạn có nhiều CSS cần quản lý.

Tôi thường sử dụng phương pháp này:

1. Đổi tên tất cả các tệp .css hiện có thành .scss
2. Xóa tất cả nội dung khỏi application.scss

Bắt đầu thêm chỉ thị @import vào application.scss.

Nếu bạn đang sử dụng twitters bootstrap và một vài trang css của riêng mình, trước tiên bạn phải nhập bootstrap, vì nó có một trang để đặt lại kiểu. Vì vậy, bạn thêm @import "bootstrap/bootstrap.scss";vào của bạn application.scss.

Tệp bootstrap.scss trông giống như sau:

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

Và application.scsstệp của bạn trông giống như:

@import "bootstrap/bootstrap.scss";

Do thứ tự của các lần nhập, bây giờ bạn có thể sử dụng các biến, được tải @import "variables.scss";trong bất kỳ .scsstệp nào khác được nhập sau nó. Vì vậy, chúng có thể được sử dụng trong type.scssthư mục bootstrap mà còn trong my_model.css.scss.

Sau đó, tạo một thư mục có tên partialshoặc modules. Đây sẽ là nơi chứa hầu hết các tệp khác. Bạn chỉ có thể thêm nhập vào application.scsstệp để tệp sẽ giống như sau:

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

Bây giờ nếu bạn thực hiện một chút css để tạo kiểu cho một bài viết trên trang chủ của bạn. Chỉ cần tạo partials/_article.scssvà nó sẽ được thêm vào biên dịch application.css. Do thứ tự nhập, bạn cũng có thể sử dụng bất kỳ hỗn hợp và biến bootstrap nào trong các tệp scss của riêng bạn.

Hạn chế duy nhất của phương pháp này mà tôi tìm thấy cho đến nay là, đôi khi bạn phải buộc biên dịch lại một phần tệp / *. Scss vì rails sẽ không làm việc đó cho bạn.

để sử dụng các biến và các biến tương tự trên các tệp, bạn cần sử dụng chỉ thị @import. các tệp được nhập theo thứ tự được chỉ định.

sau đó, sử dụng application.css để yêu cầu tệp khai báo các lần nhập. đây là cách để đạt được sự kiểm soát bạn muốn.

cuối cùng, trong tệp layout.erb của bạn, bạn có thể chỉ định tệp css "chính" nào sẽ sử dụng

ví dụ sẽ hữu ích hơn:

giả sử bạn có hai mô-đun trong ứng dụng của mình cần các bộ css khác nhau: "application" và "admin"

Tập tài liệu

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

đây là những gì các tệp trông giống như bên trong:

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

Tạo cấu trúc thư mục sau:

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

Trong thư mục, hãy basetạo một tập tin "domains.css.scss". Trong tệp này, hãy khai báo tất cả các lần nhập của bạn:

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

Trong application.css.scss của bạn, bạn sẽ có:

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

Và bước cuối cùng (đây là bước quan trọng), hãy khai báo @import 'base/globals'trong mọi tệp kiểu mà bạn muốn sử dụng biến hoặc mixin. Bạn có thể cân nhắc chi phí này, nhưng tôi thực sự thích ý tưởng rằng bạn phải khai báo sự phụ thuộc của các kiểu của bạn trong mọi tệp. Tất nhiên, điều quan trọng là bạn chỉ nhập các mixin và các biến trong perfals.css.scss vì chúng không thêm định nghĩa kiểu. Nếu không, các định nghĩa kiểu sẽ được đưa vào nhiều lần trong tệp biên dịch trước của bạn ...

Theo câu hỏi này , bạn CHỈ có thể sử dụng application.css.sassđể xác định các biến nhập và chia sẻ giữa các mẫu của mình.

=> Đó dường như chỉ là vấn đề tên gọi.

Một cách khác có thể là bao gồm mọi thứ và vô hiệu hóa đường dẫn này .

Tôi đã có một vấn đề rất giống nhau. Điều đã giúp tôi là đặt dấu gạch dưới vào câu lệnh @import khi nhập một phần. Vì thế

@import "_base";

thay vì

@import "base";

Nó có thể là một lỗi lạ ...