SASS seçici bir seçici özelliklerini özelliklerini kopyalama olmadan devralmak için izin veren bir özelliği @extend (mixins) vardır.

AZ bu özellik de var mı?

, Less.js tanıtılan Evet v1.4.0 30*.

:extend()

Yerine uygulama-kural (@extend) kullanılan sözdizimi tarafından SASS ve Kalem, daha AZ uygulanan pseudo-sınıf sözdizimi verir daha AZ uygulama esnekliği için uygulanan doğrudan bir seçici kendisi, ya da içeride bir deyim. Bu yüzden her ikisi de çalışır:

.sidenav:extend(.nav) {...}

ya

.sidenav {
    &:extend(.nav);
    ...
}

Ayrıca, all Direktif genişletmek için kullanabilirsiniz "iç içe" sınıflar olarak

.sidenav:extend(.nav all){};

Ve genişletmek istiyor sınıfları virgülle ayrılmış bir liste ekleyebilirsiniz:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

İç içe seçiciler uzanan zaman farklılıklar dikkat etmelidir:

iç içe seçiciler .selector1 selector2:

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

Şimdi .selector3:extend(.selector1 .selector2){}; çıkışlar:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

, .selector3:extend(.selector1 all){}; çıkışlar:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

,.selector3:extend(.selector2){}; çıktılar

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

ve son olarak .selector3:extend(.selector2 all){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}