牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

css helper 的なやつを Javascript で簡単に生成してみるメモ

Javascript

const lineList = [
  '.w100 {width: 100%;}',
  '.text-left {text-align: left;}',
  '.text-center {text-align: center;}',
  '.text-right {text-align: right;}',
  '.text-justify {text-align: justify;}',
];
lineList.forEach(line => {
  console.info(line);
});

const numList = [0, 10, 20, 30 , 40, 50, 60, 70, 80, 100];
const mplineList = [
  '.m${num} {margin:${num}px;}',
  '.mt${num} {margin-top:${num}px;}',
  '.mr${num} {margin-right:${num}px;}',
  '.mb${num} {margin-bottom:${num}px;}',
  '.ml${num} {margin-left:${num}px;}',
  '.p${num} {padding:${num}px;}',
  '.pt${num} {padding-top:${num}px;}',
  '.pr${num} {padding-right:${num}px;}',
  '.pb${num} {padding-bottom:${num}px;}',
  '.pl${num} {padding-left:${num}px;}',
];
mplineList.forEach(line => {
  numList.forEach(num => { // eslint-disable-line no-unused-vars
    console.info(eval(`\`${line}\``));
  });
});


const fontSizeList = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
fontSizeList.forEach(num => {
  console.info(`.font-size${num} {font-size:${num}px}`);
});

CSS

.w100 {width: 100%;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-justify {text-align: justify;}
.m0 {margin:0px;}
.m10 {margin:10px;}
.m20 {margin:20px;}
.m30 {margin:30px;}
.m40 {margin:40px;}
.m50 {margin:50px;}
.m60 {margin:60px;}
.m70 {margin:70px;}
.m80 {margin:80px;}
.m100 {margin:100px;}
.mt0 {margin-top:0px;}
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px;}
.mt80 {margin-top:80px;}
.mt100 {margin-top:100px;}
.mr0 {margin-right:0px;}
.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}
.mr50 {margin-right:50px;}
.mr60 {margin-right:60px;}
.mr70 {margin-right:70px;}
.mr80 {margin-right:80px;}
.mr100 {margin-right:100px;}
.mb0 {margin-bottom:0px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}
.mb100 {margin-bottom:100px;}
.ml0 {margin-left:0px;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml40 {margin-left:40px;}
.ml50 {margin-left:50px;}
.ml60 {margin-left:60px;}
.ml70 {margin-left:70px;}
.ml80 {margin-left:80px;}
.ml100 {margin-left:100px;}
.p0 {padding:0px;}
.p10 {padding:10px;}
.p20 {padding:20px;}
.p30 {padding:30px;}
.p40 {padding:40px;}
.p50 {padding:50px;}
.p60 {padding:60px;}
.p70 {padding:70px;}
.p80 {padding:80px;}
.p100 {padding:100px;}
.pt0 {padding-top:0px;}
.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt30 {padding-top:30px;}
.pt40 {padding-top:40px;}
.pt50 {padding-top:50px;}
.pt60 {padding-top:60px;}
.pt70 {padding-top:70px;}
.pt80 {padding-top:80px;}
.pt100 {padding-top:100px;}
.pr0 {padding-right:0px;}
.pr10 {padding-right:10px;}
.pr20 {padding-right:20px;}
.pr30 {padding-right:30px;}
.pr40 {padding-right:40px;}
.pr50 {padding-right:50px;}
.pr60 {padding-right:60px;}
.pr70 {padding-right:70px;}
.pr80 {padding-right:80px;}
.pr100 {padding-right:100px;}
.pb0 {padding-bottom:0px;}
.pb10 {padding-bottom:10px;}
.pb20 {padding-bottom:20px;}
.pb30 {padding-bottom:30px;}
.pb40 {padding-bottom:40px;}
.pb50 {padding-bottom:50px;}
.pb60 {padding-bottom:60px;}
.pb70 {padding-bottom:70px;}
.pb80 {padding-bottom:80px;}
.pb100 {padding-bottom:100px;}
.pl0 {padding-left:0px;}
.pl10 {padding-left:10px;}
.pl20 {padding-left:20px;}
.pl30 {padding-left:30px;}
.pl40 {padding-left:40px;}
.pl50 {padding-left:50px;}
.pl60 {padding-left:60px;}
.pl70 {padding-left:70px;}
.pl80 {padding-left:80px;}
.pl100 {padding-left:100px;}
.font-size7 {font-size:7px}
.font-size8 {font-size:8px}
.font-size9 {font-size:9px}
.font-size10 {font-size:10px}
.font-size11 {font-size:11px}
.font-size12 {font-size:12px}
.font-size13 {font-size:13px}
.font-size14 {font-size:14px}
.font-size15 {font-size:15px}
.font-size16 {font-size:16px}
.font-size17 {font-size:17px}
.font-size18 {font-size:18px}
.font-size19 {font-size:19px}
.font-size20 {font-size:20px}