
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 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
�@�C���X�g�[���ɐ�������ƁA�����̃R�}���h���C���c�[���ł���sass�R�}���h���g����悤�ɂȂ�܂��B�ȉ��̂悤��Haml�̃o�[�W�������\�������ΐ������C���X�g�[���ł��Ă��܂��B
Haml 2.0.9
Sass�̊�{���������悤
�@�܂��A��̓I��Sass�̎g�������݂Ă݂܂��傤�B���X�g1�͊ȒP��CSS�ł��B����CSS��Sass�ŕ\������ƃ��X�g2�̂悤�ɂȂ�܂��B
color: #0080DD; }
.link:hover {
color: blue; }
: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
- Sass��Ruby�R�[�h�̈ꕔ�ɑg�ݍ���Ŏg��
- Sass�̃R�}���h���C���c�[���𗘗p����
- 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
=> 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
.link {
color: #0080DD; }
.link:hover {
color: blue; }
.link {
color: #0080DD;
}
.link:hover {
color: blue;
}
.link { color: #0080DD; }
.link:hover { color: blue; }
.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
�@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�̏ڍׂȕ��@��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 |
![]() |
Index | |
Sass��CSS�̎�_���������悤 | |
![]() |
Page1 �����������\���̃X�^�C���V�[�g�H Sass�̊�{���������悤 |
Page2 Sass�̊�{���@ Sass�Ǝ��̕��@�\�萔 Sass�Ǝ��̕��@�\Mixins ��������Tips�Ƃ܂Ƃ� |
![]() |
Coding Edge�t�H�[���� �g�b�v�y�[�W |
- �v���O�����̎��s�͂ǂ̂悤�ɂ��čs����̂��ALinux�J�[�l���̃R�[�h����T�� �i2017/7/20�j
�@C����́uHello World�I�v�v���O�����Ŏg����A�uprintf()�v�umain()�v���̒��g���A�f�o�b�K�ɂ���͂Ƌt�A�Z���u���A�\�[�X�R�[�h�lj��Ȃǂ̂��܂��܂ȑ��ʂ���T��A�ځB�ŏI��́ALinux�J�[�l���̒��ł́A�v���O�����̋N�����ɂ͂ǂ̂悤�ȏ������s���Ă���̂���T�� - �G���W�j�A�Ȃ�C����v���O�����̏I���ɌĂяo�����exit()�̒��g�������Ă܂���ˁH �i2017/7/13�j
�@C����́uHello World�I�v�v���O�����Ŏg����A�uprintf()�v�umain()�v���̒��g���A�f�o�b�K�ɂ���͂Ƌt�A�Z���u���A�\�[�X�R�[�h�lj��Ȃǂ̂��܂��܂ȑ��ʂ���T��A�ځB����́A�v���O�����̏I���ɌĂяo�����exit()�̒��g��T�� - VBA�ɂ�����FileDialog����̊�{���h���C�u�̋e�ʁA�t�@�C���̃T�C�Y��^�C���X�^���v�̎擾���@ �i2017/7/10�j
�@�w�肵���h���C�u�̋e�ʁA�t�@�C���̃^�C���X�^���v�⑮�����擾������@�AFileDialog�^�G�N�X�v���[���[����̊�{���Љ�܂� - ����Ύc�ƁI�@�ʓ|�������G�N�Z���Ɩ����y�ɂ���uExcel VBA�v�Ƃ� �i2017/7/6�j
�@������������g�ʓ|�������Ɩ��h�B�ȒP�ȃv���O���~���O�Ō������ł���\��������B�{�e�ł́A�Ɩ��Ŏg�����Ƃ������uMicrosoft Excel�v�Ŏg����VBA���Љ��B���V���[�g�J�b�g�L�[�A�A�N�Z�X�L�[�̉������
![]() |
|
|
|
![]() |