1. はじめに
割とバックエンドとか決済とかお硬い方の仕事が多かったのですが、Web系キラキラエンジニアの地位を目指して流行をおさえて行きたいと思います。
1.2 SCSSについて
1.Sassはrubyで利用できる、CSSの拡張書式
2.Rubyのgemとして導入できて、ruby内のモジュールを拡張する事で機能を付与できる
3.CSS3の拡張で、ネストルール、変数、ミックスイン、セレクタ、継承などを機能をサポートしている
4.Sassはよくフォーマットされたスタイル・シートを出力するので保守性が高い
もともとcoffeeなどのトランスクリプト系は苦手というかあんまり意味ないと思っていますが、Sassだけは下記の機能が使える事から賛同します。
1.3 実行環境について
今回は、NodeJSとrubygemを利用します。
NodeJSはGruntで使います。GruntからRubyGemのCompassの機能を利用する形です。
2. サンプル
書式
こちらを参考にすると分かりやすいです。
| prefixsyntax | 機能 |
|---|---|
| $ | 変数定義と利用 |
| @mixin | mixin定義 |
| @include | mixinの呼び出し |
| 関数名() | rubyの関数呼び出し |
| @extend | スタイル継承 |
2.1.入れ子にできる
SASS
.container
background-color: red
.span1
background-color: pink
.span2
background-color: orange
CSS
/* line 2, ../../src/sass/test1.sass */
.container {
background-color: red;
}
/* line 4, ../../src/sass/test1.sass */
.container .span1 {
background-color: pink;
}
/* line 6, ../../src/sass/test1.sass */
.container .span1 .span2 {
background-color: orange;
}
2.2.変数が使える
SASS
$article_font_color: #333
.article p
color: $article_font_color
CSS
.article p {
color: #333;
}
2.3.関数が使える
rubyでちょいちょいコーディングするだけで関数を定義できる
ruby内のdarken関数を呼び出すサンプル
SASS
$base: blue
$highlight: lighten($base, 25)
$shadow: darken($base, 50)
div.box
background-color: $base
border:
width: 2px
style: solid
colors: $highlight $highlight $shadow $shadow
CSS
/* line 18, ../../src/sass/test1.sass */
div.box {
background-color: blue;
border-width: 2px;
border-style: solid;
border-colors: #8080ff #8080ff black black;
}
Ruby
def darken(color,amount)
hsl = Compass::Colors::HSL.form_color(color)
hsl.l *= 1.0 - (amount.value _ 100.0)
hsl.to_color
end
2.4.mixinが使える
mixinとは端的にいうとfunctionみたいなもので、引数を取る事ができたり、他のcssセレクタから参照できます。mixinからmixinの参照も可能です。
下記のサンプルでは、ネストも利用しています。
SCSS
@mixin border($color:#666)
border-bottom: 1px solid $color
#header
@include border(#999)
#gnav
overflow: hidden
@include border
CSS
/* line 29, ../../src/sass/test1.sass */
#header {
border-bottom: 1px solid #999;
}
/* line 32, ../../src/sass/test1.sass */
#header #gnav {
overflow: hidden;
border-bottom: 1px solid #666;
}
2.5.ループが使える
シンプルにループです。
SCSS
@for $i from 10 through 11
.fs#{$i}
font-size: #{$i} px
CSS
/* line 38, ../../src/sass/test1.sass */
.fs10 {
font-size: 10 px;
}
/* line 38, ../../src/sass/test1.sass */
.fs11 {
font-size: 11 px;
}
2.5. 継承が使える
SCSS
.box
margin-top: 15px
padding: 10px
background-color: #ccc
p
line-height: 1.3
.contentsBox
@extend .box
background-color: #eee
CSS
/* line 42, ../../src/sass/test1.sass */
.box, .contentsBox {
margin-top: 15px;
padding: 10px;
background-color: #ccc;
}
/* line 46, ../../src/sass/test1.sass */
.box p, .contentsBox p {
line-height: 1.3;
}
/* line 48, ../../src/sass/test1.sass */
.contentsBox {
background-color: #eee;
}
3. 導入
NodeJS +Gruntで導入したいと思います。
プロジェクトディレクトリを作成して、そこ中に、rubyの.bundleとnode_modulesがインストールされるようにします。
Grunt
参考
3.1 インストール
今回はSCSS -> CSSの挙動を確認するために、シンプルなインストール設定を行います。
Gruntというパッケージャーを利用します。
他にも、
1.JSをつなげる(grunt-contrib-concat)
2.難読化や圧縮したり(grunt-contrib-uglify)
3.CSSを圧縮したり(grunt-contrib-cssmin)
色々できるので、おいおい利用していければと思います。
3.1.1 rubyのgemをインストール
プロジェクト用のディレクトリをしてその下に移動して作業をします。
# Gemfileを作成
bundle init
vi Gemfile
gem 'sass'
gem 'compass'
bundle install
3.1.2 node_modulesをインストール
1.grunt(grunt)
2.ディレクトリ監視(grunt-contrib-watch)
ファイルが更新されると自動的に再コンパイルが走るようにします。
3.Compass(grunt-contrib-compass)
4.Task管理(load-grunt-tasks)
5.Webサーバー(grunt-contrib-connect)
ウェブサーバーを立ち上げます。
## nodeJSをインストール
# package.jsonを作成
npm init
# NodeJSライブラリインストール libraries
npm install grunt-contrib-compass grunt grunt-contrib-watch grunt grunt-contrib-connect load-grunt-tasks --save-dev
# grunt-cliのインストール
npm install -g grunt-cli
3.2 Gruntfile.jsの設定
Gruntfile.jsを下記のように設定します。
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-uglify');
//Gruntの設定
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
development: {
options: {
config: 'config.rb',
environment: 'development',
bundleExec: true
}
},
production: {
options: {
config: 'config.rb',
environment: 'production',
bundleExec: true
}
}
},
watch: {
compass: {
files: 'src/sass/*',
tasks: 'compass:devel'
}
},
connect: {
local: {
options: {
keepalive: true,
port: 9000,
base: 'src'
}
}
},
});
//defaultタスクの定義
grunt.registerTask("development", ["compass:development" ,"watch" , "connect"]);
grunt.registerTask("production", ["compass:production"]);
grunt.registerTask("msg", function() {
//ログメッセージの出力
grunt.log.write('Logging some stuff...').ok();
});
};
3.3 gruntの実行
grunt development
を初回に実行すると、 dist/stylesheets/以下にファイルが吐き出され、サーバーが立ち上がります。その後は、監視している'src/sass/'以下のファイルが変更されると自動でコンパイルして書き出しされます。
[murotanimari]$ grunt development
Running "compass:development" (compass) task
write dist/stylesheets/ie.css (0.001s)
write dist/stylesheets/index.css (0.001s)
write dist/stylesheets/print.css (0.001s)
write dist/stylesheets/screen.css (0.01s)
Running "watch" task
Waiting...
4.早速ためしてみよう
上記のサンプルを利用して出力を確認してみましょう。
サンプルを実行するにあたり、追加で下記のgemをインストールします。
compass-colorsはSASSから利用可能なrubyライブラリ提供してくれています。readme通りにイントールしましょう。
4.1 下準備
4.1.1 Gemfileに追加
vi Gemfile
gem "compass-colors"
bundle install
4.1.2 configに設定を追加
vi config.rb
# Require any additional compass plugins here.
require 'compass-colors'
4.1.3 サンプルコードをコピペー
2.3.関数が使えるをコピペする事で先程インストールしたcompass-colorsの関数群が使えるようになります。
5 今回のサンプル
今回のサンプルは下記にアップしてあります。
今回は、SCSSとCompass部分のみ実装してますが、JSの部分の更新したいですね。
SASSのサンプル
Grunt.js