- stylus インストール
stylus：CSS作成ツール stylus homepage
stylus インストール
sudo npm --proxy http://xxx:xxx/ install -g stylus
sudo npm --proxy http://xxx:xxx/ install -g stylint（the stylus linter： 必須ではない）
拡張子： .styl
ref)
コマンドラインでインタラクティブにテストする場合
>stylus -i
コメントは CSSと同様 /* */ 又は //
// コメントは出来るCSSファイル等には転記されない
- stylusの基本使用
// calColors1.styl
defInfoClass = { // データ
emergC: red pink,
alertC: black pink,
critC: blue pink,
warningC: red yellow,
noticeC: black yellow,
infoC: blue yellow
}
infoColorF(frontC,backC) // 関数定義
color: frontC
background-color: backC
font-weight: bold
font-size: 18px
for key, val in defInfoClass
.{key} // クラス定義
infoColorF val[0], val[1] // 関数を使ってクラスを作成する
----------------------------------------------------
stylus ./calColors1.styl -o test1.css // -o 出力ファイル名指定，初期値は stylファイル名.css
vuetifyなどでは stylus 使用宣言する事で style内で使用出来る，記述は上記と同じ，内部でcssを作成読込
<style lang="stylus" scoped>
defInfoClass = { // データ
emergC: red pink,
alertC: black pink,
critC: blue pink,
warningC: red yellow,
noticeC: black yellow,
infoC: blue yellow
}
infoColorF(frontC,backC) // 関数定義
color: frontC
background-color: backC
font-weight: bold
font-size: 18px
for key, val in defInfoClass
.{key} // クラス定義
infoColorF val[0], val[1] // 関数を使ってクラスを作成する
</style>
// output
.emergC {
color: #f00;
background-color: #ffc0cb;
font-weight: bold;
font-size: 18px;
}
.alertC {
color: #000;
background-color: #ffc0cb;
font-weight: bold;
font-size: 18px;
}
- stylus プログラムとデータを別ファイルにする
// data.styl
defInfoClass = { // データ
emergC: red pink,
alertC: black pink,
critC: blue pink,
warningC: red yellow,
noticeC: black yellow,
infoC: blue yellow
}
// calColors2.styl
infoColorF(frontC,backC) // 関数定義
color: frontC
background-color: backC
font-weight: bold
font-size: 18px
for key, val in defInfoClass
.{key} // クラス定義
infoColorF val[0], val[1]
// --import でデータファイルを指定する
stylus ./calColors2.styl --import ./data.styl
- stylus 関数定義の拡張
// calColors3.styl
infoColorF(frontC,backC) // 関数定義
color: frontC
background-color: backC
{block}
+infoColorF() // 関数定義の拡張 {block} を置き換える
font-weight: bold
font-size: 18px
for key, val in defInfoClass
.{key} // クラス定義
infoColorF val[0], val[1]
// output は上記と同じ
- CSS変数の設定
// data2.styl
groupColors = {
calColor01: #000 #ffa500, // orange
calColor02: #000 #87CEEB, // skyblue
calColor03: #fff #1867C0,
calColor04: #000 #66BB6A,
calColor05: #000 #B0BEC5
}
// calColors4.styl
groupColorF(ff,bb,frontC,backC)
{ff}: frontC
color: var(ff)
{bb}: backC
background-color: var(bb)
// color: var(ff, frontC) // :root で ff を定義する場合
// background-color: var(bb, backC)
font-weight: normal
font-size: 14px
for key, val in groupColors
.{key}
ff = --front- + key
bb = --back- + key
groupColorF ff, bb, val[0], val[1]
// output
.calColor01 {
--front-calColor01: #000;
color: var(--front-calColor01);
--back--calColor01: #ffa500;
background-color: var(--back-calColor01);
font-weight: normal;
font-size: 14px;
}
.calColor02 {
--front-calColor01: #000;
color: var(--front-calColor02);
--back--calColor01: #87CEEB;
background-color: var(--back-calColor02);
font-weight: normal;
font-size: 14px;
}
- CSS変数 :root(グローバル変数)を作る
// data5.styl
colorNames = {
Color01: orange,
Color02: skyblue,
Color03: #1867C0,
Color04: ##66BB6A,
Color05: #B0BEC5
}
// calColors5.styl
:root
for key, val in colorNames
ff = --color- + key
{ff}: val
// output
:root {
--color-Color01: #ffa500;
--color-Color02: #87CEEB;
--color-Color03: #1867C0;
注意）
vuetifyの <style lang="stylus" scoped> 内での :root 宣言は機能しない(scoped)
main.js などに :root のある cssファイルを import する
<style scoped> 内でCSS変数として使用出来る
.title{
color: var(--color-Color01);
background-color: var(--back-Color01);
font-weight: bold;
}
- stylusでjsonファイルのデータを使う
node.jsプログラムでCSSを作るなら，stylusを使わなくても可能だが
stylusを使用すると
node.js プログラム
#!/usr/bin/env node
/* **************************
styl.js for node
2019.06.26
By H.Nakano
*************************** */
'use strict';
var version = '0.1';
var stylus = require('stylus');
var fs = require('fs');
var colorNames = require('.colorNames.json');
function toStrings(){
let names = []
for(let k in colorNames){
names.push(k + '={')
const dat = colorNames[k]
for(let key in dat){
names.push(key)
names.push(':')
if(typeof dat[key] === 'string'){
names.push(dat[key])
} else {
for(let i in dat[key]){
names.push(dat[key][i])
names.push(' ')
}
names.pop()
}
names.push(',')
}
names.pop()
names.push( '}\n')
}
return names.join('')
}
function main(){
const str = fs.readFileSync('./calColors.styl', 'utf8');
// const dataList = fs.readFileSync('./data.styl', 'utf8');
// stylus( dataList + str );
const ColorNames = toStrings();
stylus( ColorNames + str )
// .set('list',{}) ??
.render(function(err, css){
if (err) throw err;
// console.log(css);
fs.writeFileSync('./calColors.css',css);
});
}
main()
- class内でのCSS変数の使用と変更
.test-class{
--color-test01: wheat;
color: var(--color-test01);
// (scoped使用の場合はscopedの範囲内で使用)
const parentDOM = document.getElementsByClassName('test-class')[0] // ClassName
parentDOM.style.setProperty('--color-test01', 'red')
- :root CSS変数の変更
A:CSS変数値を取得する
const fName = '--color-Color01'
const ret = getComputedStyle(document.documentElement).getPropertyValue(fName)
console.log('CSS変数', fName, ret)
B:CSS変数値を変更する
// :root 指定の場合
const parentDOM = document.getElementById('app') // app は ID
parentDOM.style.setProperty(fName, 'red')