Szántó Gábor Drupal oldala

Less css bug & hack

2011, április 27 - 07:13 |

Szántó Gábor

Kategória:

Gyorstippek

Nem 100% drupal téma, de mivel éppen az egyik git account igényem egy zen-less alapú starter theme, ezért talán van helye.

A lényeg, hogyha bárhol háttérképet adsz meg, a háttérkép tulajdonságait ugyanazon a szinten belül nem lehet felülírni.
Van ez a less rule, amit a sprite-okhoz használok:

.sprite(@background-position) {
  background: url(../images/sprite.png) no-repeat @background-position;
  display: block;
}

Létrehozok vele egy képet:

.block-title {
  .sprite(0 -288px);
}

Majd használom a taboknál:

.tab-style {
  .block-title;
  color: #fff;
  margin: 0 5px;
  padding: 3px 15px 2px;
  .border-radius(@grid-margin @grid-margin 0 0);
  cursor: pointer;
------------------------------
  background-color: #0095b2;
------------------------------
  &:hover,
  &:active,
  &.toggle-active {
    background-color: #E1ECF2;
    .border-radius(@grid-margin @grid-margin 0 0);
    color: @h2;
  }
}

A kötőjelek közé írt background szabály egyszerűen nem érvényesül. Dízízdö bug. Ha egy szinten akarsz felülírni korábban lessben definiált background háttérszínét, nem fog menni. Próbáltam mindenhogy, megadtam a .sprite-ban, a .block-title-ben, de nem jött össze..

Aztán észrevettem, hogy alatt a &-el hozzákapcsolt szabályokban viszont működik. Nosza hát, próbáljuk ki, hogy &-el hozzákapcsoljuk a nagy büdös semmit:

tab-style {
  .block-title;
  color: #fff;
  margin: 0 5px;
  padding: 3px 15px 2px;
  .border-radius(@grid-margin @grid-margin 0 0);
  cursor: pointer;
  --------------------------
  & {
  background-color: #0095b2;
  }
  --------------------------
  &:hover,
  &:active,
  &.toggle-active {
    background-color: #E1ECF2;
    .border-radius(@grid-margin @grid-margin 0 0);
    color: @h2;
  }
}

Éééés voilá! Mondom poénból kipróbálom, nem voltam biztos, hogy működni fog, pedig de.

|

Tags: css, Gyorstippek, less, zen

Válasz

Név: *

Email: *

A mező tartalma nem nyilvános.

Honlap:

Hozzászólás: *

Internal paths in double quotes, written as "internal:node/99", for example, are replaced with the appropriate absolute URL or relative path.
Engedélyezett HTML elemek: <a> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <del> <img>
A webcímek és email címek automatikusan linkekké alakulnak.
A sorokat és bekezdéseket a rendszer automatikusan felismeri.
Engedélyezett HTML elemek: <a> <blockquote> <cite> <code> <dd> <del> <div> <dl> <dt> <li> <ol> <ul>
You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <bash>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <mysql>, <php>, <python>, <ruby>, <sql>. The supported tag styles are: <foo>, [foo].
Minden email cím át lesz alakítva ember által olvasható módon, vagy (ha a JavaScript engedélyezett) ki lesz cserélve kattintható, de biztonságos hivatkozásra.

By submitting this form, you accept the Mollom privacy policy.