Определение переопределений переменных в SASS / SCSS - PullRequest
Новая
       5

Определение переопределений переменных в SASS / SCSS

2 голосов
/ 09 августа 2011

Я уже использовал sass и у меня есть вопрос, касающийся его функциональности, который, я думаю, может или должен существовать в sass.

Можно ли вообще сделать что-то подобное и как: 

$base-color: #ffffff;
.pink {
  $base-color: #ec008c;
}
.green {
  $base-color: #a4d20e;
}
a, .pink a, .green a {
  color: $base-color;
}

Что означало бы, что я мог бы дать класс .pink элементу <body>, что сделало бы все элементы <a> на этой странице "розовыми".Хотя этот упрощенный пример кажется чем-то, что SASS должен делать.

Это означает, что вышеприведенный scss будет компилироваться примерно так: 

a {
  color: #ffffff;
}
.pink a {
  color: #ec008c;
}
.green a {
  color: #ec008c;
}

Что, как я уже говорил, слишком упрощено, рассмотримследующее: 

$base-color: #ffffff;
.pink {
  $base-color: #ec008c;
}
.green {
  $base-color: #a4d20e;
}
.pink, .green {
  #header #nav li a {
    color: $base-color;
  }
}

Должно дать мне что-то вроде этого: 

.pink #header #nav li a {
    color: #ec008c;
}
.green #header #nav li a {
    color: #a4d20e;
}

Это похоже на то, что должно быть выполнимо в SCSS / SASS и заплатит многодивидендов по более крупным проектам, как по времени кодирования, так и по удобству обслуживания.

1 Ответ

2 голосов
/ 09 августа 2011

Я не знаю, есть ли способ заставить SASS работать с использованием предложенного вами синтаксиса, но вы можете добиться аналогичного эффекта, используя миксины. Вот как бы я это сделал: 

@mixin anchor { color: $base-color; }
@mixin headernav {
  #header #nav { color: $base-color; }
  #header #nav li a { color: $base-color; }
}

$base-color: #ffffff;
a { @include anchor; }
@include headernav;

.pink {
  $base-color: #ec008c;
  a { @include anchor; }
  @include headernav;
}

.green {
  $base-color: #a4d20e;
  a { @include anchor; }
  @include headernav;
}

Это приводит к следующему выводу CSS: 

a {
  color: white; }
#header #nav {
  color: white; }
#header #nav li a {
  color: white; }

.pink a {
  color: #ec008c; }
.pink #header #nav {
  color: #ec008c; }
.pink #header #nav li a {
  color: #ec008c; }

.green a {
  color: #a4d20e; }
.green #header #nav {
  color: #a4d20e; }
.green #header #nav li a {
  color: #a4d20e; }

По сути, вы можете создать всю таблицу стилей в виде миксина, а затем @include, который будет микшироваться внутри ваших .pink и .green классов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...