���Ȃ���Ԃƒm���ł���Ȃ�Ɍ�����A�Y�����f�U�C���e�N�j�b�N�F�Y�����f�U�C���i1�j�i1/2 �y�[�W�j

�@Web�v���O���}�AWeb�G���W�j�A�̊F���񂪁A�l�ō��Web�T�[�r�X��n�b�J�\���ȂǂŁA�Z���ԂɏW�����ăT�[�r�X�J�����ă��[���`�������Ƃ��ɁA����������Ǝ����ŃC�C�����Ƀf�U�C���ł���Ƃ����Ȃ��Ƃ��������悭�����܂��B

�@���̊��́A����ȃv���O���}���A���Ȃ���ԂŊȒP�ɁA������Ƃ��������̃f�U�C���Ɍ����邽�߂́A������Ƃ������Y����Tips���Љ�܂��B

�@�i���j���̃y�[�W�ł́A�X�̃f�U�C���v�f�𕪂���₷���������邽�߂ɁA�����T�C�Y���摜���g�債�Ďg�p���Ă��܂��B

�Y�����f�U�C����Sass��Compass�𗘗p���ĉ�����Ă����܂�

�@CSS�݂̂ł̃Y�����f�U�C�����������”\�ł����A�����ł͂������I�Ƀf�U�C�����邽��Sass��Compass�̗��p�𒆐S�ɉ�����Ă����܂��BSass�i�����������\���̃X�^�C���V�[�g�F�FSyntactically Awesome Stylesheets�j�Ƃ́ACSS���������I�ɋL�q���邽�߂̃��^����̈��ł��B�ϐ��≉�Z�Amixin�Ȃǂ����p�ł��A���ȑf�Ńh���C�ȋL�q���”\�ɂȂ�܂��B

�@Compass�Ƃ́ASass�֗̕���mixin�Ȃǂ���ʂ�p�ӂ���Ă���A�֗���CSS�t���[�����[�N�ł��B�X�̏ڂ����g�����ɂ‚��Ă͂����ł͐G��܂��񂪁A�{����ǂ�ŋ�����������܂����為�Г������Ă݂Ă��������B

• Sass�����T�C�g�i�p��j
• Sass�`���[�g���A���i���{���j
• Compass�����T�C�g�i�p��j

1�F�Y������

�@�܂��A�u�Y�������v�Ƃ����̂��Љ�܂��B

�@���Ɣ��̐���2�{���ׂ邱�ƂŁA�w�i�ɒ��荞�܂ꂽ�悤�Ɍ�������A���ꂪ�u�Y�������v�ł��B�����A������Web�T�C�g�Ŏg���Ă���̂��������Ƃ�����Ǝv���܂��B���̐��������邱�Ƃɂ��AWeb�T�C�g�̉�ʂ��G���̂���u�����v�ɋ߂����݊��������A�f�U�C���̃N�I���e�B���O�b�Əオ��܂��B

�Y��������Box�̊e�����Ɏw��ł��܂��B

�@�������ǂ̕������炫�Ă��邩�ɂ���Đݒ肪�ς���Ă��܂����A����͉E�ォ�獶���Ɍ������Ă̌�����z�肵�Ă��܂��B

�w�i�F�ɂ���āA�Y�������̓����x�𒲐����܂��B

�@�Z���w�i�F�̏�ɂ͓����x���Ⴂ�i�Z���j�����A�����w�i�F�̏�ɂ͓����x�������i�����j�����ڂ��܂��B

�������|�C���g

�@�Y�������̍����̃|�C���g���ȒP�ɂ܂Ƃ߂�ƈȉ��̂悤�ɂȂ�܂��B

• �F�́A��(rgba(0, 0, 0, x))�A��(rgba(255,255,255,x))�݂̂�
• �w�i�F�ɍ��킹�ē����x�𒲐߂���
• ������1px
• �ڂ�����0
• �Z�߂��Ȃ��悤��

Sass�ʼn��L�̂悤�ȃY�������pmixin������Ă����ƕ֗��ł�

�@�ϐ� $op1 �͍������̓����x���A$op2�͔������̓����x���w�肵�Ă��܂��B�悭�g�������x���f�t�H���g�ɐݒ肵�Ă��܂��B

�@��F

@mixin line-top($op1: .2, $op2: .3){
	border-top: 1px solid rgba(0, 0, 0, $op1);
	@include box-shadow(rgba(255, 255, 255, $op2) 0 1px 0 inset);
}

�@���F

@mixin line-bottom($op1: .2, $op2: .3){
	border-bottom: 1px solid rgba(0, 0, 0, $op1);
	@include box-shadow(rgba(255, 255, 255, $op2)0 1px 0);
}

�@���F

@mixin line-left($op1: .2, $op2: .3){
	border-left: 1px solid rgba(0, 0, 0, $op1);
	@include box-shadow (rgba(255, 255, 255, $op2) -1px 0 0);
}

�@�E�F

@mixin line-right($op1: .2, $op: .3){
	border-right: 1px solid rgba(0, 0, 0, $op1);
	@include box-shadow(rgba(255, 255, 255, $op2) -1px 0 0 inset);
}

�@�g�p����Ƃ��́Abox�Ɉȉ��̂悤��1�s���w�肷�邾���ŃY���������`���܂��i������: alpha 0.1 / ������: alpha 0.2 �̏�����̃Y�������̎w���j�B

@include line-top(.1, .2);