node-sassでCompassを適用するためのメモ

# Sassとは
* CSSのメタ言語
 * CSSをわかりやすく書ける
* 拡張子は`.sass`と`.scss`

[Sassとは？ Sassの基本について](https://uxmilk.jp/38073)

## SassとScssは何が違うの？
書き方が微妙に違う。

* Sassが中括弧なしで、Scssが中括弧あり。
* Scssのほうが主流

[SassとSASSとSCSSの違いについて](https://uxmilk.jp/38084)

# node-sass
* Sassの公式の実装はRubyで行われているが、C/C++で開発されたのnode-sassのほうが高速
* node-sassはNode.js以外でも使用可能

[Sass(Node-sass)の環境構築を行ってみる](https://qiita.com/190131start/items/ad5a3fcf70afe8ab6d5c)

## node-sassの環境構築と使い方
以下のサイトがわかりやすかったので割愛
[https://xn--web-oi9du9bc8tgu2a.com/intro-sass/](https://xn--web-oi9du9bc8tgu2a.com/intro-sass/)

# 実際に使ってみる
これを実際にcssにコンパイルしてみる
[【CodePen】Parallax Star background in CSS](https://codepen.io/saransh/pen/BKJun)

* parallax-star.html

```html 
<!DOCTYPE html>
<html lang='ja'>

<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <link rel="stylesheet" type="text/css" href="parallax-star.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id='stars'></div>
    <div id='stars2'></div>
    <div id='stars3'></div>
    <div id='title'>
        <span>
            PURE CSS
        </span>
        <br>
        <span>
            PARALLAX PIXEL STARS
        </span>
    </div>
</body>
</html>
```

* parallax-star.sass

```sass
@import compass


// n is number of stars required
@function multiple-box-shadow ($n) 
  $value: '#{random(2000)}px #{random(2000)}px #FFF'
  @for $i from 2 through $n
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'

  @return unquote($value)

$shadows-small:  multiple-box-shadow(700)
$shadows-medium: multiple-box-shadow(200)
$shadows-big:    multiple-box-shadow(100)

html
  height: 100%
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)
  overflow: hidden
    
#stars
  width: 1px
  height: 1px
  background: transparent
  box-shadow: $shadows-small
  animation			: animStar 50s linear infinite
    
  &:after
    content: " "
    position: absolute
    top: 2000px
    width: 1px
    height: 1px
    background: transparent
    box-shadow: $shadows-small
    
#stars2
  width: 2px
  height: 2px
  background: transparent
  box-shadow: $shadows-medium
  animation			: animStar 100s linear infinite
    
  &:after
    content: " "
    position: absolute
    top: 2000px
    width: 2px
    height: 2px
    background: transparent
    box-shadow: $shadows-medium
    
#stars3
  width: 3px
  height: 3px
  background: transparent
  box-shadow: $shadows-big
  animation			: animStar 150s linear infinite
    
  &:after
    content: " "
    position: absolute
    top: 2000px
    width: 3px
    height: 3px
    background: transparent
    box-shadow: $shadows-big

#title
  position: absolute
  top: 50%
  left: 0
  right: 0
  
  color: #FFF
  text-align: center
  font-family: 'lato',sans-serif
  font-weight: 300
  font-size: 50px
  letter-spacing: 10px
  
  margin-top: -60px
  padding-left: 10px
  
  span
    background: -webkit-linear-gradient(white, #38495a)
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent
    
@keyframes animStar
  from	
    transform: translateY(0px)
  to		
    transform: translateY(-2000px)
```
コマンドを実行
`node-sass parallax-star.sass parallax-star.css`

以下のエラーが出る

```
{
  "status": 1,
  "file": "C:/hoge/hoge/sass-test.sass",
  "line": 1,
  "column": 1,
  "message": "File to import not found or unreadable: compass.",
  "formatted": "Error: File to import not found or unreadable: compass.\n        on line 1 of sass-test.sass\n>> @import \"compass\";\n\n   ^\n"
}
```
エラー内容としては`compass`をインポートできないのが気に入らないらしい

# Compassを適用する
Compassを適用したいが、CompassはRubyの拡張機能なので今回使用しているnode-sassでは使えないらしい。
しかし、これを適用すると使える。
[compass-mixins](https://github.com/Igosuki/compass-mixins)

CloneかDLしてきて、
sassの`@Compass`を`@compass-mixins/lib/compass`に書き換えてnode-sassを実行すればうまくcssにコンパイルされる

![HTML - Google Chrome 2020-03-29 19-35-29.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/a20b0cb7-7092-07f8-a331-de6464bdb725.gif)



# まとめ
CompassはSassでしか使えなかったり2014年から最新バージョンが出てなかったりするので今から新しく作るんだったら使わないほうがよさそうだと思った。