SASS @import, @mixin, @extend, @use Kullanımı

Tarhi : 16-09-2024 12:41:57 | Yazar : ÇAĞLAR BOSTANCI

Bu yazımızda SASS ile kullanılan bazı kuralları öğrenenceğiz. Bu SASS Kuralları çok kullanılmakta ve bilinmesi gereken temel kurallardır.

SASS İç İçe Yazma Kuralı (SASS NESTED)

SASS CSS direktifleri açılan parantez blokların içerisine yazarak devam etmektedir.

ul{
    margin:0;
    padding:0;
    list-style-type: none;
    width: 20%;
    & > li{
        border-bottom: 1px solid #333;
        & > a{
            background-color: olive;
            color:#333;
            padding: .5rem;
            text-decoration: none;
            display: block;
            &:hover{
                background-color: #333;
                color:olive;
            }
        }
        
    }
}

ul{

margin:0;

padding:0;

list-style-type: none;

width: 20%;

& > li{

border-bottom: 1px solid #333;

& > a{

background-color: olive;

color:#333;

padding: .5rem;

text-decoration: none;

display: block;

&:hover{

background-color: #333;

color:olive;

}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 20%;
}
ul > li {
  border-bottom: 1px solid #333;
}
ul > li > a {
  background-color: olive;
  color: #333;
  padding: 0.5rem;
  text-decoration: none;
  display: block;
}
ul > li > a:hover {
  background-color: #333;
  color: olive;
}

ul {

margin: 0;

padding: 0;

list-style-type: none;

width: 20%;

}

ul > li {

border-bottom: 1px solid #333;

}

ul > li > a {

background-color: olive;

color: #333;

padding: 0.5rem;

text-decoration: none;

display: block;

}

ul > li > a:hover {

background-color: #333;

color: olive;

}

Bu örnektende anlaşılacağı gibi açlan CSS direktifinin parantez bloğunun içersine yeni bir seçici eklenerek yeni bir blok oluşturuluyor. Burada kullanılan & ampersand işarti ise içinde bulunulan CSS direktifinin kendisini ifade ediyor. Yine :hover,::after,::before gibi seçiciler ise ampersant işartinin davamına eklenerek geliyor.

SASS @import ve @use Kullanımı

Bir SASS projesi oluşturulurken parçalı yönetim tercih edilmektedir. SASS Fonksiyonları başla bir function.scss dosyasına yazılırken değişken ve mixin değerleri farklı bir mixin.scss dosyasında oluşturulmaktadır.

İşte bu dosyaları tekbir dosyada birleştirmek için @import kuralı kulanılmaktadır.

@import 'reset.scss';
@import 'variables.scss';
@import 'mixin.scss';
@import 'function.scss';

@import 'reset.scss';

@import 'variables.scss';

@import 'mixin.scss';

@import 'function.scss';

SASS içerisindeki bazı sınıfları yüklemek içinde @use kuralı kullanılmaktadır.

@use 'sass:list';
@use 'sass:map';

1 2	@use 'sass:list'; @use 'sass:map';

SASS @mixin Kullanımı

Yazmış olduğunuz css direktiflerini defalarca tek satırda kullanmanızı sağlar. Bu sayede aynı CSS direktiflerini tekrar tekrar yazmak zorunda kalmıyorsunuz. Aynı zamanda parametrede alarak css direktiflerini ilgili parametereye bağlı olarak geliştirmenizi sağlıyor.

@include ise SASS sitil şablonlarında @mixin ile yazmış olduğunuz css direktiflerini dahil ediyor. Bu sayade tekrarda kurtulmuş oluyorsunuz.

@mixin ortala{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

ul{
    @include ortala;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

@mixin ortala{

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

align-content: center;

}

ul{

@include ortala;

margin: 0;

padding: 0;

list-style-type: none;

}

ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

align-content: center;

margin: 0;

padding: 0;

list-style-type: none;

}

Yine isteseniz parametre gönderip bir fonksiyon gibi kullanabilirsinizde.

@mixin ortala($direction){
    display: flex;
    flex-direction: $direction;
    justify-content: center;
    align-items: center;
    align-content: center;
}

ul{
    @include ortala(column);
    margin: 0;
    padding: 0;
    list-style-type: none;
}

@mixin ortala($direction){

display: flex;

flex-direction: $direction;

justify-content: center;

align-items: center;

align-content: center;

}

ul{

@include ortala(column);

margin: 0;

padding: 0;

list-style-type: none;

}

ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

align-content: center;

margin: 0;

padding: 0;

list-style-type: none;

}

Burada flex direction değerini parametre olarak gönderdik. Bu sayede hem satrıda hemde sütunda kullanabilme imkanı sağlamış olduk. Yine istersek varsayılan değerler atayabiliriz.

@mixin ortala($direction:row,$jcontent:center,$acontent:center){
    display: flex;
    flex-direction: $direction;
    justify-content: $jcontent;
    align-items: center;
    align-content: $acontent;
}

ul{
    @include ortala(row,flex-end,center);
    margin: 0;
    padding: 0;
    list-style-type: none;
}

@mixin ortala($direction:row,$jcontent:center,$acontent:center){

display: flex;

flex-direction: $direction;

justify-content: $jcontent;

align-items: center;

align-content: $acontent;

}

ul{

@include ortala(row,flex-end,center);

margin: 0;

padding: 0;

list-style-type: none;

}

ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul {

display: flex;

flex-direction: row;

justify-content: flex-end;

align-items: center;

align-content: center;

margin: 0;

padding: 0;

list-style-type: none;

}

Yukardaki satırda ise daha esnek bir hale getirerek üç parametre atadık. Bunlar justify-content,direction ve align-content değerlerine varsayılan değer atamsı yaptık. İstersekte bu parametrelere ilgili değerleri atayarak yeniden düzelenmesini sağlayabiliriz.

İstersek @mixin ile sınırsız sayıda parametre göndererek daha dinamik SASS şablonları oluşturabiliriz.

@use 'sass:list';//list sınıfını ekledik.
@mixin grid($gap,$rowHeigth,$column...){
    display:  grid;
    gap:$gap;
    grid-template-columns: list.join($column,(),$separator: space);//gelen list değeri boşluk ile birleştirdik
    grid-template-rows: $rowHeigth

}

ul{
    @include grid(10px,400px,auto, auto,auto);
    margin: 0;
    padding: 0;
    list-style-type: none;
}

@use 'sass:list';//list sınıfını ekledik.

@mixin grid($gap,$rowHeigth,$column...){

display: grid;

gap:$gap;

grid-template-columns: list.join($column,(),$separator: space);//gelen list değeri boşluk ile birleştirdik

grid-template-rows: $rowHeigth

}

ul{

@include grid(10px,400px,auto, auto,auto);

margin: 0;

padding: 0;

list-style-type: none;

}

ul {
  display: grid;
  gap: 10px;
  grid-template-columns: auto auto auto;
  grid-template-rows: 400px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul {

display: grid;

gap: 10px;

grid-template-columns: auto auto auto;

grid-template-rows: 400px;

margin: 0;

padding: 0;

list-style-type: none;

}

YUkardı @mixin ile dinamik bir grid yapısı oluşturduk. İlk parametre gap değerini veriyor. İkinci parametreise satırların yüksekliğini. Son parametere ise kaçar sütün olması gerektiğini gelirtiyor. Parametrelerden üçcüsü column list bir değer dönderiyor. Biz ise içeride onu boşluklar ile birleştirerek columns değerine yazıyoruz.

SASS @extend Kullanımı

SASS şablonları oluşturuken tanımlamış olduğunuz bir class bloğunu başka bir css bloğunun içerisine direk dahil etmenizi sağlıyor. Bu sayede temel css şablonları oluşturup onları çeşitlendirmeye geldiğinide kullanıyoruz.

.btn{
    $renk:silver;
    $color:white;
    padding: .5rem;
    text-decoration: none;
    border:1px solid $renk;
    border-radius: .2rem;
    color:white;
    font-weight: $color;
    display: inline-block;
}
.btn-success{
    @extend .btn;
    background-color: darkgreen;
}
.btn-warning{
    @extend .btn;
    background-color: orange;
}

.btn{

$renk:silver;

$color:white;

padding: .5rem;

text-decoration: none;

border:1px solid $renk;

border-radius: .2rem;

color:white;

font-weight: $color;

display: inline-block;

}

.btn-success{

@extend .btn;

background-color: darkgreen;

}

.btn-warning{

@extend .btn;

background-color: orange;

}

.btn, .btn-warning, .btn-success {
  padding: 0.5rem;
  text-decoration: none;
  border: 1px solid silver;
  border-radius: 0.2rem;
  color: white;
  font-weight: white;
  display: inline-block;
}

.btn-success {
  background-color: darkgreen;
}

.btn-warning {
  background-color: orange;
}

.btn, .btn-warning, .btn-success {

padding: 0.5rem;

text-decoration: none;

border: 1px solid silver;

border-radius: 0.2rem;

color: white;

font-weight: white;

display: inline-block;

}

.btn-success {

background-color: darkgreen;

}

.btn-warning {

background-color: orange;

}

Yukarıdaki örnekte bir tana ana .btn sınıfı oluşturuldu ve diğer sınıflar içerisine dahil edildi.

Evet arkadaşlar bu yazımızıda SASS @include,SASS @mixin,SASS @use ve SASS @extend kullanımını öğrenmiş olduk.

İlginiz için teşekkürler. Reklamlar üzerinden bağış yapmayı unutmayalım 🙂

İlgili

SASS

SASS @import, @mixin, @extend, @use Kullanımı

Hemen Başla

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

SASS @import, @mixin, @extend, @use Kullanımı