Programowanie arkuszy stylów CSS - preprocesor Sass (w składni SASS i SCSS)

Frontend - HTML, CSS, JS
preprocesory less saass css kolejka wesole miasteczko

Preprocesory CSS pozwalają na pisanie arkuszy stylów w sprytniejszy (krótszy, bardziej przejrzysty) sposób a następnie ich skompilowanie do tradycyjnych, natywnych arkuszy CSS obsługiwanych przez wszystkie najnowsze przeglądarki. Pozwalają na użycie mechanizmów niedostępnych w specyfikacji CSS3 a przydatnych w codziennym użytkowaniu.

W Visual Studio 2015 i 2017 do kompilacji kodu Sass podczas buildu można użyć wtyczki Web Essentials.

Na rynku istnieje wiele preprocesorów. Oprócz Sass istnieje również na przykład LESS, który jest już jednak wypierany z rynku.

W przypadku Sass korzystać można z dwóch rodzajów składni: starsza SASS i młodsza SCSS.

  • SASS
    • używa wcięć zamiast nawiasów klamrowych
    • reguły oddziela znak nowej linii
  • SCSS
    • używa nawiasów klamrowych
    • reguły oddzielane średnikiem
    • składnia jest walidowana jako CSS

W każdym przypadku pliki SASS mają rozszerzenie “.scss”.

 

Jakie najważniejsze działania można zrobić dzięki SASS?

  • zmienne
    • na przykład:
      $fancy-color: #000000;
      
      div {
          background-color: $fancy-color;
      }
  • wielostopniowe zagnieżdżane instrukcje
    • na przykład:
      /*klasyczne CSS*/
      
      article p {
          font-size: 12px;
          .article span {
          font-size: 10px;
      }
      
      .article span : hover {
          text-decoration: underline;
      } 
      
      /*może być zapisane jako SASS:*/
      
      .article {
          p {
              font-size: 12px; 
          }
      
          span { 
              font-size: 10px; 
              &:hover {
                    color: blue; 
                  }
            }
      }
  • wstawki (mixin) parametryzowane
    • wstawki są podobne do helperów z ASP.NET MVC. Definiuje się je jak funkcje, które można implementować w wielu miejscach w kodzie
      • na przykład (z jednym parametrem):
        @mixin fancy-function($color)
        {
            background-color: $color;
            width: 100%;
        }
        
        color-box {
                @include fancy-function(“#000”);
        }
      • z dwoma parametrami i wartościami domyślnymi:
      • @mixin fancy-transistion($element: all, $time: .1s, $option: linear) { /* Poprzez przypisanie wartości do zmiennych ustawimy wartości domyślne, które będą używane gdy wywołamy mixin bez parametrów */ -webkit-transition: $element $time $option; transition: $element $time $option; /* transition: all .2s linear */}wywołanie parametrów domyślnych.color-box {@includefancy- transition;wywołanie parametrów zdefiniowanych.foo {@include transition(all, .5s, ease-in-out)}
  • dziedziczenie bezpośrednie
    • dzięki słowu kluczowemu @extend można przenieść style bezpośrednio z jednego elementu do drugiego
    • na przykład:
      .info {
          background-color: lightblue; 
          padding: 10px;
      }
      
      .success { 
          @extend .info;
          border-color: green;
      }
      
      .danger { 
          @extend .info;
          border-color: red;
      }
  • import
    • standardowe importowanie arkuszy styli generuje dodatkowe zapytania HTTP
    • dzięki słowu kluczowemu @import można zaimportować inny arkusz SASS, który zostanie połączony w momencie kompilacji
    • na przykład:
      @import 'admin’; 
      gdzie admin oznacza plik admin.scss

Źródła: https://www.merixstudio.pl/blog/co-daje-sass-dlaczego-warto-uzywac-sass/ http://grafmag.pl/artykuly/wstep-do-sass-prepreocesora-jezyka-css/

Tomasz Osiński Tomasz Osiński
Programowanie arkuszy stylów CSS - preprocesor Sass (w składni SASS i SCSS)
2017-09-13 20:22:30
Komentarze
Aby dodac komentarz musisz być zalogowany

Zobacz podobne artykuły

Nazywam się Tomasz Osiński. Jestem programistą web developerem od 2008 roku. Obecnie pracuję w Banku Millennium jak .NET web developer, poza tym rozwijam startupy, blogguję. Pokazuję, że za pomocą ASP.NET, HTML, CSS i JS można budować wydajne aplikacje i strony internetowe. Ukazuję potrzeby wdrażania nowoczesnego podejścia do zarządzania w IT (Lean, Kanban, SCRUM, Agile)

Blog, który czytasz tworzę w w/w technologiach i udostępniam na GitHubie