SCSS zur Gestaltung

[Communicate]

Hallo Zusammen,

nach etwas längerer (ungeplanter) Abwesenheit bin ich wieder dabei und bin begeistert,

was hier innerhalb ovn nur zwei Monaten alles passiert ist

Ich bin im Moment ziemlich angetan davon, was man mit Sass / SCSS so treiben kann.

Daher meine Fragen, ob man SCSS nutzen kann in

a) HTML Widget

b) eigenen Widgets

und wie man das dann einbinden kann.

Vielleicht weiss das ja schon jemand und/oder Bluefox kann mir helfen.

Viele Grüße

Dominic

[pix]

Wow, http://sass-lang.com kannte ich noch garnicht! Das ist ja genau das, was CSS gefehlt hat.

Danke für den Hinweis.

Gruß,

Pix

[Bluefox]

@pix:

Wow, http://sass-lang.com kannte ich noch garnicht! Das ist ja genau das, was CSS gefehlt hat.

Danke für den Hinweis.

Gruß,

Pix `
Man kann SASS ruhig benutzen, man muss aber dann build script erstellen, welche dann SASS in CSS umwandelt:

• Man schreibt src/myStyle.sass

• Man schreibt script mit gulp oder grunt (grunt ist schon eingebaut, man muss nur um ein modul (https://github.com/sindresorhus/grunt-sass) erweitern.

Gruntfile.js - erweitern mit

sass: {
        options: {
            sourceMap: true
        },
        dist: {
            files: {
                'src/myStyle.css': 'widgets/adapterName/css/myStyle.css'
            }
        }
    }

man Benutzt im Widget css/myStyle.css

[Communicate]

Hallo Bluefox,

vielen Dank für die schnelle Unterstützung.

Sitze gerade nicht vorm rechner, aber so ganz verstanden habe ich die Antwort noch nicht.

Ich würde jetzt folgendes machen

1. in opt/iobroker/src/ lege ich eine Datei myStyle.sass an

z.B.````
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

  ` > - Man schreibt script mit gulp oder grunt (grunt ist schon eingebaut, man muss nur um ein modul ([https://github.com/sindresorhus/grunt-sass](https://github.com/sindresorhus/grunt-sass)) erweitern. `  

Wie genau geht das? Reicht das aus:

npm install --save-dev grunt-sass

  ` > Gruntfile.js - erweitern mit `  

dann erweitere ich die Gruntfile.js mit folgendem Code. was muss ich bei adapterName einsetzen?  ` > 'widgets/adapterName/css/myStyle.css' `  

Code: Alles auswählen

sass: {
options: {
sourceMap: true
},
dist: {
files: {
'src/myStyle.css': 'widgets/adapterName/css/myStyle.css'
}
}
}

Dann erstelle ich ein neues HTML Widget:

Allgemeines Blockelement

Test

  ` > man Benutzt im Widget css/myStyle.css `  
Wo genau (in welcher Eigenschaft) stelle ich das ein?

Danke für Deine Hilfe :-)

[Bluefox]

@Communicate:

Hallo Bluefox,

vielen Dank für die schnelle Unterstützung.

Sitze gerade nicht vorm rechner, aber so ganz verstanden habe ich die Antwort noch nicht.

Ich würde jetzt folgendes machen

1. in opt/iobroker/src/ lege ich eine Datei myStyle.sass an

z.B.````
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

  ` > - Man schreibt script mit gulp oder grunt (grunt ist schon eingebaut, man muss nur um ein modul ([https://github.com/sindresorhus/grunt-sass](https://github.com/sindresorhus/grunt-sass)) erweitern. `  

Wie genau geht das? Reicht das aus:

npm install --save-dev grunt-sass

  ` > Gruntfile.js - erweitern mit `  

dann erweitere ich die Gruntfile.js mit folgendem Code. was muss ich bei adapterName einsetzen?  ` > 'widgets/adapterName/css/myStyle.css' `  

Code: Alles auswählen

sass: {
options: {
sourceMap: true
},
dist: {
files: {
'src/myStyle.css': 'widgets/adapterName/css/myStyle.css'
}
}
}

Dann erstelle ich ein neues HTML Widget:

Allgemeines Blockelement

Test

  ` > man Benutzt im Widget css/myStyle.css `  
Wo genau (in welcher Eigenschaft) stelle ich das ein?

Danke für Deine Hilfe :-) `  

An dem, dass deine Fragen voll daneben liegen, kann ich vermuten, dass wir zwei verschieden Sachen darunter verstehen.

Wo willst du SASS verwenden?

[Communicate]

Hallo Bluefox,

ich möchte im Prinzip zwei Sachen machen:

1. in Vis ein HTML Widget erstellen und den Inhalt per Sass formatieren

2. Mein eigenes Widgetset vis-menus entsprechend erweiteren und neue Widgets bauen:

https://github.com/Nic0205/ioBroker.vis-menus

Als erste Vorlage würde ich gerne das hier benutzen:

http://codepen.io/HugoGiraudel/pen/vEJXGm

Verstehst Du was ich meine?

[Communicate]

Hallo Bluefox, gibt es für meine Ideen einen Lösungsweg? Alternativ kann ich ja auch einfach den kompilierten css code nehmen - aber eine Entwicklung in sass die im Hintergrund dann automatisch kompiliert würde hätte schon Charme

von unterwegs gesendet

[Bluefox]

@Communicate:

Hallo Bluefox, gibt es für meine Ideen einen Lösungsweg? Alternativ kann ich ja auch einfach den kompilierten css code nehmen - aber eine Entwicklung in sass die im Hintergrund dann automatisch kompiliert würde hätte schon Charme

von unterwegs gesendet `
Nicht drängen

SASS im vis benutzen geht nicht. Da muss ich dann SCSS compiler einbauen. Bin noch nicht soweit. :?

SASS im widget set benutzen. Ja. Im form wie ich beschrieben habe. Nun das ganze nicht in /iobroker/src/ zu machen sondern in /iobroker/src/node_modules/iobroker.vis-DeinWidgetSet.

1. /iobroker/src/node_modules/iobroker.vis-DeinWidgetSet/src/myStyle.sass

2. npm install –save-dev grunt-sass

3. Gruntfile.js - erweitern

    sass: {
        options: {
            sourceMap: true
        },
        dist: {
            files: {
                'src/myStyle.sass': 'widgets/adapterName/css/myStyle.css'
            }
        }
    }

und

grunt.loadNpmTasks('grunt-sass');

4. Grunt console installieren (global)

npm install grunt-cli -g

5. Alle Pakete installieren

npm install

6. Aufrufen

grunt sass

7. Einchecken /iobroker/src/node_modules/iobroker.vis-DeinWidgetSet/widgets/adapterName/css/myStyle.css