sass session by ali ramadan to themifiy

1. How to use SASS
Tips and tricks
Ali Ramadan

2.  Variables
 Nesting
 Mixins
 Functions
 Imports
 Control Directives: @if, @for, and @each

4. ‫ال‬ ‫اضافة‬
@media
‫ال‬ ‫داخل‬
class
‫فى‬
scss

5. How can we benefit?
‫داخل‬ ‫استخدامها‬ ‫يمكن‬ ‫ال‬
class
‫نستخدمها‬
‫مع‬
_name.scss

6. Organization only
‫ي‬
‫تجاهل‬ ‫تم‬
_name
‫مترجمات‬ ‫قبل‬ ‫من‬ ً‫ة‬‫عاد‬
SCSS
‫ملف‬ ‫إلى‬ ‫صريح‬ ‫بشكل‬ ‫استيرادها‬ ‫يتم‬ ‫لم‬ ‫ما‬
SCSS
‫آخر‬
.
‫السفلية‬ ‫الشرطة‬ ‫استخدام‬ ‫يشير‬
_
‫ملف‬ ‫اسم‬ ‫قبل‬
SCSS
‫مستقل‬ ‫بشكل‬ ‫ترجمتها‬ ‫يجب‬ ‫وال‬ ‫أخرى‬ ‫ملفات‬ ‫من‬ ‫جزء‬ ‫هي‬ ‫الملفات‬ ‫هذه‬ ‫أن‬ ‫إلى‬
.
‫يتم‬ ،‫ذلك‬ ‫من‬ ً‫ال‬‫بد‬
‫ملفات‬ ‫إلى‬ ‫استيرادها‬
SCSS
‫أخرى‬
.
‫تنظيم‬ ‫في‬ ‫يساعد‬ ‫هذا‬
‫الكود‬
‫يجعل‬ ‫مما‬ ،
‫ال‬
refactor
‫أسهل‬ ‫والفهم‬
.
‫مثل‬ ،‫االستخدام‬ ‫إلعادة‬ ‫قابلة‬ ‫مكونات‬ ‫على‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬
mixins
‫والمتغيرات‬
.
How can we benefit?
‫داخل‬ ‫استايالت‬ ‫نستخدم‬
class
‫ملف‬ ‫فى‬
scss
‫اخر‬
$var
Mixin
Partials

7. !global
How can we benefit?
‫من‬ ‫بدل‬ ‫استخدامها‬
root
‫الصياغه‬ ‫و‬ ‫الكتابه‬ ‫فى‬ ‫اسهل‬ ‫لاللوان‬
‫الغامق‬ ‫و‬ ‫منهم‬ ‫الفاتح‬ ‫االلوان‬ ‫لدرجات‬ ‫استخدامها‬

8. How can we benefit?
‫من‬ ‫القيم‬ ‫تمرير‬ ‫يمكن‬
twig
‫لل‬ ‫داتا‬ ‫امرر‬ ‫عايز‬ ‫كنت‬ ‫انى‬ ‫كده‬ ‫قبل‬ ‫مشكله‬ ‫فى‬ ‫كان‬
after

10. How can we benefit?
‫القيم‬ ‫تمرير‬ ‫يمكن‬
‫باالستايل‬ ‫الخاصه‬
‫من‬
twig
‫من‬ ‫بدال‬ ‫االحيان‬ ‫بعض‬ ‫فى‬ ‫استخدامها‬ ‫يمكن‬ ‫و‬
js
‫الضافة‬
class
‫ل‬ ‫معين‬
div

12. In compiler
‫ال‬ ‫عند‬ ‫اسهل‬
compiler
‫لملف‬ ‫بالنسبه‬
css
‫استخدامها‬ ‫يمكن‬
‫مع‬
.class
‫ايضا‬
‫إلى‬ ‫ترجمتها‬ ‫تتم‬ ‫ال‬ ‫خاصة‬ ‫محددات‬
CSS
‫ما‬
‫صراحة‬ ‫إليها‬ ‫اإلشارة‬ ‫يتم‬ ‫لم‬
‫إلعادة‬ ‫القابلة‬ ‫األنماط‬ ‫لتحديد‬ ‫مفيدة‬
‫إخراجها‬ ‫في‬ ‫ترغب‬ ‫ال‬ ‫التي‬ ‫االستخدام‬
‫إلى‬ ‫مباشرة‬
CSS
‫ال‬ ‫فى‬ ‫افضل‬
performance

13. ‫كبيره‬ ‫بدرجه‬ ‫الكود‬ ‫هذا‬ ‫تحسين‬ ‫يمكن‬
How can we benefit?
‫داخل‬ ‫استايالت‬ ‫نستخدم‬
file
‫استخدامها‬ ‫و‬ ‫اساسى‬
‫طريق‬ ‫عن‬
include
‫فيه‬ ‫يوجد‬ ‫ملف‬ ‫استخدام‬ ‫يمكن‬
mixin global
‫يمكن‬
‫ثيم‬ ‫كل‬ ‫مع‬ ‫نسخه‬
ex

14. How can we benefit?
text and bg if bg dark text white
Hover button
Saturate
‫اللون‬ ‫تشبع‬ ‫لزيادة‬
deSaturate
‫اللون‬ ‫تشبع‬ ‫النقاص‬
Grayscale
‫ال‬ ‫الى‬ ‫اللون‬ ‫تشبع‬ ‫لتحويل‬
gray

15. like opacity and opacify but
$alpha

18. ‫للوحدات‬ ‫مقارنه‬ ‫هى‬

21. How can we benefit?
Does anyone have any information?
Ali Ramadan