Fandom Developers Wiki
Advertisement

Less ile dahil edilen karışımlar, tarayıcılar arası desteği kolaylaştırmayı amaçlar ve normalde alacağı alanın çok küçük bir bölümünde birden çok tarayıcıyı desteklemenize olanak tanır. Desteklenen tarayıcılar, Yardım:Desteklenen tarayıcılar sayfasında bulunanlardır.

Aşağıda, örnek kullanımla karışımların nasıl kullanılacağına ve CSS'ye ayrıştırıldığında neye genişlediklerine dair bazı örnekler verilmiştir.

border-radius[]

// Kullanım:
.foo {
    .border-radius( 5px );
}
.bar {
    .border-radius:( 5px 10px );
}

// Çıkış:
.foo {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.bar {
    -webkit-border-radius: 5px 10px;
    -moz-border-radius: 5px 10px;
    border-radius: 5px 10px;
}

box-sizing[]

// Kullanım:
.foo {
    .box-sizing( border-box );
}

// Çıkış:
.foo {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

box-shadow[]

// Kullanım:
.foo {
    .box-shadow( 1px 1px 2px rgba( 0, 0, 0, 0.25 ) );
}

// Çıkış:
.foo {
    -webkit-box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.25 );
    -moz-box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.25 );
    box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.25 );
}

filter[]

// Kullanım:
.foo {
    .filter( grayscale( 100% ) );
}

// Çıkış:
.foo {
    -webkit-filter: grayscale( 100% );
    filter: grayscale( 100% );
}

transition[]

// Kullanım:
.foo {
    .transition( translate(12px, 50%) );
}

// Çıkış:
.foo {
    -webkit-transition: translate(12px, 50%);
    -moz-transition: translate(12px, 50%);
    -o-transition: translate(12px, 50%);
    -ms-transition: translate(12px, 50%);
    transition: translate(12px, 50%);
}

rotate[]

// Kullanım:
.foo {
    .rotate( 20deg );
}

// Çıkış:
.foo {
    -webkit-transform: rotate( 20deg );
    -moz-transform: rotate( 20deg );
    -o-transform: rotate( 20deg );
    -ms-transform: rotate( 20deg );
    transform: rotate( 20deg );
}

user-select[]

// Kullanım:
.foo {
    .user-select( none );
}

// Çıkış:
.foo {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

gradient[]

horizontal[]

// Kullanım:
.foo {
    #gradient > .horizontal ( #fff, #000 );
}

.bar {
    #gradient > .horizontal( #fff, #000, 30%, 80% );
}

// Çıkış:
.foo {
    background: #fff;
    background: -moz-linear-gradient( left, #fff 0%, #000 100% );
    background: -webkit-linear-gradient( left, #fff 0%, #000 100% );
    background: -o-linear-gradient( left, #fff 0%, #000 100% );
    background: -ms-linear-gradient( left, #fff 0%, #000 100% );
    background: linear-gradient( to right, #fff 0%, #000 100% );
}

.bar {
    background: #fff;
    background: -moz-linear-gradient( left, #fff 30%, #000 80% );
    background: -webkit-linear-gradient( left, #fff 30%, #000 80% );
    background: -o-linear-gradient( left, #fff 30%, #000 80% );
    background: -ms-linear-gradient( left, #fff 30%, #000 80% );
    background: linear-gradient( to right, #fff 30%, #000 80% );
}

vertical[]

// Kullanım:
.foo {
    #gradient > .vertical ( #fff, #000 );
}

.bar {
    #gradient > .vertical( #fff, #000, 30%, 80% );
}

// Çıkış:
.foo {
    background: #fff;
    background: -moz-linear-gradient( top, #fff 0%, #000 100% );
    background: -webkit-linear-gradient( top, #fff 0%, #000 100% );
    background: -o-linear-gradient( top,#fff 0%, #000 100% );
    background: -ms-linear-gradient( top,#fff 0%, #000 100% );
    background: linear-gradient( to bottom, #fff 0%, #000 100% );
}

.bar {
    background: #fff;
    background: -moz-linear-gradient( top, #fff 30%, #000 80% );
    background: -webkit-linear-gradient( top, #fff 30%, #000 80% );
    background: -o-linear-gradient( top, #fff 30%, #000 80% );
    background: -ms-linear-gradient( top, #fff 30%, #000 80% );
    background: linear-gradient( to bottom, #fff 30%, #000 80% );
}
Advertisement