Câu hỏi Cấu trúc tài sản SCSS phù 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 partials 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 đường ray 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ử tái cấu trúc các tệp này bằng cách xóa tất cả các biến màu và đặt chúng vào một tệp trong thư mục gốc app/assets/stylesheets thư mục (_colors.css.scss). Sau đó tôi đã tạo một tệp trong thư mục gốc app/assets/stylesheets thư mục được gọi 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 làm thế nào đường ray xử lý thứ tự biên dịch tài sản, nhưng rõ ràng là không có lợi cho tôi. Nó xuất hiện không ai trong số các tập tin nhận ra họ có bất kỳ biến hoặc mixin được nhập khẩu, và do đó, nó ném 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ả mixin của tôi. Nhưng dường như đường ray không nhận được bản ghi nhớ đó.

Có cách nào tôi có thể sửa chữa những lỗi này, hoặc tôi sẽ cần phải nghỉ mát để đưa tất cả các định nghĩa biến của tôi trở lại vào từng tập tin cá nhân, cũng như tất cả các nhập khẩu mixin?

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


76
2018-02-04 06:36


gốc




Các câu trả lời:


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ự mà các trang tính của bạn được tải và xử lý bởi trình duyệt là rất cần thiết. Vì vậy, bạn sẽ luôn luôn kết thúc một cách rõ ràng nhập khẩu tất cả các css của bạn.

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 đưa trang tính này vào một nơi nào đó trong lần nhập css của bạn, thì nó sẽ không chỉ ghi đè lên các kiểu mặc định của trình duyệt mà còn bất kỳ kiểu nào được định nghĩa trong tất cả các tệp css được tải trước đó. Điều này cũng tương tự đối với các biến và mixin.

Sau khi xem bản trình bày của Roy Tomeij tại Euruko2012 tôi quyết định cho cách tiếp cận sau nếu bạn có rất nhiều CSS để 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 bootstrap twitters và một vài css tờ của riêng bạn, bạn phải nhập bootstrap đầu tiên, bởi vì nó có một tờ để thiết lập lại phong cách. Vì vậy, bạn thêm @import "bootstrap/bootstrap.scss"; cho 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à của bạn application.scss tệp trông giống như:

@import "bootstrap/bootstrap.scss";

Do thứ tự nhập khẩu, bạn có thể sử dụng các biến, được nạp với @import "variables.scss"; ở bất kỳ nơi nào khác .scss tệp được nhập sau đó. Vì vậy, chúng có thể được sử dụng trong type.scss trong thư mục bootstrap mà còn ở my_model.css.scss.

Sau khi tạo thư mục có tên partials hoặc là 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.scss tệp để nó trông giống như sau:

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

Bây giờ nếu bạn tạo 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.scss và 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 bootstrap và biến 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 tôi tìm thấy cho đến nay là, đôi khi bạn phải buộc một biên dịch lại của các tập tin scss một phần / *. Bởi vì đường ray wont luôn luôn làm điều đó cho bạn.


121
2018-02-12 08:38



Cảm ơn, đây là cách tiếp cận mà tôi đã kết thúc. Tôi ghét giải pháp này vì bạn phải thêm thủ công mọi tệp bạn đang bao gồm mỗi khi bạn tạo một tệp, nhưng dường như khi CSS có liên quan, thứ tự không thành vấn đề. Thông thường tôi muốn nói đó chỉ là viết CSS xấu, nhưng nếu bạn đang sử dụng những thứ được cung cấp (ví dụ như bootstrap như bạn đã đề cập ở trên), bạn có xu hướng muốn ghi đè mọi thứ, vì vậy tôi miễn cưỡng đồng ý đây là cách tiếp cận đúng. - David Savage
Cảm ơn! Một cách tiếp cận rất tốt đẹp và một lời giải thích tốt! Một dự án đáng nói đến: Plugin FireBug này, FireSass, hiển thị số dòng của my_model.css.sass thay vì dòng của application.css đã biên dịch - BBQ Chef
Với cách tiếp cận này, nếu tôi muốn thay đổi màu liên kết mặc định thành màu đỏ áp dụng cho tất cả các partials của tôi, bạn sẽ làm như thế nào? bạn sẽ đặt nó ở đâu? - chh
Lưu ý rằng cách tiếp cận này cũng được đề xuất trong Hướng dẫn đường dẫn tài sản. Tìm kiếm "Nếu bạn muốn sử dụng nhiều tệp Sass". - ybakos
@Lykos có bạn xóa mọi thứ khỏi application.css và đổi tên thành application.scss. Bởi vì require_tree chỉ bao gồm mọi thứ và bạn thường muốn kiểm soát thứ tự - Benjamin Udink ten Cate


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 base tạo một tệp "globals.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 tệp application.css.scss, bạn sẽ có:

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

Và là bước cuối cùng (điều này 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ể xem xét chi phí này, nhưng tôi thực sự thích ý tưởng rằng bạn phải khai báo các 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 globals.css.scss vì chúng không thêm các định nghĩa kiểu dáng. Nếu không, các định nghĩa kiểu sẽ được bao gồm nhiều lần trong tệp đã biên dịch trước của bạn ...


7
2018-02-08 09:55



Tôi đã thử này nhưng không bao giờ có thể làm cho nó hoạt động đúng (vẫn còn nhận được lỗi biến mất tích). Có lẽ tôi đã không làm một cái gì đó một cách chính xác, nhưng tôi nghĩ rằng cuối cùng cách tiếp cận của danh sách thủ công mỗi tập tin là đúng cách để đi, kể từ khi với thứ tự CSS không quan trọng. - David Savage
Bạn vẫn có thể sử dụng phương pháp này: Thay vì "require_tree ..." chỉ cần thêm một dòng cho từng tệp riêng lẻ. Điều này sẽ làm cho SASS nhập các tệp theo đúng thứ tự. Về giải pháp bạn đang sử dụng, hãy xem bài đăng này mà tôi vừa tìm thấy: stackoverflow.com/questions/7046495/… Đảm bảo bao gồm depend_on directivie trong tệp application.css của bạn. - emrass


để sử dụng các biến và như vậy 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 nhập. đây là cách để đạt được sự kiểm soát mà 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ử dụng

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

giả sử bạn có hai mô-đun trong ứng dụng cần các bộ css khác nhau: "ứng dụng" và "quản trị"

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

6
2017-11-11 01:39





Theo câu hỏi này, bạn có thể CHỈ CÓ 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 bạn.

=> Có vẻ như chỉ là vấn đề tên.

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


3
2018-02-08 08:13



Điều này về cơ bản là điều tương tự Benjamin Udink mười Cate cung cấp trong phần thứ hai của phản ứng của bạn, nhưng trao cho anh ta tiền thưởng như giải pháp của mình là giải thích hơn. - David Savage


Tôi đã có một vấn đề rất giống nhau. Điều gì đã giúp tôi đặ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ạ ...


1
2018-03-13 08:20