[HTML|JS|CSS] Sass : Mixiny

Mixiny są czymś, co pozwala znacznie zredukować ilość kodu w pliku .scss. Są to bloki kodu, które możemy wstawiać do selektorów za pomocą instrukcji @include. Każdy mixin może zależeć od parametrów, które podawane są w nawiasie. Podczas deklaracji możemy sobie ustalić domyślną wartość paramtru. Wtedy nie musimy za każdym razem podawać tej samej wartości. Zawartość mixina w momencie tłumaczenia instruckji @include zostanie wstawiona w jej miejscu, nie naruszając pozostałych wartości w selektorze. Należy pamiętać, że jeżeli mixin definiuje właściwość zdefiniowaną również w selektorze poza mixinem, to zostanie zastosowana ostatnia wartość.

Przykład:

@mixin red-bordered($wdth : 5px)
{
 border-width : $wdth;
 border-color : red;
}

@mixin margined-slightly
{
 margin: 2px, 2px, 2px, 2px;
}

.bordered-button
{
 @include red-bordered;
 @include margined-slightly;
}

.bordered-div
{
 font-size: 15px;
 @include red-bordered(10px);
}

Po transformacji:

.bordered-button {
  border-width: 5px;
  border-color: red;
  margin: 2px, 2px, 2px, 2px; }

.bordered-div {
  font-size: 15px;
  border-width: 10px;
  border-color: red; }

[HTML|JS|CSS] Sass : Nesting

W CSS 3, jeżeli chcemy nadać pewien styl tylko elementom zagnieżdżonym w innych elementach, musimy podawać dla każdej kontrolki wewnętrznej selektor rodzica oraz jej selektor. Kod taki można uprościć dzięki zastosowaniu zagnieżdżania w Sass. Wystarczy napisać styl dla elementu zewnętrznego, a w nim umieszczać style dla elementów wewnętrznych. Przykładowo, jeśli chcemy, aby wszystkie divy w elementach zawierających klasę .padded-div, miały określony padding, możemy napisać:

.padded-div
{
 font-family: Arial, "MS Trebuchet", sans-serif;
 /*inne wlasciwosci klasy padded-div */
 div
 {
  padding: 20px 0px 40px 0px;
 }
}

Po transformacji:

.padded-div {
  font-family: Arial, "MS Trebuchet", sans-serif;
  /*inne wlasciwosci klasy padded-div */ }
  .padded-div div {
    padding: 20px 0px 40px 0px; }

Warto zauważyć, że Sass po transformacji nadaje wcięcie, co poprawia czytelność arkusza styli.

Zagnieżdżanie możemy się odbywać na kolejnych poziomach, wszystko zależy od potrzeb programisty.

[HTML|JS|CSS] Sass : Zmienne

Bardzo przydatną funkcjonalnością Sass jest możliwość korzystania ze zmiennych w plikach .scss. Dzięki nim, nie musimy  kopiować wartości występujących w wielu miejsach. Wystarczy wprowadzić zmienną, przypisać jej wartość i w każdym miejscu odwoływać się do zmiennej. Przy używaniu jednego koloru w wielu miejscach, znacznie łatwiej będzie w przyszłości zmienić jego wartość. Wartości możemy wyliczać "w locie" poprzez dodawanie, odejmowanie, mnożenie czy dzielenie zmiennych przez stałe, bądź inne zmienne.

Przykładowy kod Sass:

$mybluecolor : #7B68EE;
$colorshift : #010101;

.first-class{
 background-color: $mybluecolor;
}

$mybluecolor : $mybluecolor - $colorshift;

.second-class{
 background-color: $mybluecolor;
}

.third-class{
 background-color: $mybluecolor + #010203;
}

Zostanie przetłumaczony do CSS w następujący sposób:

.first-class {
  background-color: mediumslateblue; }

