Есть «крючки» в SASS?

Question

Я рассматривал UiKit, фреймворк, построенный с помощью LESS, и заметил довольно интересную особенность: крючки. Посмотрите на следующие команды в рамках:

.uk-panel-badge { 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 1; 
    .hook-panel-badge; 
} 

.hook-panel-badge() {} 

Если вы хотите переопределить в теме, скажем, вы строите за пределами основных файлов (файлы, которые приходят позже в компиляции), то вы могли бы сделать следующее :

.hook-panel-badge() { 
    right:auto; 
} 

так, в сущности, это выглядит, как вы можете переопределить/настроить селекторы без добавления дополнительных селекторов, поэтому он сохраняет разметку как можно меньше.

Есть ли что-нибудь подобное в SASS? Это выглядит как удивительная функция, которую я бы хотел использовать в качестве пользователя SASS в первую очередь, но я не нашел @extend, чтобы быть тем же. Благодаря!

Update

Функция placeholder, кажется, ближе всего я нашел:

.panel { 
    background:red; 
    @extend %hook-panel; 
} 

%hook-panel { 
    color:blue; 
} 

Что делает, как:

.panel { 
    background: red; } 

.panel { 
    color: blue; } 

и может быть определен после (который является удивительным), но это все еще дублирует селектор. В любом случае, нужно только указать значение заполнителя в исходном селекторе, в которое оно включено?

Answer 1

SASS имеет аналогичный объект под названием mixins:

// Define the mixin 
@mixin large-text 
    font-family: Arial 
    color: #ff0000 

// Use it 
.page-title 
    @include large-text 
    padding: 10px 


// Compiled CSS 
.page-title { 
    font-family: Arial; 
    color: #ff0000; 
    padding: 10px; 
} 

Красота микс-ин в том, что они могут принимать аргументы, так что вам не нужно переопределить часто меняемые селекторы:

// Define 
@mixin sexy-border($color, $width) 
    border-color: $color 
    border-width: $width 
    border-style: dashed 


// Paragraphs in general will have a sexy blue 10px dashed border 
p 
    @include sexy-border(blue, 10px) 


// Paragraphs of class "plain" will have a plain old black 1px solid border 
p.plain 
    @include sexy-border(black, 1px) 
    border-style: solid 


// Compiled CSS 
p { 
    border-color: blue; 
    border-width: 10px; 
    border-style: dashed; 
} 
p.plain { 
    border-color: black; 
    border-width: 1px; 
    border-style: solid; 
} 

SASS mixin documentation.

Answer 2

Насколько я могу судить, точное соответствие поведения LESS к эквиваленту SASS отсутствует.

У вас есть следующие варианты:

1. @extend

   .uk-panel-badge { 
       position: absolute; 
       top: 0; 
       right: 0; 
       z-index: 1; 
       @extend .hook-panel-badge; 
   } 
   
   .hook-panel-badge{ 
       right:auto; 
   } 
   

   , в результате чего:

   .uk-panel-badge { 
        position: absolute; 
        top: 0; 
        right: 0; 
        z-index: 1; 
   } 
   
   .hook-panel-badge, .uk-panel-badge { 
        right: auto; 
   } 
   

   Это производит немного больше CSS, чем МЕНЬШЕ эквивалент делает, потому что оригинал (unhooked) сохраняется.

2. @mixin

   //theme.scss: 
   
   @mixin hook-panel-badge(){ 
   } 
   
   @import "hooks"; 
   
   .uk-panel-badge { 
       position: absolute; 
       top: 0; 
       right: 0; 
       z-index: 1; 
       @include hook-panel-badge; 
   } 
   
   _hooks.scss: 
   
   //theme creator can override hooks in here. 
   
   @mixin hook-panel-badge(){ 
       right:auto; 
   } 
   

   Это создает тот же код, как ваш ШАОН, но недостатком является то, что вам нужно определить пустую подмешать для каждого hookable класса, который немного усилий. (Вы могли бы, конечно, поместить все это в файл _hooks.scss, но это сделает код переопределения более трудным для чтения.

EDIT: Я предполагаю, что есть еще один вариант, как показано ниже, что позволяет экономить немного набрав на стороне extendee, но отходит от стандартного синтаксиса CSS для удлинителя немного слишком много для моего симпатия. Конечно, вы можете использовать неполный файл, как в 2.

@mixin hook($class){ 
    //generic override. 
    @if($class == "uk-panel-badge"){ 
     right:auto; 
    } 

    @else if($class== "selector2"){ 
     //override other classes in this way. 
    } 

} 

.uk-panel-badge { 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 1; 
    @include hook("uk-panel-badge"); 
} 

В целом я все еще чувствую, что 1 - лучший подход.