Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Sass (sözdizimsel olarak harika stil sayfaları), onu daha güçlü kılan ek özelliklere sahip bir CSS uzantısıdır. Sass ile ilgili en iyi şey, CSS ile uyumlu olmasıdır; bu, onu web geliştirme projelerinizde React gibi JavaScript çerçeveleriyle kullanabileceğiniz anlamına gelir.

Ancak, normal CSS'den farklı olarak, Sass'ı kullanmak için biraz kuruluma ihtiyacınız var. Basit bir React.js projesi ayarlayarak ve Sass'ı projeye entegre ederek bunun nasıl çalıştığını öğrenin.

React.js Projenizde Sass Nasıl Kullanılır?

Diğer CSS işlemcileri gibi, Sass da React tarafından yerel olarak desteklenmez. Sass'ı React'te kullanmak için yarn veya npm gibi bir paket yöneticisi aracılığıyla üçüncü taraf bir bağımlılık kurmanız gerekir.

Çalıştırarak yerel makinenizde npm veya yarn kurulu olup olmadığını kontrol edebilirsiniz.

instagram viewer
npm --versiyon veya iplik --versiyon. Terminalinizde bir sürüm numarası görmüyorsanız, npm'yi yükle veya önce iplik.

Bir React.js Projesi Oluşturun

Bu kılavuzu takip etmek için, create-react-app kullanarak basit bir React.js uygulaması kurabilirsiniz.

Öncelikle, React projenizi oluşturmak istediğiniz klasöre gitmek için bir komut satırı kullanın. O zaman koş npx oluştur-tepki-uygulaması . İşlem bittiğinde, kullanarak uygulama dizinine girin. CD . Aşağıdaki içeriği ekleyin Uygulama.js başlangıç ​​olarak dosya:

içe aktarmak Tepki itibaren "tepki";
içe aktarmak "./App.scss";
işlevUygulama() {
geri dönmek (
<div sınıfıAdı="sarıcı">
<h1>React'te Sass Kullanmak</h1>
<başlık sınıfıAdı="sarmalayıcı__btns">
<düğme>Mavi Düğme</button>
<düğme>Kırmızı buton</button>
<düğme>Yeşil buton</button>
</header>
</div> );
}
ihracatvarsayılan Uygulama;

Temel bir React projesi oluşturduktan sonra, Sass'ı entegre etmenin zamanı geldi.

Sass'ı yükleyin

Sass'ı npm veya yarn ile kurabilirsiniz. Çalıştırarak yarn aracılığıyla kurun iplik ekle sass veya npm'yi tercih ederseniz, çalıştırın npm kurulum sass. Paket yöneticiniz, Sass'ın en son sürümünü projenin bağımlılıklar listesine ekleyecektir. paket.json dosya.

.css Dosyalarını .scss veya .sass olarak yeniden adlandırın

Projenin klasöründe, sırasıyla App.css ve index.css'yi App.scss ve index.scss olarak yeniden adlandırın.

Bu dosyaları yeniden adlandırdıktan sonra, yeni dosya uzantılarıyla eşleşmesi için App.js ve index.js dosyalarınızdaki içe aktarmaları aşağıdaki gibi güncellemeniz gerekir:

içe aktarmak "./index.scss";
içe aktarmak "./App.scss";

Bu noktadan itibaren, oluşturduğunuz herhangi bir stil dosyası için .scss uzantısını kullanmalısınız.

Değişkenleri ve Karışımları İçe Aktarma ve Kullanma

En önemlilerinden biri Sass'ın avantajları değişkenleri ve karışımları kullanarak temiz, yeniden kullanılabilir stiller yazmanıza yardımcı olmasıdır. Aynısını React'te nasıl yapabileceğiniz belli olmasa da, Sass'ı düz JavaScript ve HTML ile yazılmış projelerde kullanmaktan çok da farklı değil.

İlk olarak, yeni bir tane oluşturun stiller klasöründeki kaynak dosya. Stiller klasöründe iki dosya oluşturun: _variables.scss Ve _mixins.scss. _variables.scss dosyasına aşağıdaki kuralları ekleyin:

$background-color: #f06292;
$metin rengi: #f1d3b3;
$btn-genişlik: 120piksel;
$btn-yükseklik: 40piksel;
$blok doldurma: 60piksel;

Ve _mixins.scss dosyasına şunu ekleyin:

@mixin dikey liste {
ekran: esnek;
hizalama öğeleri: merkez;
esnek yön: sütun;
}

Ardından değişkenleri ve karışımları App.scss dosyasına aşağıdaki gibi içe aktarın:

@içe aktarmak "./Stiller/değişkenler";
@içe aktarmak "./Stiller/karışımlar";

Değişkenlerinizi ve karışımlarınızı App.scss dosyasında kullanın:

@içe aktarmak "./Styles/variables.scss";
@içe aktarmak "./Stiller/karışımlar";
.sarmalayıcı {
arka plan rengi: $arka plan rengi;
renk: $metin rengi;
dolgu: $block-padding;

&__btn {
@katmak dikey-liste;
düğme {
genişlik: $btn-genişlik;
yükseklik: milyar dolar-yükseklik;
}
}
}

React'te değişkenleri ve karışımları bu şekilde kullanırsınız. Karışımlar ve değişkenlerin yanı sıra, işlevler gibi Sass'taki diğer tüm harika özellikleri de kullanabilirsiniz. Sınırlama yok.

React.js'de Sass Kullanımı

Sass, yeniden kullanılabilir CSS kodu yazmak için tam olarak ihtiyaç duyacağınız şey olan CSS'nin yanı sıra daha fazla işlevsellik sağlar.

Sass paketini npm veya yarn yoluyla yükleyerek, CSS dosyalarınızı .scss veya .sass olarak güncelleyerek, ardından içe aktarmalarınızı yeni dosya uzantısını kullanacak şekilde güncelleyerek React'te Sass'ı kullanmaya başlayabilirsiniz. Bundan sonra React'te SCSS yazmaya başlayabilirsiniz.