.second-class {
  background-color: #7a67ed; }

.third-class {
  background-color: #7b69f0; }

[HTML|JS|CSS] Sass : Wprowadzenie

Sass (Syntactically Awesome StyleSheets) jest rozszerzeniem CSS 3 umożliwiającym tworzenie arkuszy styli w sposób przyjemniejszy dla programisty i łatwiejszy do zarządzania.

Pliki Sass mają rozszerzenie .scss (Sassy CSS) i są transformowane do plików .css za pomocą narzędzi uruchamianych z command line. Jako, że Sass rozszerza CSS 3, to w plikach .scss możliwe jest zapisywanie każdej konstrukcji składniowej zwykłego CSS 3.

Strona główna Sass

Instalacja:

Aby uruchomić Sass pod windows musimy zainstalować ruby gems, a także ruby. Pomocne linki:

1. Ruby
2. Ruby Gems

Następnie w Command Line wpisujemy:

gem install sass 

Teraz możemy utworzyć dwa pliki w folderze z projektem : style.css oraz style.scss.

Aby uruchomić tryb śledzenia zmian, należy wpisać w command line :

sass --watch style.scss:style.css

Każde zapisanie pliku style.scss spowoduje transformację jego treści do style.css. Jeżeli nie popełniliśmy błędu składniowego, otrzymamy na konsoli komunikat:

 Change detected to: E:/Projects/$HTML-JS-CSS/Sass/style.scss

Gdy popełniony zostanie z naszej strony jakiś błąd, informację o nim dostaniemy na konsoli, a także w pliku wyjściowym css, przykładowo:

Syntax error: Invalid CSS after "...ound-color: red": expected ";", was ""
        on line 3 of style.scss

WPF

Spis postów na temat Windows Presentation Foundation

Podstawy WPF

• Aplikacje wykorzystujące NavigationWindow
• Attached Property
• Commands
• ControlTemplate
• DataBinding : Mode, UpdateSourceTrigger
• Data Binding : Relative Source
• Data Binding : Value Converter
• Dependency Property
• Freezable
• HierarchicalDataTemplate
• ICollectionView
• Implicit Styles
• Logical Resources
• Logical Tree, Visual Tree
• Resources
• Routed Events
• Triggers
• ValidationRule

Expression Blend

• SampleData

Caliburn.Micro

• Wprowadzenie
• Kolekcje
• EventAggregator
• Akcje
• Window Manager

Inne

• Dispatcher : opóźnione wykonanie metody
• Storyboardy wywoływane rekurencyjnie
• Wycinanie z WriteableBitmap

[WPF] Storyboardy wywoływane rekurencyjnie

Czasami może zdarzyć się taka sytuacja, że mamy nagrany jeden storyboard i chcemy go kilkukrotnie wywołać, zmieniając "w locie" jakiś parametr. Może skorzystać z callbacku, po zakończeniu każdego wywołania.

int storyBoardsCounter = 0;
var sBoard = Resources["LogoPassage"] as Storyboard;
sBoard.Completed += (a, b) =>
            {
                Thread.Sleep(200);
                storyBoardsCounter++;
                if (storyBoardsCounter > 19)
                {
     //akcje po zakonczeniu serii
                }
                else
                {
                    //operacje miedzy storyboardami
                    sBoard.Stop();
                    sBoard.Begin();
                }
            };
sBoard.Begin();

[WPF] Dispatcher : opóźnione wykonanie metody

W przypadku, gdy chcemy, aby dispatcher odczekał określony przez nas czas, a następnie wykonał określoną metodę, możemy skorzystać z klasy ThreadPool.

Poniższa ExtensionMethod rozwiązuje problem opóźnionego wywołania dispatchera.

internal static class Extensions
{
    public static void DelayedInvoke(this Dispatcher dispatcher, int delayMs, Action action)
    {
        ThreadPool.QueueUserWorkItem((o) =>
                                            {
                                                Thread.Sleep(delayMs);
                                                dispatcher.Invoke(action);
                                            });
    }
}