Bu kılavuz, hızlı bir Node.js SASS/SCSS projesi oluşturmaya yönelik tüm prosedürü gösterecektir.
Hızlı Node.js Sass/SCSS Projesi Nasıl Kurulur?
SASS, seçilen öğe üzerinde stil oluşturmak için saf CSS özelliklerini kullanır. Matematik ve değişken özellikleri dahil ederek orijinal CSS'yi güçlendirir. DOM'a hiyerarşik bir şekilde stil uygular. Geliştirici, SASS'ı Node.js ile entegre ederek projeyi daha göz alıcı ve piksel açısından mükemmel hale getirecek şekilde kolayca biçimlendirebilir.
SASS/SCSS boyunca Node.js projesi kurmak için aşağıdaki adımları takip edelim.
Adım 1: “SASS” Kurulumu
İlk önce “ SASS “Node paket yöneticisini kullanarak Node.js projesinde genel olarak” npm ” Bu komut aracılığıyla:
npm install -g sass
Çıktı şunu gösteriyor: ' evet ” paketi kuruldu:
Adım 2: Dizinler Oluşturma
Daha sonra aşağıdaki “mkdir” komutunu kullanarak hem CSS hem de SCSS dosyaları için ayrı dizinler oluşturun:
mkdir cssDosyaları
mkdir scssDosyalar
Yukarıda görüldüğü gibi' mkdir ” komutu “ cssDosyaları ' Ve ' scssDosyaları ” dizinleri:
3. Adım: SASS Modülünü bağlayın
Şimdi “ küstahlık ' modülü, '' dosyasının yerleşik dosyalarında herhangi bir değişiklik olup olmadığını izlemek için kullanılır. scssDosyaları ” dizini. Değişiklik yapılması durumunda, bağlantılı “” içerisinde otomatik olarak CSS dosyaları oluşturulacaktır. cssDosyaları ”dizinine gidin ve aynı scss verilerini CSS dosyasına ekleyin.
“İzlemek ve bağlamak için yürütülecek komut” küstahlık ” modülü aşağıdaki gibidir:
küstahlık --kol saati scssDosyaları : cssDosyalarıArtık saas, scssFiles dizinindeki her türlü değişikliği izliyor.
Not: Yukarıdaki komut, Visual Studio kodu gibi araç terminallerinde çalışmayacağından sistem Komut İstemi'nde yürütülmelidir.
Adım 4: SCSS ve İlgili CSS Dosyalarının Oluşturulması
Bu adımda “adlı boş bir dosya scssStyle ' ile ' scss 'uzantısı' içinde oluşturulur scssDosyaları ” dizini:
Bundan sonra “adlı iki dosya scssStyle.css ' Ve ' scssStyle.css.map '' tarafından otomatik olarak oluşturulur küstahlık “modülün içinde” cssDosyaları ” dizini aşağıda gösterildiği gibi:
Adım 5: Kod Ekleme
Son olarak, “ içine bir miktar SCSS kodu girin. scssStyle.scss ' Aşağıda gösterildiği gibi:
Artık CSS formatındaki aynı kod otomatik olarak '' içine ekleniyor scssStyle.css ' dosya:
4. ve 5. adımları gif yardımıyla görsel olarak örnekleyelim:
Bu kılavuzda Node.js SASS\SCSS projesini oluşturma adımları açıklanmıştır.
Çözüm
Hızlı bir Node.js SASS/SCSS projesi kurmak için öncelikle “modülü kurun” küstahlık ” modülünü seçin ve ardından “ için bir tane olmak üzere iki dizin oluşturun. SASS\SCSS ” dosyası ve “ için başka bir dosya CSS ' Dosyalar. Bundan sonra “ küstahlık Yeni oluşturulan dizinlerdeki herhangi bir değişikliği izlemek için “modülü” sass – sass'ı izleyin: css ' emretmek. Bu işlemin sonucunda “CSS” klasöründe “SASS\SCSS” dosyası ve iki adet “CSS” dosyası otomatik olarak oluşturulur. Kullanıcı “SASS\SCSS” dosyalarını değiştirirse, yeni değişiklikler otomatik olarak CSS dosyalarına eklenecektir. Bu kılavuzda Node.js SASS\SCSS projesinin kurulumuna ilişkin prosedürün tamamı açıklanmıştır.