Toon posts:

CSS keyframes in LESS m.b.v. Dotless

Pagina: 1
Acties:

donderdag 31 juli 2014 09:31

Acties:
  • PressPlayOnTape
  • Registratie: Augustus 2012
  • Nu online

PressPlayOnTape

Topicstarter
Beetje wazige titel, maar ik weet niet hoe ik het anders moet omschrijven.

Ik probeer een geanimeerde loading spinner in CSS te creëren m.b.v. LESS, waarbij ik graag wil dat de kleur van de spinner afhankelijk is van de klasse die op het element dat de spinner toont, gezet wordt. Ik maak gebruik van Visual Studio 2012 en de dotless NuGet package.

Ik heb de volgende LESS code:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

@white: #FFF;

.Spin(@color)
{
    0%, 100%
    {
        box-shadow: 0em -3em 0em 0.2em @color, 2em -2em 0 0em @color, 3em 0em 0 -0.5em @color, 2em 2em 0 -0.5em @color, 0em 3em 0 -0.5em @color, -2em 2em 0 -0.5em @color, -3em 0em 0 -0.5em @color, -2em -2em 0 0em @color;
    }

    12.5%
    {
        box-shadow: 0em -3em 0em 0em @color, 2em -2em 0 0.2em @color, 3em 0em 0 0em @color, 2em 2em 0 -0.5em @color, 0em 3em 0 -0.5em @color, -2em 2em 0 -0.5em @color, -3em 0em 0 -0.5em @color, -2em -2em 0 -0.5em @color;
    }

    25%
    {
        box-shadow: 0em -3em 0em -0.5em @color, 2em -2em 0 0em @color, 3em 0em 0 0.2em @color, 2em 2em 0 0em @color, 0em 3em 0 -0.5em @color, -2em 2em 0 -0.5em @color, -3em 0em 0 -0.5em @color, -2em -2em 0 -0.5em @color;
    }

    37.5%
    {
        box-shadow: 0em -3em 0em -0.5em @color, 2em -2em 0 -0.5em @color, 3em 0em 0 0em @color, 2em 2em 0 0.2em @color, 0em 3em 0 0em @color, -2em 2em 0 -0.5em @color, -3em 0em 0 -0.5em @color, -2em -2em 0 -0.5em @color;
    }

    50%
    {
        box-shadow: 0em -3em 0em -0.5em @color, 2em -2em 0 -0.5em @color, 3em 0em 0 -0.5em @color, 2em 2em 0 0em @color, 0em 3em 0 0.2em @color, -2em 2em 0 0em @color, -3em 0em 0 -0.5em @color, -2em -2em 0 -0.5em @color;
    }

    62.5%
    {
        box-shadow: 0em -3em 0em -0.5em @color, 2em -2em 0 -0.5em @color, 3em 0em 0 -0.5em @color, 2em 2em 0 -0.5em @color, 0em 3em 0 0em @color, -2em 2em 0 0.2em @color, -3em 0em 0 0em @color, -2em -2em 0 -0.5em @color;
    }

    75%
    {
        box-shadow: 0em -3em 0em -0.5em @color, 2em -2em 0 -0.5em @color, 3em 0em 0 -0.5em @color, 2em 2em 0 -0.5em @color, 0em 3em 0 -0.5em @color, -2em 2em 0 0em @color, -3em 0em 0 0.2em @color, -2em -2em 0 0em @color;
    }

    87.5%
    {
        box-shadow: 0em -3em 0em 0em @color, 2em -2em 0 -0.5em @color, 3em 0em 0 -0.5em @color, 2em 2em 0 -0.5em @color, 0em 3em 0 -0.5em @color, -2em 2em 0 0em @color, -3em 0em 0 0em @color, -2em -2em 0 0.2em @color;
    }
}

.Keyframes(@name, @color)
{
    @-webkit-keyframes @name { .Spin(@color); }
    @-moz-keyframes @name { .Spin(@color); }
    @-ms-keyframes @name { .Spin(@color); }
    @-o-keyframes @name { .Spin(@color); }
    @keyframes @name { .Spin(@color); }
}

.Animate(@name, @color)
{
    .Keyframes(@name, @color);
    animation: 1.3s linear 0s normal none infinite @name;
    -moz-animation: 1.3s linear 0s normal none infinite @name;
    -o-animation: 1.3s linear 0s normal none infinite @name;
    -webkit-animation: 1.3s linear 0s normal none infinite @name;
}

.loading
{
    display: inline-block;
    padding-left: 2.5em;
    position: relative;
    -webkit-backface-visibility: hidden;
    cursor: default !important;

    &:before
    {
        border-radius: 50%;
        content: "";
        font-size: 0.2em;
        height: 1em;
        left: 0;
        margin: 5em auto 5em 5em;
        position: absolute;
        top: 0;
        width: 1em;
    }

    &.white:before
    {
        .Animate(spinwhite, @white);
    }
}


