Stylesheet-Tests (CSS, LESS, SCSS, ...)

Mat

Aktives Mitglied
Hier teste ich ein paar Stylesheet-Beispiele und mögliche Fehlformatierungen, die ich mir vorstellen kann. Ist auch gleichzeitig so eine halbe Spezifikation.

Alles in der Form:
  1. Roher Input
  2. Erwartetes Ergebnis
  3. Ist-Zustand

CSS:

INPUT:
body {    background-color: lightblue;}

h1 {
    color: white;


    text-align: center;
}


p
{
    font-family: verdana;

    font-size: 20px;
}

ERWARTET:
body {
    background-color: lightblue;
}

h1 {
    color: white;


    text-align: center;
}


p {
    font-family: verdana;

    font-size: 20px;
}


IST-ZUSTAND:
body {    background-color: lightblue;}

h1 {
    color: white;


    text-align: center;
}


p
{
    font-family: verdana;

    font-size: 20px;
}
 
Less:

INPUT:
/* Mixin */
.border-radius (@radius: 5px) {    -webkit-border-radius: @radius;    -moz-border-radius: @radius;
    border-radius: @radius;

}

/* Implementation */
#somediv {    .border-radius(20px);



}

ERWARTET:
/* Mixin */
.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

/* Implementation */
#somediv {
    .border-radius(20px);
}


IST-ZUSTAND:
/* Mixin */
.border-radius (@radius: 5px) {    -webkit-border-radius: @radius;    -moz-border-radius: @radius;
    border-radius: @radius;

}

/* Implementation */
#somediv {    .border-radius(20px);



}
 
SCSS:

INPUT:
nav {    ul {
        margin: 0;        padding: 0;
        list-style: none;
    }



    li { display: inline-block; }

    a
    {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }


}

ERWARTET:
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        display: inline-block;
    }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}


IST-ZUSTAND:
nav {    ul {
        margin: 0;        padding: 0;
        list-style: none;
    }



    li { display: inline-block; }

    a
    {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }


}
 
Zurück
Oben Unten