ASPNET MVC Projeleriniz için Material Checkbox

Projelerimiz de her ne kadar Bootstrap kullanıyor ve kendimi tatmin edecek seviye de hoş tasarımlar yaparak istediğim görsellere ulaşsam da checkbox’ların çok sıradan bir görsellikte olması gözüme bir düzensizlik olduğunu hissettiriyor ve bununla ilgili başka yazılarımda da, farklı çözümler sunmaya çalıştım.

Projelerinizde daha şık material tasarımlı checkbox kullanmak isterseniz aşağıdaki kodlardan faydalanabilirsiniz. Aşağıdaki görselde göreceğiniz şekilde bir görsellik oluşacaktır. Ayrıca biraz daha kod yazarak, klavye desteği ve farklı kontrol’e bağımlı kılarak diğer kontrolün aktifleştirilmesi/pasifleştirilmesi(disabled) sağlanabiliyor.

material-checkbox-in-mvc

kmb-udemy-reklam

“ASPNET MVC Projeleriniz için Material Checkbox” yazısını okumaya devam et

Animated radios & checkboxes (noJS) using HTML CSS Bootstrap

ASP.NET MVC projenizde kullanmak üzere animasyonlu ve görsel bir checkbox ve radio CSS ararken, çok hoş bir kod parçası ile karşılaştım. Yazan arkadaş güzel bir şekilde bootstrap checkbox  ve radio larını adam etmiş. Üstelik JS kodu kullanmadan sadece CSS ile.. 😉 Bir incelemenizi tavsiye ederim.

Tabii ki ASP.NET HTML Helper metotlarının ürettiği checkbox ve radio da hidden bir field varlığı(oluşan html çıktılara bakabilirsiniz) bu tarz css kodlarının(hatta js kodlarının da) direkt kullanımını zorlaştırıyor. Kısacası çalışmıyor 🙂 Bende üzerinde ufak bir kaç değişiklik ile bunu ASPNET MVC HTML Helper çıktılarına uygun hale getirdim. Aşağıdaki görselde sarı şeritli kısımları CSS içindeki kodlara eklerseniz ve HTML çıktısını da onun istediği şekilde olmasını sağlarsanız, çok zevkli çalıştığını görebilirsiniz. Görsel’den sonra örnek olarak tüm kodları bulabilirsiniz.

https://bootsnipp.com/snippets/featured/animated-radios-amp-checkboxes-nojs
Aspnet mvc animated bootstrap checkbox ve radio, noJS

 

kmb-udemy-reklam

 

// Animasyonlu ve js siz şık checkboxes

@* En basit hali ile kullanımı *@
@model SampleObj
<div class="form-group">
@Html.LabelFor(model => model.IsActive, htmlAttributes: new { @class="control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
<label>
@Html.CheckboxFor(model => model.IsActive)
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</div>
</div>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!–—- Include the above in your HEAD tag ——––>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<h1>CheckboxRadio (no JS)</h1>
<hr/>
<p>This snippet allows you create nice animated checkboxes and radios without JavaScript. <br/>Just put <code><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span></code> right after your checkbox or radio.</p>
<p>Other markup was copied from <a href="http://getbootstrap.com/css/#forms" target="_blank">Bootstrap example</a>.</p>
<h2>Checkboxes</h2>
<hr/>
<h3>Default example</h3>
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option two is checked by default
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Default example (other icon)</h3>
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option two is checked by default
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Font awesome example</h3>
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Option two is checked by default
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Font awesome example (other icon)<br/><small>Works best with square icons =)</small></h3>
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon fa fa-rocket"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-rocket"></i></span>
Option two is checked by default
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon fa fa-rocket"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Any size you want depending on label font-size</h3>
<div class="col-sm-12">
<div class="checkbox">
<label style="font-size: 2.5em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Huge
</label>
</div>
<div class="checkbox">
<label style="font-size: 2em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Big
</label>
</div>
<div class="checkbox">
<label style="font-size: 1.5em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Bigger
</label>
</div>
<div class="checkbox">
<label style="font-size: 1em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Default
</label>
</div>
<div class="checkbox">
<label style="font-size: .8em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Smaller
</label>
</div>
<div class="checkbox">
<label style="font-size: .5em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Small
</label>
</div>
</div>
<h2>Radio</h2>
<hr/>
<h3>Default example</h3>
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="o1" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o1" value="" checked>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
Option two is checked by default
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="o1" value="" disabled>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Default example (other icon)</h3>
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="o2" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o2" value="" checked>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option two is checked by default
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="o2" value="" disabled>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Font awesome example</h3>
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="o3" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3" value="" checked>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option two is checked by default
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="o3" value="" disabled>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Font awesome example (other icon)<br/><small>Works best with square icons =)</small></h3>
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="o4" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-star"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o4" value="" checked>
<span class="cr"><i class="cr-icon fa fa-star"></i></span>
Option two is checked by default
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="o4" value="" disabled>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-star"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Any size you want depending on label font-size</h3>
<div class="col-sm-12">
<div class="radio">
<label style="font-size: 2.5em">
<input type="radio" name="o5" value="" checked>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Huge
</label>
</div>
<div class="radio">
<label style="font-size: 2em">
<input type="radio" name="o5" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Big
</label>
</div>
<div class="radio">
<label style="font-size: 1.5em">
<input type="radio" name="o5" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Bigger
</label>
</div>
<div class="radio">
<label style="font-size: 1em">
<input type="radio" name="o5" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Default
</label>
</div>
<div class="radio">
<label style="font-size: .8em">
<input type="radio" name="o5" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Smaller
</label>
</div>
<div class="radio">
<label style="font-size: .5em">
<input type="radio" name="o5" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Small
</label>
</div>
</div>
</div>

