-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnotes.html
207 lines (184 loc) · 8.44 KB
/
notes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SCSS Konuları</title>
<style>
pre {
background-color: #f5f5f5;
padding: 10px;
}
</style>
</head>
<p>
<header>
<h1 class="heading">SCSS</h1>
</header>
<h2>CSS Preprosessorler</h2>
<p>CSS preprosessorler, CSS'in geliştirilmiş ve genişletilmiş versiyonlarını oluşturmak için kullanılan araçlardır. Bu araçlar, CSS yazımını daha etkili, modüler ve yönetilebilir hale getirmek için çeşitli özellikler sunarlar. CSS preprosessorler, daha sonra CSS'e derlenerek tarayıcılar tarafından anlaşılabilen düz CSS koduna dönüştürülür.</p>
CSS preprosessorlerin sağladığı temel özellikler şunlardır:
<ul>
<li><strong>Değişkenler:</strong> Değerleri depolayarak tekrar kullanılabilirlik sağlar. Değişkenler, stil kodunda kullanılan renkler, fontlar, uzunluklar gibi değerleri tek bir yerden yönetmeyi ve kolayca değiştirmeyi sağlar.</li>
<li><strong>Nesting:</strong> CSS kurallarını iç içe geçmiş bir yapıda yazmayı sağlar. Bu sayede, karmaşık veya derinlemesine seçicilere gerek kalmadan daha düzenli ve okunabilir bir stil kodu oluşturulabilir.</li>
<li><strong>Mixinler:</strong> Tekrar kullanılabilir stil bloklarını tanımlayarak stil özelliklerini kolayca eklemeyi sağlar. Mixinler, stil kodunda kullanılan karmaşık veya tekrar eden stil tanımlarını birleştirmek için kullanılır.</li>
<li><strong>Partials ve @import:</strong> Büyük stil dosyalarını daha küçük parçalara bölebilir ve yönetilebilir hale getirebilir. Partials, stil kodunun farklı dosyalara bölünerek daha iyi bir organizasyon sağlamasını sağlar. @import ise bu parçaları ana stil dosyasına dahil etmek için kullanılır.</li>
<li><strong>Operatörler:</strong> Matematiksel işlemleri ve renk manipülasyonunu destekler. Bu sayede, stil kodunda hesaplamalar yapmak veya renkleri manipüle etmek daha kolay hale gelir.</li>
<li><strong>Koşullu ifadeler:</strong> If-else yapısı ile stil kodunu kontrol etmenizi sağlar. Belirli koşullara göre farklı stil tanımları yapabilir veya farklı değerleri kullanabilirsiniz.
</li>
</ul>
<p>CSS preprosessorler, stil kodunun daha iyi bir organizasyon ve daha kolay bir şekilde yazılmasını sağlayarak geliştirme sürecini daha verimli hale getirir. Popüler CSS preprosessorler arasında SCSS (Sassy CSS), Less ve Stylus bulunmaktadır. Bu araçlar, web geliştiricilere CSS yazımını geliştirmek ve daha etkili bir şekilde çalışmak için güçlü araçlar sunarlar.</p>
<h2>SCSS Nedir?</h2>
<p>SCSS, Sassy CSS'nin kısaltmasıdır ve CSS'e daha fazla özellik ve esneklik ekleyen bir CSS preprosessordür.</p>
<p>SCSS kullanmanın bazı avantajları şunlardır:</p>
<ul>
<li>Değişkenler: Değerleri depolayarak tekrar kullanılabilirlik sağlar.</li>
<li>Nesting: İç içe geçmiş yapılar oluşturarak kodu daha okunabilir hale getirir.</li>
<li>Mixins: Tekrar kullanılabilir kod bloklarını tanımlayarak stil özelliklerini kolayca ekleyebilirsiniz.</li>
<li>Partials ve @import: Büyük stil dosyalarını daha küçük parçalara bölebilir ve yönetilebilir hale getirebilirsiniz.</li>
<li>Operatörler: Matematiksel işlemleri ve renk manipülasyonunu destekler.</li>
<li>Koşullu ifadeler: If-else yapısı ile stil kodunu kontrol etmenizi sağlar.</li>
</ul>
<p>SCSS dosyaları, CSS dosyalarına dönüştürülmeden önce SCSS yorumlanır. Bu, daha gelişmiş ve etkili bir şekilde stil kodu yazmanıza olanak tanır.</p>
<h2>SASS/SCSS Terminal Komutları</h2>
<p>SASS, komut satırı üzerinden çalışabilen bir CSS preprosessor'dür. İşte bazı SASS terminal komutları:</p>
<ul>
<li><strong>sass --watch input.scss:output.css</strong>: `input.scss` dosyasını izleyerek her değişiklikte otomatik olarak `output.css` dosyasını oluşturur.</li>
<li><strong>sass input.scss output.css</strong>: `input.scss` dosyasını derleyerek `output.css` dosyasını oluşturur.</li>
<li><strong>sass --watch input-dir:output-dir</strong>: `input-dir` klasörünü izleyerek her değişiklikte otomatik olarak `output-dir` klasöründe CSS dosyalarını oluşturur.</li>
<li><strong>sass --style compressed input.scss output.css</strong>: `input.scss` dosyasını derleyerek sıkıştırılmış (`compressed`) bir `output.css` dosyası oluşturur.</li>
</ul>
<p>Bu komutlar, SASS dosyalarınızı derlemek, izlemek ve çıktı almak için kullanılabilir. Komutları terminalde çalıştırarak SASS işlemlerini gerçekleştirebilirsiniz.</p>
<pre><code>
sass --watch input.scss:output.css
sass input.scss output.css
sass --watch input-dir:output-dir
sass --style compressed input.scss output.css
</code></pre>
<div class="content">
<h2>Değişkenler</h2>
<p>Değişkenler, stil değerlerini depolamak ve tekrar kullanmak için kullanılır.</p>
<pre><code>
$primary-color: #007bff;
$secondary-color: #6c757d;
.box {
color: $primary-color;
background-color: $secondary-color;
}
</code></pre>
<h2>Nesting (Yerleştirme)</h2>
<p>Nesting, iç içe geçmiş stil kuralları oluşturmak için kullanılır.</p>
<pre><code>
.box {
width: 200px;
height: 200px;
p {
color: #333;
}
a {
text-decoration: none;
&:hover {
color: blue;
}
}
}
</code></pre>
<h2>BEM Notasyonu ve SCSS Nesting Örneği</h2>
<p>BEM notasyonu ile SCSS kullanarak class isimlerini birleştirebilir ve daha düzenli bir CSS kodu elde edebilirsiniz. Bu, kodunuzun daha okunabilir ve bakımı daha kolay hale gelmesine yardımcı olur.</p>
<pre><code>
<span class="block">
<span class="block__element">
<span class="block__element--modifier"></span>
</span>
</span>
.block {
background-color: #f5f5f5;
padding: 10px;
&__element {
// Element özellikleri
&--modifier {
// Modifier özellikleri
}
}
}
</code></pre>
<h2>Mixin</h2>
<p>
Mixin, tekrar eden stil kodlarını yeniden kullanmak için kullanılır.
</p>
<pre><code>
@mixin box-shadow($x, $y, $blur, $color) {
box-shadow: $x $y $blur $color;
}
.box {
@include box-shadow(0px, 0px, 5px, rgba(0, 0, 0, 0.3));
}
</code></pre>
<h2>Include</h2>
<p>Include, mixin'leri stil koduna dahil etmek için kullanılır.</p>
<pre><code>
@mixin box-shadow($x, $y, $blur, $color) {
box-shadow: $x $y $blur $color;
}
.box {
@include box-shadow(0px, 0px, 5px, rgba(0, 0, 0, 0.3));
}
</code></pre>
<h2>Operatörler</h2>
<p>
Operatörler, matematiksel hesaplamaları ve değer manipülasyonunu yapmak
için kullanılır.
</p>
<pre><code>
$box-width: 200px;
$box-height: 150px;
$padding: 20px;
.box {
width: $box-width;
height: $box-height;
padding: $padding;
margin: ($box-width + $padding) / 2;
}
</code></pre>
<div class="content">
<h2>If-Else</h2>
<p>If-Else, koşullu ifadeleri kullanarak stil kodunu kontrol etmek için kullanılır.</p>
<pre><code>
$box-width: 200px;
$box-height: 150px;
.box {
@if $box-width > $box-height {
width: $box-width;
} @else {
height: $box-height;
}
}
</code></pre>
<h2>For Döngüsü</h2>
<p>
For döngüsü, tekrarlayıcı bir yapı kullanarak stil kodlarını dinamik
olarak oluşturmak için kullanılır.
</p>
<pre><code>
@for $i from 1 through 5 {
.list-item-#{$i} {
color: darken($primary-color, $i * 10%);
}
}
</code></pre>
<h2>Partials ve @import</h2>
<p>`Partials`, SCSS dosyalarını daha küçük parçalara bölmek için kullanılan bir yöntemdir. `@import` ise bu parçalara referans yapmamızı sağlar.</p>
<pre><code>
// _variables.scss
// _mixins.scss
// styles.scss
_variables.scss, _mixins.scss ve styles.scss gibi dosya isimleri, partial dosyalarını temsil etmektedir.
SCSS partial dosyaları _ ile başlar ve genellikle tek bir özelliği veya bir mixin'i içerir.
Bu partial dosyaları daha sonra ana stil dosyası olan styles.scss dosyasında @import ile referans alınır.
Örneğin, styles.scss dosyasında _variables.scss ve _mixins.scss dosyalarını import etmek istediğimizde şu şekilde yapabiliriz:
@import 'variables';
@import 'mixins';
</code></pre>
</div>
</body>
</html>