Deze code compileert in de volgende CSS code. Voor de leesbaarheid heb ik alle vendorafhankelijke keyframe notaties achtwerwege gelaten.

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

.loading {
  display: inline-block;
  padding-left: 2.5em;
  position: relative;
  -webkit-backface-visibility: hidden;
  cursor: default !important;
}
.loading:before {
  border-radius: 50%;
  content: "";
  font-size: 0.2em;
  height: 1em;
  left: 0;
  margin: 5em auto 5em 5em;
  position: absolute;
  top: 0;
  width: 1em;
}
.loading.white:before {
  animation: 1.3s linear 0s normal none infinite spinwhite;
  -moz-animation: 1.3s linear 0s normal none infinite spinwhite;
  -o-animation: 1.3s linear 0s normal none infinite spinwhite;
  -webkit-animation: 1.3s linear 0s normal none infinite spinwhite;
}
@keyframes @name {
  0%,
  100% {
    box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  25% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  37.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  50% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  62.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  75% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
  }
}


Hierin valt op dat de naam van de keyframes @name is en niet spinwhite wat ik had verwacht en gewild. Nu heb ik op o.a. StackOverflow gevonden dat deze aanpak in LESS 1.7.x en hoger wel ondersteund zou moeten worden. Echter blijkt dit bij gebruik van dotless 1.4.1 (welke volgens NuGet de laatste versie is) niet te werken.

Heeft iemand enig idee waarom dit niet werkt en hoe ik het wel werkend kan krijgen? Alvast bedank!

donderdag 31 juli 2014 09:59

Acties:
  • MoietyMe
  • Registratie: Juli 2003
  • Laatst online: 06-12-2025

MoietyMe

zij/haar

Je beantwoord je eigen vraag al: @keyframe mixin's zijn pas mogelijk vanaf LESS versie 1.7 :) Ik zou als ik jou was dotless uit je project verwijderen en lekker overstappen naar Web Essentials van Mads Kristensen

donderdag 31 juli 2014 10:10

Acties:
  • PressPlayOnTape
  • Registratie: Augustus 2012
  • Nu online

PressPlayOnTape

Topicstarter
Good Fella schreef op donderdag 31 juli 2014 @ 09:59:
Je beantwoord je eigen vraag al: @keyframe mixin's zijn pas mogelijk vanaf LESS versie 1.7 :) Ik zou als ik jou was dotless uit je project verwijderen en lekker overstappen naar Web Essentials van Mads Kristensen
Bedankt voor je reactie. Ik heb dotless verwijderd en had al Web Essentials geïnstalleerd. Zal deze eens updaten en kijken of ik het dan werkend krijg, want in principe zou de code zoals ik die nu heb toch moeten werken? Of maak ik ergens nog een denkfout?

Edit: Blijkt dat ik de laatste versie al geïnstalleerd heb. Vooralsnog krijg ik het niet werkend, maar dat lijkt erop doordat Web Essentials voor VS2012 gebruik lijkt te maken van LESS compiler 1.6.3 (zie changelog).

Nu lijkt het dus een kwestie van afwachten tot een nieuwere compiler gebruikt wordt. Of heeft iemand anders een betere suggestie?

Edit 2: Heb een oplossing gevonden, maar het voelt een beetje als een "hack". Wellicht dat dit volstaat totdat de LESS-compiler die Web Essentials gebruikt officieel is geüpdatet naar versie 1.7.x. Ik heb de laatste versie van de LESS compiler gedownload en de LESS compiler zoals die door Web Essentials gebruikt wordt overschreven.

Deze compiler staat in de map C:\Users[USER]\AppData\Local\Microsoft\VisualStudio\11.0\Extensions\qcysnzwl.oiy\Resources\Scripts en heeft de naam less-1.6.3.min.js. Ik moest de nieuwe versie van de compiler dezelfde naam geven om het te laten werken. Na een restart van Visual Studio en het opnieuw opslaan van mijn LESS-bestand wordt nu wel het gewenste CSS-bestand gegenereerd.

[ Voor 52% gewijzigd door PressPlayOnTape op 31-07-2014 12:08 ]

vrijdag 8 augustus 2014 14:59

Acties:
  • MoietyMe
  • Registratie: Juli 2003
  • Laatst online: 06-12-2025

MoietyMe

zij/haar

Nice goin'! Ook bedankt voor het pad, ik denk dat andere gebruikers daar ook wel wat aan hebben :)

Ik weet niet of WE2012 nog wel wordt geupdatet eerlijkgezegd; de laatste update was al weer 25 februari.
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2026 • Hosting door TrueFullstaq