SASS và Zurb Foundation - gây nhầm lẫn hướng dẫn cài đặt

Question

Tôi quyết định sử dụng phiên bản Sass của Foundation4 vì CSS hầu như không thể chỉnh sửa hiệu quả ngay bây giờ.

Tôi làm theo các hướng dẫn tại đây: http://foundation.zurb.com/docs/sass.html

Những khuyên tôi nên cài đặt các viên ngọc (không có vấn đề) sau đó cài đặt la bàn sau đó tạo ra một dự án, mà tôi đã làm trong wwwroot.

Tất cả đều tốt cho đến nay. Sau đó, tôi khuyên tôi "tải xuống các tệp từ Github (lấy thư mục scss/và js /) và đặt chúng vào thư mục dự án của bạn"

Bây giờ tại sao tên cá trên xe đạp sẽ hướng dẫn khuyên tôi làm điều này khi bước trước trên dòng lệnh (la bàn tạo nền tảng -r zurb -using --using) tạo thư mục đã có trong thư mục gốc cho dự án của tôi - mặc dù được đặt tên khác - có chứa các tệp tương tự nếu không giống nhau? Đã có một thư mục "javascripts" với các thư mục con "nền tảng" và "nhà cung cấp" chứa các tệp giống nhau - mặc dù một số có kích thước khác nhau.

Tôi có thiếu gì đó không? Tệp "index.html" được bao gồm tham chiếu đến thư mục "javascripts", vậy tại sao tôi muốn bao gồm "js" từ github? Điều này rất khó hiểu khi bạn mới sử dụng công nghệ này!

Sau khi làm theo hướng dẫn cài đặt, bây giờ tôi có các tệp "foundation.scss" và "app.scss" có vẻ phần lớn giống với một tệp (app.scss) đã nhận xét rất nhiều. Tôi muốn sử dụng cái nào?

Dường như với tôi rằng các hướng dẫn về cơ bản đã lỗi thời. Có vẻ như tôi không cần "js" từ github nhưng tôi cần "scss". Nội dung của thư mục scss này trông giống như họ cần phải đi vào thư mục "sass" được tạo khi dự án được tạo và tệp "foundation.scss" có thể bị xóa vì "app.scss" là bản sao của nó.

Tôi không biết tệp cơ sở "app.scss" đang hy vọng "@import foundation" từ khi không có thư mục "nền tảng" được tạo khi cài đặt/tạo dự án. Có lẽ tôi đang thiếu một cái gì đó nhưng tất cả đều rất khó hiểu. Ai đó có thể làm rõ những gì tôi cần phải bắt đầu và những gì tôi có thể xóa/bỏ qua?

Answer 1

Khi bạn cài đặt gem, tất cả các tệp Foundation thích hợp được cài đặt cho bạn trong bộ đệm đá quý. La bàn sẽ kéo tất cả các tệp SCSS F4 vào dự án của bạn qua chỉ thị @import từ foundation.scss.

Tài liệu dự án trong kho lưu trữ Github hiển thị các hướng dẫn Compass mới nhất để xây dựng dự án F4 của bạn. https://github.com/zurb/foundation/blob/master/docs/sass.html.erb

Có vẻ như bạn đang pha trộn các hướng dẫn độc lập Độc lập vào nhóm La bàn.

Nếu bạn đã chạy này:

[sudo] gem install compass 
cd path/to/where-you-want-your-project 
run compass create <project-name> -r zurb-foundation --using foundation 

Bạn không cần Github hoặc các hướng dẫn độc lập.

Các bước bên dưới phác thảo các bước thủ công xây dựng dự án F4. Tôi nghĩ bạn bị kẹt ở số BƯỚC 4, vì vậy hãy tập trung vào phần đó.

BƯỚC 1:

Tải xuống cho dễ dàng truy cập hai tài liệu lưu trữ sau đây:

Foundation Vanilla:

http://foundation.zurb.com/files/foundation-4.1.6.zip

Foundation Thạc sĩ:

https://github.com/zurb/foundation/archive/master.zip

CD vào thư mục gốc của web site www:

BƯỚC 2:

Tạo tập tin này:

/config.rb

