---
# System prepended metadata

title: 前端變量 variable
tags: [javascript, 網站開發]

---

# 前端變量 variable


### style
> demo.css
~~~css
:root {
  --w: 210;
}

@media screen and (orientation: portrait) {
  --w: 170;
}

#box {
  width: calc(var(--w) * 1px);
}
~~~
> demo.scss
~~~scss
:root {
  --w: 210;
}

$h: 180; //for scss/sass

#box {
  --w: 210;
  width: calc(var(--w) * 1px);
  height: $h + 'px';

  @media (orientation: portrait) {
    --w: 170;
    $h: 145;
    height: $h + 'px';
  }
}
~~~

### pugjs/pug
> meta.pug
~~~pugjs
head
  meta(charset="utf-8")/
  if ogtitle!==""
    title=ogtitle
  link(href="css/" + papers + ".css" rel="stylesheet" type="text/css")
~~~
> index.pug
~~~pugjs
- var papers = "index";
- var ogtitle = "首頁";

doctype html
html(lang="zh-TW")

  include inc/meta.pug
  ='\n'

  body
    ...
~~~

### gulp
> gulpfile.babel.js
~~~javascript
/* 清除 */
export function clean() {
  return del(["./.tmp", "./dist/"])
};

/* 變數 */
var envOptions = {
  string: "env",
  default: { env: "develop" }
};
var options = minimist(process.argv.slice(2), envOptions);
var envIsPro = options.env === "production" || options.env == "pro";
var isDev = process.argv.slice(2)[0] !== "build";

const pugOption = {
  'pug_isDc': false,
  'pug_baseUrl': 'https://dc.udn.com',
  'gulp_env': isDev ? '開發中' : '上線輸出',
  'gulp_fbappid': 123456789
}
console.log(pugOption.gulp_env);


/* 預處理 */
export function pugToHtml() {
  return gulp
    .src(['pug/demo.pug'])
    .pipe(
      $.pug({
        pretty: true, //格式化
        locals: pugOption
      })
    )
    .pipe(gulp.dest('./dist/'))
};

/* 監聽 */
export function watch() {  
    gulp.watch(["pug/**"], pugToHtml);
};


/* 指令 */
exports.default = gulp.series(
  cb => {
    pugOption.pug_baseUrl = 'http://localhost:8080'; //輸出變更
    envIsPro = false; //輸出變更
    cb()
  },
  gulp.parallel(
    pugToHtml,
    watch
  )
);

exports.build = gulp.series(
  cb => {
    pugOption.pug_isDc = true; //輸出變更
    envIsPro = true //輸出變更
    cb()
  },
  gulp.series(clean),
  gulp.parallel(pugToHtml)
);
~~~
> demo.pug
~~~pugjs
- var fbappid = gulp_fbappid;

  body
    #fb-root
    script.
      window.fbAsyncInit = function() {
        FB.init({
          appId      : #{fbappid},
          autoLogAppEvents : true,
          xfbml      : true,
          version      : 'v10.0'
        });
      };
~~~


### webpack
> webpack.config.js
~~~javascript
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/, //正規表達式
        use: [
          "css-loader",
          // "sass-loader"
          {
            loader: 'sass-loader',
            options: {
              additionalData: '$imgsrc: "https://pgw.udn.com.tw/..."',
            },
          },
        ]
       }
    ]
  },
};
~~~
> demo.scss
~~~scss
#box {
  --bg-img: url('#{$imgsrc}static/images/desktop.jpg');
  background-image: var(--bg-img);

  @media (orientation: portrait) {
    --bg-img: url('#{$imgsrc}static/images/mobile.jpg')
    /* background-image: url($imgsrc + 'static/images/mobile.jpg'); */
  }
}
~~~