Geek Answers Handbook

Design templates for writing multiple themes in Stylus / Sass?

I am writing a stylesheet for a website where I need to support multiple skins / themes. For example, one theme may be black and white with red as the primary color, and another theme may be white on black with maroon as the primary color.

Almost all CSS from one theme moves to another theme, with the exception of things like foreground and background color.

As an illustrative example, let's say we have a div. The size and position of this div is fixed between themes, but the color may change. We could split this into three different CSS files:

/* main.css */
#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

/* theme1.css */
#box {
    backround-color: red;
}

/* theme2.css */
#box {
    background-color: maroon
}

main.css . body , CSS. ,

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

body.theme1 #box {
    backround-color: red;
}

body.theme2 #box {
    background-color: maroon
}

, HTTP . , . , ( ), CSS .

, : CSS, SASS Stylus, CSS?

- :

@theme(theme1) {
    $primaryColor: red;
}
@theme(theme2) {
    $primaryColor: maroon;
}

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;

    background-color: $primaryColor;
}

, , CSS, .

? - ?

+4
2

. Stylus: main.styl, theme1.styl theme2.styl. , :

// theme1.styl
primaryColor = red
@require("main.styl")

// theme2.styl
primaryColor = maroon
@require("main.styl")

// main.styl
#box {
    top: 50px
    left: 50px
    width: 200px
    height: 200px
    background-color: primaryColor
}

1.css theme2.css, . ( main.css.)

+5

Sass, . Stylus, , .

-, . -, " ".css , , , , , , .

, , .css /, . , , Sass, , , , , @import 'themes/theme-red' - Sass .

, Sass serveride, . , phpSass, , , , . LESS , serveride clientside, .

+1

More articles:


All Articles