Sass��CSS�̎�_���������悤

Syntactically Awesome StyleSheets

Sass��CSS�̎�_���������悤

maedana
SonicGarden
SUG�iSKIP User Group�j�^���{Haml�̉�

2009/5/22

Rails���g����Web�A�v���P�[�V�����J���ŁA�v���O���}��f�U�C�i��Y�܂�����̂�1�‚��X�^�C���V�[�g�̋L�q���낤�BSass���g���āA�g�N�[���ō\�������ꂽ�h�X�^�C���V�[�g���L�q���Ă݂悤�i�ҏW���j

�����������\���̃X�^�C���V�[�g�H

�@Sass�Ƃ́ASyntactically Awesome StyleSheets�̓���������������̂ł��B�����ē��{��ɖ󂷂ƁA�u�����������\���̃X�^�C���V�[�g�v�Ƃ����������ł��傤���B

�@���������V���v���ɕ\������Ɓu�N�[����CSS�iCascading Style Sheets�j�v�ł�������������܂���BSass�̓X�^�C���V�[�g���Ȍ��ɕ\�����邽�߂̃��^����ł���A������Sass����CSS�𐶐����邽�߂֗̕��ȃ��C�u������R�}���h���C���c�[����񋟂��܂��B

�@Sass���g���ƁACSS�����̂܂܋L�q����ꍇ�Ɣ�r���Ĉȉ��̂悤�ȃ����b�g������܂��B

  • CSS�����V���v���ȋL�@�ŁACSS���\�������ĕ\���ł���
  • CSS�Ƃ͈قȂ�A������ɂ��\���̂�ꂪ�������Ȃ�
  • CSS�ɂ͑��݂��Ȃ����͂ȋ@�\�i�u�萔�v��uMixins�v�Ȃǁj�����܂��g�����ƂŁACSS�̃����e�i���X�����啝�Ɍ��シ��
  • Ruby on Rails��Merb�Ƃ�����Ruby���̃t���[�����[�N�Ƃ̘A�g���e��
  • CSS�̏o�͌`�����_��ɑI���ł���

�@Sass�́AHaml�Ƃ���Ruby���C�u�����iRubyGems�j�̈ꕔ�Ƃ��Ē񋟂���܂��B���̂��߁ASass�̃C���X�g�[���Ƃ́A���Ȃ킿Haml���C���X�g�[������Ƃ������ƂɂȂ�܂��BSass���C���X�g�[�����邱�ƂŁASass�t�@�C������CSS�𐶐����邽�߂̃R�}���h���C���c�[���������ɃC���X�g�[������܂��̂ŁA���iRuby���g���Ă��Ȃ����ł�CSS�̃W�F�l���[�^�Ƃ��ė��p���邱�Ƃ��ł��܂��B����CSS�̃����e�i���X�ɂ�����̕��₱�ꂩ��V�K��CSS���쐬���Ă����Ȃ���΂����Ȃ��悤�ȕ��ɍœK�ł��B

�@RubyGems�ł��̂ŃC���X�g�[���ɂ́ARuby�����RubyGems���K�v�ł��B�{�e�ł�Ruby�����RubyGems�͂��łɃC���X�g�[������Ă�����̂Ƃ��܂��B�Q�l�܂łɕM�҂̊‹��ł́ARuby�����RubyGems�͈ȉ��̂悤�ȃo�[�W�������C���X�g�[������Ă��܂��B

% ruby -v
ruby 1.8.7 (2008-08-11 patchlevel 72) [i686-linux]
% gem -v
1.3.1

�@Sass�iHaml�j���C���X�g�[������ɂ͎��̃R�}���h�����s���܂��B

% gem install haml

�@�C���X�g�[���ɐ�������ƁA�����̃R�}���h���C���c�[���ł���sass�R�}���h���g����悤�ɂȂ�܂��B�ȉ��̂悤��Haml�̃o�[�W�������\�������ΐ������C���X�g�[���ł��Ă��܂��B

% sass -v
Haml 2.0.9

Sass�̊�{���������悤

�@�܂��A��̓I��Sass�̎g�������݂Ă݂܂��傤�B���X�g1�͊ȒP��CSS�ł��B����CSS��Sass�ŕ\������ƃ��X�g2�̂悤�ɂȂ�܂��B

�����X�g1
.link {
  color: #0080DD; }

.link:hover {
  color: blue; }
�����X�g2
.link
  :color #0080DD
.link:hover
  :color blue

�@CSS�Ƃ͏����L�q���Ⴄ���ƂɋC���t���ł��傤���B��قǏڂ����������܂����ASass�ł̓Z�~�R������{ }���s�v�ł��B{ }�̑���ɁA���p�X�y�[�X2�����̃C���f���g�ō\����\�����܂��B�܂��A�R�����͑����̌��ł͂Ȃ��A�����̑O�ɋL�q���܂��B

�@����ł́A���X�g2��Sass�t�@�C���𗘗p���āACSS�𐶐����Ă݂܂��傤�BCSS�𐶐�����ɂ́A�O�q�����R�}���h���C���c�[���ł̗��p���܂߂āA���3��ނ̎g�p���@������܂��B

  1. Sass��Ruby�R�[�h�̈ꕔ�ɑg�ݍ���Ŏg��
  2. Sass�̃R�}���h���C���c�[���𗘗p����
  3. Sass��Ruby on Rails�̃v���O�C���Ƃ��ė��p����

��Sass��Ruby�R�[�h�̈ꕔ�ɑg�ݍ���Ŏg��

�@Ruby�R�[�h��p���āASass�̃e�L�X�g����CSS�𐶐����邱�Ƃ��ł��܂��B���X�g2��Sass�̃e�L�X�g��irb�𗘗p����CSS�ɂ�����@���ȉ��Ɏ����܂��B

irb(main):001:0> require 'rubygems'
=> true
irb(main):002:0> require 'sass'
=> true
irb(main):003:0> sass_text = ".link\n  :color #0080DD\n.link:hover\n  :color blue"
=> ".link\n :color #0080DD\n.link:hover\n  :color blue"
irb(main):005:0> puts sass_text
.link
  :color #0080DD
.link:hover
  :color blue
=> nil
irb(main):006:0> css_text = Sass::Engine.new(sass_text).render
=> ".link {\n  color: #0080DD; }\n\n.link:hover {\n  color: blue; }\n"
irb(main):007:0> puts css_text
.link {
  color: #0080DD; }

.link:hover {
  color: blue; }
=> nil

��Sass�̃R�}���h���C���c�[���𗘗p����

�@sass�R�}���h��p���邱�ƂŁASass�̃e�L�X�g����CSS�𐶐��ł��܂��B���̕��@��p����ꍇ�ARuby�̒m���͕s�v�ł��B�܂��A���X�g2�̃e�L�X�g�t�@�C�����쐬���Asample1.sass�Ƃ��ĕۑ����Ă��������B

�@sass�R�}���h�ł́A��������CSS�̏o�͌`�����w�肷�邱�Ƃ��ł��܂��B��̓I�ɂ́Asass�R�}���h��-t�I�v�V�����ŁAnested�Aexpanded�Acompact�Acompressed��4��ނ��w��ł��܂��B�e�o�͌`���̊ȒP�Ȑ����͈ȉ��̂Ƃ���ł��B

nested:
-t�I�v�V�������w�肵�Ȃ��ꍇ�̃f�t�H���g�l�ł��BSass�t�@�C���̃l�X�g�̐[���������p����܂��B���X�g3�̂悤�ɏo�͂���܂��B
expanded:
�T�^�I��CSS�̋L�q�X�^�C���ł��B���X�g4�̂悤�ɏo�͂���܂��B�M�҂̌o����A�ł��悭��������L�q�X�^�C���ŁA�“ǐ��������ł��B
compact:
�Z���N�^�Ƒ�����1�s�ŋL�q����X�^�C���ł��B���X�g5�̂悤�ɏo�͂���܂��B���̃X�^�C�����D�ޕ�������������悤�ł����A�M�҂̌o����A�“ǐ��͒Ⴂ�Ƃ��킴��𓾂܂���B
compressed:
�ł��R���p�N�g�ȃX�^�C���ł��B���X�g6�̂悤�ɏo�͂���܂��B���͂�l���ǂނ��̂ł͂���܂���B�^�p�‹��Ȃǂŏ����ł�CSS�̃T�C�Y�����k����K�v������ꍇ�Ɍ����Ďg���ׂ��ł��傤�B

�@���̂悤�ȏ_��ȏo�͌`���̂������ŕ��i�̊J���ł͉“ǐ��̍���Sass�`���ŋL�q���A���ۂɎg����CSS�ɂ͉“ǐ��͊��҂ł��Ȃ����T�C�Y�̏�����compressed�𗘗p����Ƃ��������Ƃ��”\�ɂȂ�̂�Sass�̖��͂ł��B

�����X�g3�@nested
% sass sample1.sass -t nested
.link {
  color: #0080DD; }

.link:hover {
  color: blue; }
�����X�g4�@expanded
% sass sample1.sass -t expanded
.link {
  color: #0080DD;
}
.link:hover {
  color: blue;
}
�����X�g5�@compact
% sass sample1.sass -t compact
.link { color: #0080DD; }

.link:hover { color: blue; }
�����X�g6�@compressed
% sass sample1.sass -t compressed
.link{color:#0080DD}.link:hover{color:blue}

��Sass��Ruby on Rails�̃v���O�C���Ƃ��ė��p����

�@Sass��Ruby on Rails�̃v���O�C���Ƃ��ė��p������@�ł��B�܂��A�ȉ��̃R�}���h�����s���܂��ipath/to/rails/app�͊�����Rails�A�v���P�[�V�����ւ̃p�X�ɓǂݑւ��ĉ������j�B

% haml --rails path/to/rails/app

�@Rails�A�v���P�[�V������development���[�h�ōċN����A���X�g2�̃e�L�X�g�t�@�C����#{RAILS_ROOT}/public/stylesheets/sass/sample1.sass�Ƃ��č쐬���܂��B����ŁA/stylesheets/sample1.css�ɃA�N�Z�X������Ǝ����I�ɃR���p�C�������sample1.css����������܂��B

�@�e��J�X�^�}�C�Y��Sass::Plugin.options��environment.rb�ȂǂŐݒ肵�܂��B�Ⴆ�΁A�o�͂�compact�ɂ���ɂ̓��X�g5��environment.rb�ȂǂɋL�q���ARails�A�v���P�[�V�������ċN�����܂��B���ڂ��������{�ƃh�L�������g���Q�Ƃ��ĉ������B

Sass::Plugin.options[:style] = :compact

�@��������͂��悢��Sass�̏ڍׂȕ��@��A�`���ŐG�ꂽ�u�萔�v��uMixins�v�Ȃǂ�Sass�Ǝ��̋@�\�ɂ‚��ĉ�����܂��B����̉���ł́A�����Ƃ��ăR�}���h���C���c�[���isass�R�}���h�j�𗘗p������@��p���ĉ�������܂��̂ŁARuby��Ruby on Rails���悭������Ȃ����ł��ǂݐi�߂Ă���������΁ASass���g�����Ȃ���悤�ɂȂ�Ǝv���܂��B

 
1/2
next

Index
Sass��CSS�̎�_���������悤
Page1
�����������\���̃X�^�C���V�[�g�H
Sass�̊�{���������悤
  Page2
Sass�̊�{���@
Sass�Ǝ��̕��@�\�萔
Sass�Ǝ��̕��@�\Mixins
�����‚���Tips�Ƃ܂Ƃ�

index Coding Edge�t�H�[���� �g�b�v�y�[�W


Coding Edge �t�H�[���� �V���L��
��IT���[���}�K�W���@�V������X�^�b�t�̃R���������[���œ͂��܂��i�����j

���ڂ̃e�[�}

>

Coding Edge �L�������L���O

�{�� ����