Sassとは
- CSSのメタ言語
- CSSをわかりやすく書ける
- 拡張子は
.sassと.scss
SassとScssは何が違うの？
書き方が微妙に違う。
- Sassが中括弧なしで、Scssが中括弧あり。
- Scssのほうが主流
node-sass
- Sassの公式の実装はRubyで行われているが、C/C++で開発されたのnode-sassのほうが高速
- node-sassはNode.js以外でも使用可能
node-sassの環境構築と使い方
以下のサイトがわかりやすかったので割愛
https://xn--web-oi9du9bc8tgu2a.com/intro-sass/
実際に使ってみる
これを実際にcssにコンパイルしてみる
【CodePen】Parallax Star background in CSS
- parallax-star.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
@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
CloneかDLしてきて、
sassの@Compassを@compass-mixins/lib/compassに書き換えてnode-sassを実行すればうまくcssにコンパイルされる
まとめ
CompassはSassでしか使えなかったり2014年から最新バージョンが出てなかったりするので今から新しく作るんだったら使わないほうがよさそうだと思った。