Sass Kod Deposu
Sass ne Scss ne alaka?
İkisi de hızlı bir şekilde CSS kod yazabilmeniz için ortaya çıkmıştır.Ben düz CSS'e çok fazla alıştığım için geçiş yaparken SCSS bana daha kolay geldi ve burda da kolaylıklarını sizlere örneklerle aktarmaya çalışacağım.
Dipnot: Fatih Hayrioğlu - Sass vs Scss Hakkında?
SCSS nedir?
SCSS, basitçe Sassy CSS anlamına gelir. Sassy CSS, Vanilya (normal) CSS'de bulunmayan özellikleri kullanmanızı sağlayan bir CSS ön işlemcisidir.
Bu makalede, bu özelliklerin bazılarını sizlere örneklerle listeleyeceğim ve açıklayacağım.
Değerler (Variables)
SCSS'de değişkenleri kolayca tanımlayabilirsiniz. Bir değişken oluşturmak için değişken ismine bir $ işareti ekleyin ve bunları normal bir CSS özelliği gibi ayarlayın.
// Font-weight for a project
$font-light : 400
$font-thick: 500
$font-heavy: 600
.element{
Font-weight: $font-light;
}
//color palette for a project to maintain consistency
$product-dark-blue: #324e85
$product-light-blue: #4c7396
$product-lighter-blue: #9bb7cf
.element{
color: $product-dark-blue;
}
İç İçe Koyma (Nesting)
SCSS, CSS kurallarını yerleştirmenizi sağlar.
// vanilla CSS
.container {
Width: 100%;
Color: grey;
Background-color: green;
}
.container div {
Border: 1px solid black;
}
.container div a {
text-decoration: none;
color: #f2f2f2;
}
.container div a::hover {
color: #b2b2b2;
}
// SCSS
.container {
width: 100%;
color: grey;
background-color: green;
div {
border: 1px solid black;
a {
text-decoration: none;
color: #f2f2f2;
&::hover {
color: #b2b2b2;
}
}
}
}
@extend
ve @mixin
Kullanımı
@extend
Başka bir sınıfın özelliklerini miras almanıza yardımcı olur.
// SCSS
.header {
color: grey;
}
.sub-header {
@extend .header;
font-size: 40px;
}
CSS'te çıktısını bu şekilde alırısınız.
// Compiled CSS
.header, .sub-header {
color: grey;
}
.sub-header {
font-size: 40px;
}
@mixin
Mixin, SCSS'nin bir diğer değer verme yoludur. Önce mixin'i @mixin kullanarak yaratırsınız, sonra @include kullanarak bu özelliğe ihtiyaç duyan herhangi bir sınıfa eklersiniz.
// SCSS
//create mixin
@mixin red-color{
color: red;
}
.header{
@include red-color; /* add mixin */
}
.sub-header{
@include red-color;
font-size: 40px;
}
.header {
color: red;
}
.sub-header {
color: red;
font-size: 40px;
}
Bir başka örnek ile mixin'in asıl kullanım noktasına bakalım:
// SCSS
@mixin fontSize ($params: 10px){
font-size: $params;
}
.header{
@include fontSize(20px);
}
.sub-header{
@include fontSize(20px);
}
// Compiled CSS
.header {
font-size: 20px;
}
.sub-header {
font-size: 20px;
}
Import
SCSS, diğer SCSS stil sayfasını @import kullanarak bir SCSS dosyasına aktarmanıza izin verir.
@import "button.scss" or @import "button"
Matematik İşlemleri
Toplama (+), Çıkarma (-), Bölme (/), Çarpma (*). Ayrıca ==
, !=
, <
, >
, >=
, <=
ve mantık operatörleri olan and
, or
, not
desteklenir.
// SCSS
@mixin top-margin ($margin){
margin-top: 30px + $margin;
}
.container{
width: 800px - 80px;
@include top-margin(10px);
}
//Compiled CSS
.container {
width: 720px;
margin-top: 40px;
}
Renk Fonksiyonu
SCSS, renkleri değiştirmek için kullanılabilecek bazı fonksiyonlar sunar. Bunlardan bazıları:
- mix($colorX, $colorY, weight) :
mix(blue, grey, 30%) /*results 30% blue and 70% grey*/
- lighten($color, $amount):
lighten(#ff0000, 30 ) /* results #ff9999 */
- darken($color, $amount):
darken(#ff0000, 30 ) /*results #660000*/
Döngüler
Döngüler içerisinde istediğiniz sayıda class üretebilirsiniz.
For Döngüsü
@for $i from 1 through 4 {
.item-#{$i} { left: 20px * $i; }
}
Each Döngüsü
$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
@each $id, $image in $backgrounds {
.photo-#{$id} {
background: url($image);
}
}
İç İçe Each Döngüsü
$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
@each $id, $image in $backgrounds {
.photo-#{$id} {
background: url($image);
}
}
While Döngüsü
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
Diğer Fonksiyonlar
If Else
@if $position == 'left' {
position: absolute;
left: 0;
}
@else {
position: static;
}
Şimdilik Bu Kadar. Sizde SCSS'de hoşunuza giden kullanımları yorumlarda belirtin, Tartışalım 🙂
Kat: CSS Tricks, Labs Tarih: 30 Ağustos 2019 Okunma:387
Paylaş:
Henüz yorum eklenmemiş.