با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره آموزش React JS در خدمت شما عزیزان هستیم.
در این جلسه قصد داریم به آموزش استفاده از Sass در React JS بپردازیم.
Sass یک پیش پردازنده CSS است.
فایل های Sass روی سرور اجرا شده و CSS را به مرورگر میفرستد.
برای آشنایی بیشتر میتوانید به آموزش Sass مراجعه نمایید.
برای نصب Sass از npm استفاده میکنیم.
دستور زیر را برای نصب Sass اجرا کنید.
1 | C:\Users\Your Name>npm install node-sass |
فایل های Sass را میتوانید مانند فایل های CSS ایجاد کنید اما با این تفاوت که پسوند فایل های Sass به صورت scss. هستند.
در فایل Sass خود میتوانید از متغیر ها و توابع آن استفاده کنید.
در مثال زیر فایلی ایجاد خواهیم کرد که مقدار رنگ را در خود ذخیره کند.
1 2 3 4 5 | $myColor: red; h1 { color: $myColor; } |
حالا میتوانید فایل Sass را نیز مانند فایل های CSS در برنامه خود import کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import React from 'react'; import ReactDOM from 'react-dom'; import './mysass.scss'; class MyHeader extends React.Component { render() { return ( <div> <h1>Hello Style!</h1> <p>Add a little style!.</p> </div> ); } } ReactDOM.render(<MyHeader />, document.getElementById('root')); |
جلسه آموزش استفاده از Sass در React JS و همچنین دوره آموزش React JS نیز به پایان رسید.
امیدوارم این دوره مفید واقع شده باشد. موفق باشید.