Sass Kullanarak Şekillendirme Tepkisi

❮ Öncesi Sonraki ❯

sas nedir

Sass bir CSS ön işlemcisidir.

Sass dosyaları sunucuda yürütülür ve tarayıcıya CSS gönderir.

Sass Eğitimimizde Sass hakkında daha fazla bilgi edinebilirsiniz .

Sass'ı kullanabilir miyim?

Projenizde kullanıyorsanız create-react-appSass'ı kolayca kurabilir ve React projelerinizde kullanabilirsiniz.

Terminalinizde bu komutu çalıştırarak Sass'ı kurun:

>npm i sass

Artık projenize Sass dosyalarını dahil etmeye hazırsınız!

Bir Sass dosyası oluşturun

CSS dosyaları oluşturduğunuz gibi bir Sass dosyası oluşturun, ancak Sass dosyaları dosya uzantısına sahiptir. .scss

Sass dosyalarında değişkenleri ve diğer Sass işlevlerini kullanabilirsiniz:

benim-sass.scss:

Metnin rengini tanımlamak için bir değişken oluşturun:

$myColor: red;

h1 {
  color: $myColor;
}

Sass dosyasını bir CSS dosyasını içe aktardığınız gibi içe aktarın:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

ReactDOM.render(<Header />, document.getElementById('root'));