Unterstützt Weblication auch SASS?

25. Feb 2016

Weblication enthält einen eigenen CSS Präprozessor, der SCSS Syntax unterstützt und eine große Schnittmenge mit SASS aufweist.

Weblication enthält einen eigenen CSS Präprozessor, der SCSS Syntax unterstützt und eine große Schnittmenge mit SASS aufweist.

Der integrierte Präprozessor kann über ein Attribut im XSLT-Template aktiviert werden. Ist einmal aktiviert, brauchen Sie sich um nichts zu kümmern. Als Administrator angemeldet, kompiliert er die erweiterte CSS-Syntax automatisch in reines CSS.

Folgende erweiterten CSS-Funktionen unterstützt Weblication bereits:

  • Variablen
  • Verschachtelung
  • Vererbung
  • Funktionen (Mixins)
  • Includes

Beispiel eins Kopfbereichs über SCSS-Only umgesetzt

#blockTop {
  @extend .clearAfter;

  position:relative;margin:0 auto 1px auto;
  background-color:$backgroundColorTop;
  -w-add-classes:$keepBlockTopInsideTopOnScroll;

  .object-singlepage & {
  }

  > header {

    max-width:$widthMaxSectionInner;
    position:relative;
    margin:0 auto;
    -w-add-classes:$displayFontResizerClass;

    #logo                            {
      float:left;display:block;max-width:100%;margin:12px 0 12px 0;
      > img {display:inline-block}
    }

    &.restored-init #logo            {margin:2px 0 12px 0}
    &.restored-ready #logo           {margin:12px 0 12px 0}

    .wglContainerInsideTopOnScroll & #logo             {margin:20px;transition:all 0.4s linear}
    .wglContainerInsideTopOnScroll &.moved-init #logo  {margin:12px 0 12px 0}
    .wglContainerInsideTopOnScroll &.moved-ready #logo {margin:2px 0 12px 0}

    #fontResizer {
      float:right;height:30px;position:relative;background-color:$backgroundColorFunctions;margin:0 0 0 0;padding:0 6px 0 6px;

      .fontResizerShrink      {cursor:pointer;line-height:20px;font-weight:bold;font-size:10px;float:left;padding:6px 4px 0 4px}
      .fontResizerEnlarge     {cursor:pointer;line-height:20px;font-weight:bold;font-size:16px;float:left;padding:6px 4px 0 4px}
    }

    #languageSelector {
      display:$displayLanguageselector;float:right;height:30px;position:relative;background-color:$backgroundColorFunctions;margin:0 0 0 0;padding:0 6px 0 6px;

      a {
        &.lang {
          text-decoration:none;line-height:20px;float:left;padding:6px 4px 0 4px;
          img {vertical-align:-1px;}
          span        {display:none;padding:0 3px;line-height:20px;text-transform:uppercase;}
        }
        &.langCurrent {
          text-decoration:none;line-height:20px;float:left;padding:6px 4px 0 4px;
          img  {vertical-align:-1px;}
          span {display:none;padding:0 3px;line-height:20px;text-transform:uppercase;}
        }
      }
    }

    #searchBox {
      display:$displaySearch;height:30px;position:relative;float:right;background-color:$backgroundColorFunctions;

      dl                        {padding:5px 5px 0 5px}
      dt                        {margin:0;display:none}
      dd {
        position:relative;overflow:visible;cursor:pointer;margin:0;
        &:before                 {content:'';pointer-events:none;position:absolute;top:3px;left:3px;width:7px;height:7px;border:solid 2px $fontColorFunctions;border-radius:50%;}
        &:after                  {content:'';pointer-events:none;position:absolute;top:0;left:1px;width:7px;height:2px;background-color:$fontColorFunctions;transform:rotate(54deg);margin-top:14px;margin-left:9px;}
        &.focused                {}
        &.focused:before         {display:none}
        &.focused:after          {display:none}
      }
      .searchTerm               {opacity:0;cursor:pointer;width:20px !important;height:20px;line-height:100%;transition:width 0.2s ease-in-out;-w-jquery:jQuery(this).focus(function()\7BjQuery(this).parent().addClass('focused')\7D).on('blur', function()\7BjQuery(this).parent().removeClass('focused')\3BjQuery(this).val('')\3BjQuery('#searchSuggestOuter').remove()\7D)}
      dd.focused .searchTerm    {opacity:1;outline:none;cursor:text;border-radius:0;width:120px !important;color:inherit}
      #searchSubmit             {display:none}
    }

    #navigationMeta {
      display:$displayNavigationMeta;float:right;margin:0;padding:0 4px 0 4px;height:30px;background-color:$backgroundColorFunctions;
    }

    #navigationMain {
      position:static;clear:both;overflow:hidden;width:100%;margin:0;width:100%;
    }

    @media only screen and (min-width: $viewport_m_min){
      height:auto;

      #logo {
        position:static;height:auto;margin:24px 0 0 0;
        img {margin:0;width:140px;height:auto}
      }

      #searchBox {
        position:static;
        .searchTerm {float:left;width:80px;}
      }

      #navigationMeta {
        position:static;clear:both;float:none;margin-top:2%;height:auto;overflow:hidden;
      }

      #navigationMain {
        margin-top:40px;position:static;overflow:hidden;float:right;font-family:$fontFamilyNavigationMain;background-color:$backgroundColorNavigationMain;-w-add-classes:wglNavigationOptimizeTouch;
      }
    }
  }
}