view raw
02. Index.cshtml
hosted with ❤ by GitHub

.checkbox label, .radio label {
padding-left: 0;
}
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 15%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"] + input[type="hidden"] + .cr > .cr-icon,
.radio label input[type="radio"] + input[type="hidden"] + .cr > .cr-icon {
transform: scale(3) rotateZ(-20deg);
opacity: 0;
transition: all .3s ease-in;
}
.checkbox label input[type="checkbox"]:checked + input[type="hidden"] + .cr > .cr-icon,
.radio label input[type="radio"]:checked + input[type="hidden"] + .cr > .cr-icon {
transform: scale(1) rotateZ(0deg);
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled + input[type="hidden"] + .cr,
.radio label input[type="radio"]:disabled + input[type="hidden"] + .cr {
opacity: .5;
}

view raw
03. style.css
hosted with ❤ by GitHub

SASS–Online SASS Derleyiciler

SASS-Syntactically Awesome StyleSheets

Bu videomda sizlerle Online SASS araçlarından bahsedeceğim. Beraberce Googling yaparak arayacağız ve bulduklarımızı inceleyeceğiz. Aslında videoda da görebileceğiniz gibi 2 adet site bulacağız. İlk göze çarpan siteler, tabii ki bu sitelerin yaptığı işi yapan bir örnek proje de yapabilirsiniz. Sonuçta SASS kodlarını derleyebileceğiniz SassScript desteği mevcut.

Aslında kurduğumuz visual studio extension’larınında yaptıkları aynı şekilde kodları çalıştırmak. Basit bir windows app ya da asp.net web app sizlerde yapabilirsiniz.

Bulduğumuz online araçlar ve sonrasında bulduğum diğerleri ile beraber aşağıdadır. Ayrıca bazı eğitim sitelerine de rastladık. Gerçekten faydalı olduğunu düşünüyorum. Hızlıca öğrenme ve alışkanlık kazanma açısından kullanabilirsiniz. Videomuzda da bu araçları nasıl kullandığımızı inceliyor olacağız.

SASS Öğreten Siteler;

Online SASS Derleyici Siteler;

 

kmb-udemy-reklam

SASS – VS 2013 Update 2 CTP 2 ile Gelen SASS Yenilikleri

SASS-Syntactically Awesome StyleSheets

Geçtiğimiz günlerde sizlerle paylaştığım Visual Studio 2013 Update 2 CTP 2 güncellemesi ile gelen birçok yenilikten SASS ile ilgili olanları inceleme fırsatı buldum. Gerek bu güncellemenin kurulumu gerekse yazıda sizlere bahsettiğim Web Essentials 2013 ‘ün bu yeni VS 2013 Update 2 CTP 2; community preview (topluluk öngörünüm) sürümü güncellemesi ile olan uyumsuzluğunun nasıl giderileceği, Web Essentials 2013 Nightly extension sürümünün Visual Studio 2013 ‘e yüklenmesi hakkında sizlere yeni bir video hazırladım.

Tabii ki Visual Studio 2013 Update 2 CTP 2 güncellemesinin Release (son hali) olmadığını belirtmekte fayda var. Bu güncelleme sonrasında kullandığınız bazı extension ve diğer araçlarda belirsiz hatalar görebilirsiniz. O sebeple sizin için kritik öneme sahip makinalarda kurmamanızı öneririm.

Sonrasında bu çalışıyordu ne oldu şimdi buna demeyin. Gülümseme Fakat önemli olmayan veya zaten kullandığım bir extension ya da tool yok dediğiniz makinalarda (pure installation) yenilikleri yaşayabilmeniz açısından yükleyebilirsiniz.

kmb-udemy-reklam

Visual Studio 2013 Yeni Web Özellikleri Duyurusu ve SASS Yenilikleri – Update 2 CTP2

Tam ben SASS serisi videolarını bitirmişken, dün yapılan bir duyuruda SASS Project item ve editörü desteği de Visual Studio 2013 Güncellemesi ile geldi. Daha henüz deneme şansım olmadı fakat hemen haberi paylaşmak istedim.

Tabii ki bu güncelleme sadece SASS project item ve editörü için değil;

  • SASS Style Sheets – Project Item & Editor
  • JSON File – Project Item & Editor
  • Yeni web projesi oluştururken, uzak Azure kaynakları oluşturma seçeneği.
  • MVC/SPA Şablon değişiklikleri
  • LESS editör iyileştirmeleri
  • Knockout Intellisense güncellemesi
  • HTML, Razor, CSS, LESS, SASS sayfalarında yeni URL seçicisi.
  • Browser link için yeni özellikler
  • ASP.NET MVC 5.1.1
  • ASP.NET Web API 2.1.1
  • ASP.NET Web Pages 3.1.1

gibi yeniliklerle gelen bir güncelleme paketi. Bu arada belirtilmiş ki;

Web Essential 2013 is not compatible with the Update 2 CTP2. If you install Update 2 CTP2, after opening Visual Studio, you’ll get an error message “EditorExtensionsPackage” couldn’t be loaded.   We hope to have a new version of Web Essentials out soon to support this release.

Yani; Web Essential 2013 şu an için Visual Studio 2013 Update 2 ile uyumlu değil. Hatta güncellemeyi kurduktan sonra “EditorExtensionsPackage” yüklenemedi şeklinde bir hata ile karşılaşacağınızdan bahsediyor. Fakat umuyorlarmış ki web essential 2013 ‘ün yeni versiyonunda bu sorun giderilecekmiş.

Yani yakın zamanda web essential 2013 ‘ünde yeni güncellemesi çıkacaktır.

Peki, SASS yeniliğine tekrar dönecek olursak, SASS dosya ve editör desteği ile beraber neler gelmiş;

  • Renklendirme
  • Değişken ve Mixins IntelliSense
  • Comment/uncomment(açıklama satırı yapma ve kaldırma)
  • Quick info(hızlı bilgi)
  • Formatting (sonunda 🙂 – metin formatı düzenleme CTRL + K + D ile yaptığımız şey)
  • Syntax validation (sözdizim hata kontrolü)
  • Outlining
  • Goto definition (Kaynağa gitme)
  • Color picker (Renk paleti)
  • Ayarlar ve dahası olarak belirtilmiş.

Bende inceledikten sonra hem seriyi toparlayıcı hem de güzel bir örnek ile bu yeni güncelleme ile gelenleri sizlere bir video’da paylaşabilirim.

Kaynak ve daha fazla bilgi için bakınız;

Announcing new Web Features in Visual Studio 2013 Update 2 CTP2 – .NET Web Development and Tools Blog – Site Home – MSDN Blogs.

 

kmb-udemy-reklam

SASS – Bunlar da varmış dediklerim ve VS2013 Extension Detayları

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere Visual Studio 2013 üzerinde incelediğim SASS desteği veren extension’ların yapabildikleri ve yapamadıklarından bahsedeceğim. Ayrıca Online Sass Compiler olan SASS Meister üzerinde derleme işlemini göstereceğim. Herhangi bir program kurmadan sass(scss) dosyalarını işleyebilirsiniz.

Bunların dışında ayrıca sass özelliklerinden PlaceHolder Selectors, @import url kullanımı, @media kullanımı kavramlarına örnekler ile değinmeye çalıştım.

Sass desteği veren visual studio 2012 – 2013 extension’ larına aşağıdaki adreslerden ulaşabilirsiniz.

  1. SassyStudio
  2. Mindscape Web Workbench
  3. Web Essentials 2012
  4. Web Essentials 2013

 

kmb-udemy-reklam

SASS – Koala App Kurulumu ve Kullanımı

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS kullanımında Visual Studio kullanmadan nasıl scss dosyalarını derleme yapabileceğinizden bahsedeceğim.

Bu videomuza kadar yaptığımız tüm örneklerde visual studio IDE kullanarak SASS(scss) dosyalarımızı oluşturduk. Dosyamız üzerinde kaydetme işlemi yaptığımız anda gerekli derleme gerçekleşerek bize CSS dosyamızı oluşturuyordu. Peki elimizde Visual Studio yoksa hangi araçları kullanarak sass dosyalarımızı derleyebiliriz. Bunun için sass’ın sitesinde bir dizi program bulunmaktadır. Uygulama listesine install sayfadan erişebilirsiniz. Open Source(ücretsiz) ve Paid(ücretli) olarak uygulamalar listelenmektedir. Ben ücretsiz olan Koala app ‘i kullanıyorum. Fakat Scout ‘da ona benzer, onu da kullanabilirsiniz. Tüm open source(ücretiz) yazanları kullanabilirsiniz. Paid(ücretli) olanlarda da ücreti karşılığı gayet güzel özellikler gelmektedir.

koala app

Koala app ve scout uygulamalarının ikisini de kullanabilirsiniz. İkisinin de amacı derleme yapmak. Yani bir metin editörü içermiyorlar. Bilgisayarınızda bir klasör’ü program üzerine sürükleyip bıraktığınızda o klasörü proje olarak kabul ediyor ve içerisindeki dosyaları okuyor. Okuduğu dosyaları türlerine göre listeliyor. Klasör içindeki dosyalarınız da yapacağınız kodlamayı “Not Defteri” , “Notepad++” vs gibi metin editörleri ile yapıyorsunuz. Koala bu dosyaları sadece derleyerek size css çıktılarını üretiyor. Bu videoda sizlere kurulumdan kullanımına kadar nasıl yapıldığını izleyebilirsiniz.

kmb-udemy-reklam

SASS – Function & Control Directives

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde function directives ve control directives tanımlama ve kullanma gibi konulara değiniyor olacağım.

@function ile mixin kavramından farklı olarak değer döndüren fonksiyonlar tanımlıyor olacağız.

@if, @for, @each, @while gibi control directive ‘leri kullanarak koşullu stil ifadeleri, döngüler kullanarak bir seri stil’i oluşturma gibi konularda örnekleri aşağıdaki videodan izleyebilirsiniz.

 

kmb-udemy-reklam

SASS–Mixin & Extend

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde Mixin(fonksiyon olarak düşünebilirsiniz) tanımlama ve kullanma, Extend(genişletme) gibi konulara değiniyor olacağım.

Mixin kavramında; bir fonksiyon gibi yazdığımız bir blok stil’i “@include” ifadesi ile çağırarak istediğimiz yere uygulanmasını sağlayabiliyoruz. Hatta oluşturduğumuz mixin için parametre tanımlayarak, parametrik olmasını da sağlayabiliyoruz.

Extend kavramında ise; stil özelliklerini inherit(miras) alabilmeyi sağlıyoruz. “@Extend” anahtar ifadesi ile extend edilen stiller bir araya gelerek css dosyada tanımlanıyorlar. Basitçe örnek vermek gerekirse; aşağıdaki gibi bir css dosya oluşturmak istiyorsak;

CSS:

.button, .button1, .button2 {
    /* button, button1, button2 için ortak stiller */
  color: #ddd;
  font-size: 12pt; }

.button1 {
    /* button1 için özelleştirilmiş stiller */
  border: 1px solid green; }

.button2 {
    /* button2 için özelleştirilmiş stiller */
  border: 1px solid black; }

Aşağıdaki gibi SASS dosyamızı kodlamamız ve .button1 ve .button2 isimli stilleri .button stilinden extend etmeli ve farklı özelliklerini yine içine tanımlamalıyız.

SCSS:

.button{
    color: #ddd;
    font-size: 12pt;
}

.button1
{
    @extend .button;
    border: 1px solid green;
}

.button2
{
    @extend .button;
    border: 1px solid black;
}

Böylece CSS kodundaki ilk stil’i (“.button, .button1, .button2”) elde etmiş oluruz. Özet olarak; @extend anahtarı kullanılan stiller @extend anahtarı ile kullanılan stil’le birleştirilerek css dosyada tanımlanırlar.

 

kmb-udemy-reklam

SASS – Partial & Imports

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde Partial Files oluşturma ve bunları kullanma(import) gibi konulara değiniyor olacağım. Önceki videomuzda oluşturduğumuz kodlarımızın bir kısmını alarak partial bir SASS dosyasına taşıyacağız. Ardından bu dosyayı projemize ait olan, derlenerek css kodu oluşturan SASS dosyamıza import edeceğiz.

kmb-udemy-reklam