Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adnankasikci/firstsassproject
Written for understanding and familiarity with Sass technologies.
https://github.com/adnankasikci/firstsassproject
sass sass-framework sass-mixins
Last synced: about 1 month ago
JSON representation
Written for understanding and familiarity with Sass technologies.
- Host: GitHub
- URL: https://github.com/adnankasikci/firstsassproject
- Owner: adnankasikci
- License: mit
- Created: 2023-05-16T20:39:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-16T23:22:39.000Z (about 1 year ago)
- Last Synced: 2024-10-31T09:27:50.724Z (3 months ago)
- Topics: sass, sass-framework, sass-mixins
- Language: SCSS
- Homepage: https://sass-first-project.netlify.app/
- Size: 4.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## D-503 Game Web Site with Sass
Sass yaklaşımlarına aşinalık ve sass teknolojisini anlama. https://sass-first-project.netlify.app/
#### Proje Amacı
Bu projede sass konularına daha iyi hakim olabilmek için farklı örnekleri de görebilme adına hazırlanmış bir web sitedir.
- Teknoloji yapısını iyi anlamak
- Kullanılan yapılara aşina olmak
- Sass folder structure ile çalışma mantığını anlamak
- @import, @extend, @include @mixin ile çalışmak
- Componentlerle çalışma
#### Kullanılanlar
- Hover visited active focus hareketleri ile çalışma
- Değişkenlerle çalışma ve utilites class yapıları ile çalışma
- Mixins kullanarak kod tekrarlarından kurtulma
- Sass ile animasyonlarla çalışma
- Sass ve kütüphanelerin iç içe kullanımı
- Responsive uyumlu tasarım
## Kurulum
Projenin kurulumu için aşağıdaki adımları izleyin:
1. Proje dosyalarını bilgisayarınıza indirin veya klonlayın.
2. Terminali açın ve proje dizinine gidin: `cd proje-klasoru`.
3. Gerekli bağımlılıkları yüklemek için `npm install` komutunu çalıştırın.
4. Projeyi çalıştırmak için `npm start` komutunu kullanın.
5. Tarayıcınızda `http://localhost:3000` adresine gidin ve projeyi görüntüleyin.
## Kullanım
Proje kullanımıyla ilgili aşağıdaki detayları göz önünde bulundurun:
- Proje ana sayfasında mevcut olan örnekleri inceleyebilirsiniz.
- Proje dosyalarına yeni componentler yerleştirmek için kullanın: `_components.scss`
- Proje yapısını ve kullandığınız Sass tekniklerini inceleyerek çalışma mantığını anlayabilirsiniz.
- Proje dosyalarında `_abstracts.scss` ile daha gelişmiş yapılar ekleyin.
```SCSS
>> _abstracts.scss
//Örnek Yapı Ekleme
.primaryButton{
$-dark {
background-color:red;
}
$-white {
background-color:white;
}
}
```
## Katkıda Bulunma
Eğer projeye katkıda bulunmak isterseniz, lütfen aşağıdaki adımları takip edin:
1. Bu projeyi fork edin.
2. Yeni bir dal oluşturun: `git checkout -b feature/yeni-ozellik`.
3. Yaptığınız değişiklikleri işleyin: `git commit -am 'Yeni özellik ekle'`.
4. Dalınıza itme yapın: `git push origin feature/yeni-ozellik`.
5. Pull Request göndermek için GitHub üzerinden talep oluşturun.
## İletişim
Herhangi bir sorunuz, öneriniz veya geri bildiriminiz varsa, lütfen göndermekten çekinmeyin.:relieved:
Daha fazla bilgi için [proje dokümantasyonunu](https://github.com/ad0pa/firstsassproject) ziyaret edin.
Teşekkür ederiz!