【Vue.js】 SCSS や LESS を使う方法

やりたいこと

Vue.js で scssやless を使ってみたい。ということで Vue.js + scss の環境とVue.js + less の環境を構築してみる。そして、どちらとも少し利用してみる。

やりたいこと
Vue.js + SCSS
Vue.js + LESS
まとめ
参考文献

Vue.js + SCSS

Vue CLIで簡単にSCSSを入れる

まずは、scssを入れてみる。これはVue CLIで簡単にインストールできる。試してみたところ、scssが2つあった。なんで？

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Use class-style component syntax? No
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

以下の二つ。

sassの実装言語が違うみたい。dart-sassの方が新しいので、せっかくだからdart-sassを使ってみる。

Nesting

ネストしてかけるのがいいよね！template言語ブロックのネストに合わせてstyle言語ブロックでネストできるのが好きな感じ。

<template>
  <ul id="app">
    <li>hoge</li>
    <li>fuga</li>
    <li>hogeo</li>
  </ul>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "app"
});
</script>

<style lang="scss">
#app {
  text-align: center;

  li {
    color: red;
  }
}
</style>

Operators

計算ができるようになりみたい。calcとは違うのかな？よくわからない。でも、わざわざcalcと書かなくてもいいのは嬉しい。

<template>
  <ul id="app">
    <li>hoge</li>
    <li>fuga</li>
    <li>hogeo</li>
  </ul>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "app"
});
</script>

<style lang="scss">
#app {
  text-align: center;

  li {
    min-height: 10px + 10px + 10px;
  }
}
</style>

browserで見たときのcss。しっかり30pxになってる。

#app li {
    min-height: 30px;
}

インラインで計算したらどうなるの？

できなかった。

Vue.js + LESS

Vue CLI で簡単にLESS入れる

今度は、lessを触ってみる。こちらもVue CLIで簡単にインストールすることができる。

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Use class-style component syntax? No
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
❯ Less
  Stylus

Nesting

ネストができる。

<template>
  <ul id="app">
    <li>hoge</li>
    <li>fuga</li>
    <li>hogeo</li>
  </ul>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "app"
});
</script>

<style lang="less">
#app {
  text-align: center;

  li {
    color: red;
  }
}
</style>

Operators

計算もできる。

<template>
  <ul id="app">
    <li>hoge</li>
    <li>fuga</li>
    <li>hogeo</li>
  </ul>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "app"
});
</script>

<style lang="less">
#app {
  text-align: center;

  li {
    min-height: 10px + 10px + 10px;
  }
}
</style>