2012-01-23 38 views
8

Hi there im làm việc trên một ứng dụng đường ray mới và tôi chỉ mới bắt đầu sử dụng Foundation.Làm thế nào để ghi đè lên thuộc tính css Zurb Foundation bằng cách sử dụng đường ray 3.1?

tôi đã làm việc cài đặt bằng

ray nền tảng g: cài đặt

Mọi thứ đều làm việc như espected (i ý nghĩa bởi đó tôi có thể thấy css trong mã nguồn của tôi, và cũng là hình ảnh ảnh hưởng của nó; p)

tôi chỉ không hiểu làm thế nào để ghi đè giá trị mặc định proprieties của Zurb Foundation ...

tôi thấy o nline mà im nghĩa vụ phải chỉnh sửa một số foundation.css hoặc app.css nhưng ở đây dường như không có bất kỳ tệp nào giống như trong thư mục Ứng dụng của tôi ....

Tôi đã cài đặt bằng cách chỉnh sửa gemfile sau đó cài đặt gói.

cổ vũ

Trả lời

5

Lựa chọn 1: Vì bạn cài đặt nó thông qua bundler (giả sử bạn sử dụng một cái gì đó giống như gem 'zurb-foundation'), bạn sẽ không có bất kỳ tập tin mà bạn có thể chỉnh sửa trực tiếp. Bạn có thể ghi đè và tạo kiểu như bình thường bằng cách chỉnh sửa app/assets/stylesheets/application.css hoặc thêm tệp mới trong thư mục. Tôi muốn khuyên bạn nên điều này qua sửa đổi Zurb để bạn có thể tiếp tục nhận được những lợi ích của việc có thể nâng cấp lên phiên bản mới hơn của Zurb trong tương lai mà không phải đối phó với một mớ hỗn độn.

Phương án 2: Nếu bạn cảm thấy rằng bạn cần phải kiểm soát tốt hơn các tùy biến và bạn không phải lo lắng về những cạm bẫy trên, bạn có thể sao chép/tải foundation-rails và sao chép các tập tin trong vendor/assets vào thư mục Rails của riêng bạn cùng tên. Xóa zurb-foundation khỏi Gemfile của bạn, chuyển đổi và bạn sẽ có thể sửa đổi nội dung trực tiếp trong dự án của riêng mình.

Tùy chọn 3: Khám phá foundation-sass và dùng thử La bàn. Tôi đã không nhìn vào nó nhiều, nhưng bạn nên có một số lượng tùy biến thông qua mixins.

+0

Thx, Tùy chọn 1 chính xác là những gì tôi mong đợi. Bất kỳ cơ hội nào, bạn sẽ biết cách ghi đè tất cả các div (tôi muốn thêm đường viền trên mỗi thẻ để tôi có thể hiểu được Lưới và lồng ghép tốt hơn). Vì div.class overidding hoạt động nhưng không phải div –

+2

Bạn đã thử thêm '! Important' chưa? Ví dụ: 'div {border: 1px solid # 000! Quan trọng; } '. –

+1

foundation_and_overrides.scss được bao gồm trong HTML sau tệp application.css. Tôi tìm thấy câu trả lời khác về việc thêm CSS của tôi trong foundation_and_overrides.scss hoạt động tốt hơn, không yêu cầu sử dụng quá mức! – LeBleu

6

và có nó hoạt động nếu bạn làm ghi đè của bạn trên app/assets/stylesheets/application.css

Nhưng sẽ tốt hơn nếu bạn làm điều đó trong app/assets/stylesheets/foundation_and_overrides.scss,

cũng ở phía trên cùng của tập tin, có một loạt các dòng nhận xét, với những dòng này bạn cũng có thể sửa đổi một số thuộc tính!

Các vấn đề liên quan