require 'zurb-foundation' 
http_path = "/" 
css_dir = "css" 
sass_dir = "scss" 
images_dir = "img" 
javascripts_dir = "js" 
output_style = :expanded 
relative_assets = true 
line_comments = true 

Chuyển output_style = :compact or :compressed và line_comments = false cho Sản xuất (khi phát trực tiếp).

BƯỚC 3:

• Copy/Move index.html từ Foundation Vanilla vào thư mục gốc www của bạn.
• Chỉnh sửa line 11 và thay đổi foundation.css thành app.css trong thẻ kiểu.

Bước 4:

Tạo thư mục này và file:

/SCSS/

• Tạo app.scss - Đây là trang web/ứng dụng stylesheet của bạn và chúng tôi sẽ nhập Normalize và F4 vào trong đó.

• Sao chép này vào nó:

  // Global Foundation Settings 
  // @import "settings"; 
  
  // Comment out this import if you don't want to use normalize 
  @import "normalize"; 
  
  // Comment out this import if you are customizing you imports below 
  @import "foundation"; 
  
  // Your own SCSS here... 
  

Nếu bạn muốn ghi đè một số biến F4 Sass, bạn sẽ cần file _settings.scss. Bây giờ tôi sẽ bỏ qua bước này và để nó bình luận cho đến khi bạn quen thuộc hơn với F4.

BƯỚC 5:

Tạo thư mục này (file tự động viết ở đây):

/css/

• app.css - sẽ được viết ở đây từ /scss/app.scss bởi Compass. Bình thường hóa và tất cả CSS F4 sẽ nằm bên trong nó, cộng với bất kỳ CSS nào mà bạn đã thêm vào.

Điều này xảy ra tự động, bạn không cần phải làm bất cứ điều gì ngoại trừ cài đặt đá quý cần thiết và tệp cấu hình la bàn của bạn từ BƯỚC 2.

Bước 6:

Tạo thư mục này và sao chép/di chuyển những tập tin này vào nó:

/js/

• Copy/Move /js/foundation.min.js từ Foundation Vanilla tải xuống tại đây.

• Nếu bạn cần app.js tạo/đặt riêng của mình tại đây và liên kết với nó cuối cùng trong chân trang.

/js/vendor/

• Copy/Move /js/vendor/custom.modernizr.js từ Foundation Vanilla tải vào đây.

• Sao chép/di chuyển /js/vendor/zepto.js và /js/vendor/jquery.js từ Foundation Vanilla tải xuống tại đây.

Sau đó, khi bạn cảm thấy thoải mái hơn, bạn có thể chọn các file cherry Quỹ JS cá nhân từ Foundation Thạc sĩ và nối chúng thành một lib nhỏ ở đây là foundation.min.js.

Điều đó sẽ thực hiện.

Kiểm tra tập tin này trong www repo của tôi, vì nó cho thấy một thiết lập F4 làm việc: https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html

Bạn cũng có thể poke xung quanh đó để làm thế nào để tích hợp Grunt.js cho tự động xây dựng của SCSS và JS với nối và rút gọn: https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js

Answer 2

Nếu không thông minh như @jhauraw, tôi đã chú ý điều gì đó khác.

Tôi đã cài đặt FOundation thông qua ứng dụng La bàn. Là một người mới làm quen với Compass, tôi cũng đang tìm thư mục "nền tảng" có chứa tất cả các tệp SCSS Foundation khác nhau. Và khi tôi nhìn vào tập tin _settings.scss đã xuất hiện, có vẻ như mọi thứ đã được bình luận. Những gì tôi biết hiểu (vẫn còn là một người mới đối với Compass) là tập tin "nền tảng" sống trong một thư viện tài nguyên trong Compass. Khi cần, các tệp này được nhập khi tạo tệp CSS. Tệp _settings.scss với tất cả các trường đã nhận xét là tệp ghi đè. Vì vậy, nếu bạn loại bỏ các ý kiến ​​cho một biến cụ thể hoặc mixin, nó sẽ ghi đè lên các bản gốc ẩn trong thư viện Compass. CSS được biên dịch dường như chứa mọi thứ cần thiết.