Pertanyaan Struktur Aset SCSS yang Tepat dalam Rel


Jadi, saya punya app/assets/stylesheets/ struktur direktori yang terlihat seperti ini:

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

Di setiap direktori, ada beberapa parase sass (biasanya * .css.scss, tetapi satu atau dua * .css.scss.erb).

Saya mungkin berasumsi banyak, tetapi rel HARUS secara otomatis mengkompilasi semua file dalam direktori tersebut karena *= require_tree . di application.css, kan?

Saya baru-baru ini mencoba merestrukturisasi file-file ini dengan menghapus semua variabel warna dan menempatkannya dalam file di root app/assets/stylesheets folder (_colors.css.scss). Saya kemudian membuat file di root app/assets/stylesheets folder yang disebut master.css.scss yang terlihat seperti ini:

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

Saya tidak benar-benar mengerti bagaimana rel menangani urutan kompilasi aset, tetapi jelas tidak menguntungkan saya. Tampaknya tidak ada file yang menyadari bahwa mereka memiliki variabel atau mixin yang diimpor, sehingga melemparkan kesalahan dan saya tidak dapat mengkompilasi.

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)

Variabel $dialog_divider_color didefinisikan dengan jelas dalam _colors.css.scss, dan _master.css.scss mengimpor warna dan semua mixin saya. Namun ternyata rel tidak mendapatkan memo itu.

Adakah cara untuk memperbaiki kesalahan ini, atau apakah saya perlu menempatkan semua definisi variabel saya kembali ke masing-masing file, serta semua campuran mixin?

Sayangnya, orang ini sepertinya tidak berpikir itu mungkin, tapi aku berharap dia salah. Pikiran apa pun sangat dihargai.


76
2018-02-04 06:36


asal


Jawaban:


Masalah dengan CSS adalah, Anda tidak ingin secara otomatis menambahkan semua file. Urutan sheet Anda dimuat dan diproses oleh browser sangat penting. Jadi Anda akan selalu berakhir secara eksplisit mengimpor semua css Anda.

Sebagai contoh, katakanlah Anda memiliki menormalkan .css sheet, untuk mendapatkan tampilan default, bukan semua implementasi browser yang berbeda yang mengerikan. Ini harus menjadi file pertama yang dimuat browser. Jika Anda hanya secara acak menyertakan sheet ini di suatu tempat dalam impor css Anda, maka tidak hanya akan menimpa gaya default browser, tetapi juga gaya apa pun yang didefinisikan dalam semua file css yang dimuat sebelumnya. Ini berlaku sama untuk variabel dan mixin.

Setelah melihat presentasi oleh Roy Tomeij di Euruko2012 Saya memutuskan untuk pendekatan berikut jika Anda memiliki banyak CSS untuk dikelola.

Saya biasanya menggunakan pendekatan ini:

  1. Ubah nama semua file .css menjadi .scss
  2. Hapus semua konten dari application.scss

Mulai tambahkan arahan @import ke application.scss.

Jika Anda menggunakan bootstrap twitters dan beberapa lembar css Anda sendiri, Anda harus mengimpor bootstrap terlebih dahulu, karena ia memiliki sheet untuk mengatur ulang gaya. Jadi Anda tambahkan @import "bootstrap/bootstrap.scss"; untuk Anda application.scss.

File bootstrap.scss terlihat seperti:

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

Dan Anda application.scss file terlihat seperti:

@import "bootstrap/bootstrap.scss";

Karena urutan impor, Anda sekarang dapat menggunakan variabel yang dimuat @import "variables.scss"; di yang lain .scss file yang diimpor setelahnya. Jadi mereka bisa digunakan type.scss di folder bootstrap tetapi juga di my_model.css.scss.

Setelah ini buat folder bernama partials atau modules. Ini akan menjadi tempat sebagian besar file lainnya. Anda cukup menambahkan impor ke application.scss file sehingga akan terlihat seperti:

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

Sekarang jika Anda membuat sedikit css untuk menata sebuah artikel di beranda Anda. Buat saja partials/_article.scss dan itu akan ditambahkan ke yang dikompilasi application.css. Karena perintah impor, Anda juga dapat menggunakan variabel dan variabel bootstrap apa pun dalam file scss Anda sendiri.

Satu-satunya kelemahan dari metode ini yang saya temukan sejauh ini adalah, kadang-kadang Anda harus memaksa mengkompilasi ulang file parsial / * .ssss karena rel tidak akan selalu melakukannya untuk Anda.


121
2018-02-12 08:38



Buat struktur folder berikut:

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

Dalam folder base buat file "globals.css.scss". Dalam file ini, nyatakan semua impor Anda:

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

Di dalam Anda application.css.scss, Anda harus memiliki:

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

Dan sebagai langkah terakhir (ini penting), deklarasikan @import 'base/globals' di setiap file gaya di mana Anda ingin menggunakan variabel atau mixin. Anda mungkin mempertimbangkan overhead ini, tetapi saya benar-benar menyukai gagasan bahwa Anda harus menyatakan dependensi gaya Anda di setiap file. Tentu saja, penting bahwa Anda hanya mengimpor mixin dan variabel di globals.css.scss karena mereka tidak menambahkan definisi gaya. Jika tidak, definisi gaya akan disertakan beberapa kali dalam file yang dikompilasi ...


7
2018-02-08 09:55



untuk menggunakan variabel dan seperti di file, Anda perlu menggunakan direktif @import. file diimpor sesuai urutan yang ditentukan.

kemudian, gunakan application.css untuk meminta file yang menyatakan impor. ini adalah cara untuk mencapai kontrol yang Anda inginkan.

Akhirnya, dalam file layout.erb Anda, Anda dapat menentukan file css "master" yang akan digunakan

contoh akan lebih membantu:

katakanlah Anda memiliki dua modul di aplikasi Anda yang membutuhkan set berbeda dari css: "aplikasi" dan "admin"

file-file

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

inilah yang tampak seperti file di dalamnya:

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



Menurut pertanyaan ini, kamu bisa HANYA menggunakan application.css.sass untuk menentukan impor dan berbagi variabel antara template Anda.

=> Tampaknya hanya masalah nama.

Cara lain bisa dilakukan sertakan semuanya dan nonaktifkan jalur pipa ini.


3
2018-02-08 08:13



Saya memiliki masalah yang sangat mirip. Apa yang membantu saya adalah meletakkan garis bawah ke pernyataan @import saat mengimpor parsial. Begitu

@import "_base";

dari pada

@import "base";

Mungkin itu bug aneh ...


1
2018-03-13 08:20