�{�A�ڂł́ACMS�̃X�^���_�[�h�ł�����uWordPress�v�̃e�[�}�쐬���ADreamweaver�����C���ɗp���Ă��܂��܂ȃ��_���ȋZ�p��g�ݍ��킹�Ȃ��甚���I�ɒ��i�͂��ǁj�点����@��������Ă����B����́A����ɂ�����CSS�R�[�f�B���O��3�̖��_�ASass�̊T�v�Ǝ��10�̋@�\�ASASS�L�@��SCSS�L�@�̈Ⴂ�Ȃǂ��Љ�B
�@�{�A�ځu�����I WordPress�e�[�}�쐬�V���[�g�J�b�g�v�ł́A����́uDreamweaver�Ŏn�߂�WordPress�T�C�g�\�z�̊�b�m���v�ŁA�uAdobe Dreamweaver CC�v�i�ȉ��ADreamweaver�j��WordPress�̃e�[�}���J�X�^�}�C�Y�ł���悤�ɂ�����\�z��ݒ���s���A�O��́uWordPress���S�҂ł������I �e���v���[�g�J�X�^�}�C�Y���V���[�g�R�[�h�쐬�������v��WordPress�̓����\���ADreamweaver���g�����e���v���[�g�̃J�X�^�}�C�Y���@�A�V���[�g�R�[�h�̍����ɂ��ĉ�������B
�@����́A����Ȃ锚���̂��߂ɁuSass�v���Љ��B
�@Web�T�C�g��f�����쐬���Ă������߂ɂ́A�����Ɍ����I�ɃR�[�h���������Ƃ����Ƃ��낪�|�C���g�ƂȂ��Ă���BWordPress��CMS�Ȃ̂ŁA�T�C�g�̍X�V�͔��Ɋy�ɂȂ�B�������A�\�z���̓e���v���[�g�쐬�Ƃ�����Ƃ��ǂ����Ă����ĉ��B���̃e���v���[�g�쐬���������I�ɂ���ɂ͂ǂ���������̂��낤���B
�@�����A���G�ɂȂ��Ă���CSS�̃R�[�f�B���O���A���֗��ɂ���Z�p�ɒ��ڂ��W�܂��Ă���BDreamweaver�́uCSS�f�U�C�i�[�v�Ƃ����p�l�����J�����Đ���҂̕��S�����炷�悤�ɂ��Ă���̂����ACSS�͂ǂ����Ă��R�[�f�B���O�����l�̃N�Z���@���Ɍ���Ă���̂��������B
�@�`�[���Ő�������Ă���Ƃ��ȂǁA�l�l�̃N�Z���o�Ă���CSS��G��̂͂ƂĂ��X�g���X�ɂȂ邵�A�ꍇ�ɂ���Ă͕s��ƂȂ��ĉ�ʂɌ���Ă���B����ɑ��ăR�[�f�B���O�K����������A���܂��܂ȃ��[��������āA�N�����삵�Ă���肪�N���ɂ����悤�ɍH�v�����肵�Ă��鐧���Ђ����Ȃ��Ȃ����낤�B
�@�܂��T�C�g����ɓ������āACSS���������Ƃ���Ɓu�ʓ|�������ȁv�Ǝv����ʂɏo����Ƃ��悭����B���G�ȍ\��������HTML�ɂȂ��Ă���ƁA��������̌p�����o�ꂵ�Ă��āA���̓s�x�R�[�h���R�s�[�����肵�ăX�^�C������肱��ł������ƂɂȂ�B
�@�܂��A�����悤�ȃX�^�C�������������Ŏg���Ă�����Ɩʓ|�ȍ�Ƃ������Ă����B�悭�g���F��}�[�W���Ȃǂ̕��́A�R�[�h�����猩���Ă��ăR�s�[���y�[�X�g���邱�Ƃ�����B���̂悤�Ȏ�Ԃ��|�����ɁA�悭�g���l�͕ϐ��Ƃ��ăL�[�v���Ă����A�Ȍ��Ɏg�����ł���͂����B
�@���̂悤��CSS���g����Ŗʓ|�ɂȂ肪���ȕ������A�v���O�����I�ɒu�������Ė��ʂ�r�����悤�ƍl����ꂽ�̂�Sass���Ƃ�����B
�@Sass�i�T�X�ƌĂ�Ă���j�́A�uSyntactically Awesome StyleSheet�v�̗����B����Ɓu�\���I�ɂ������X�^�C���V�[�g�v�Ƃ����������낤���B�Ƃɂ����������������A���ۂɗ��p���Ă���l��������́A�̎^�̃R�����g�����������Ă��Ȃ��BSass�Ƃ͂ǂ��������̂���}���������̂����ꂾ�B
�@Sass�͂��̂܂܂ł�Web�u���E�U�[�ɔF������Ȃ��BSass�̃t�@�C���ł���.scss�t�@�C���i.sass�t�@�C��������j���R���p�C���[�ɒʂ����Ƃ�.css�t�@�C�������邱�ƂɂȂ�B���ʓ|���������A���ꂩ��������Sass�̋@�\������ƁA�R���p�C���[�Ȃ��ł͐������Ȃ����Ƃ��������Ă���������Ǝv���B
�@�R���p�C���[�̎g�������܂�Sass���g�����߂̊��\�z�̎d���́A����������B
�@Sass�ł̋L�q��CSS�Ɏ��Ă��邪�A�Ɠ��̓���q�\����ϐ��̒�`�A@����n�܂鐧��\���Ȃǂō\������Ă���B
�@Sass�ɂ�SASS�L�@�i�g���q��.sass�ɂ���j��SCSS�L�@�i�g���q��.scss�ɂ���j�̈Ⴂ������B���Ƃ��ƁASass��SASS�L�@���̗p���Ă������ASass 3.0����CSS�̋L�q�̎d���ɋ߂�SCSS�iSassy CSS�j�L�@�ł��L�q�ł���悤�ɂȂ����B
�@�ǂ�����̗p���邩�́A����ɂ���ĕς�邾�낤���A���Ƃ��Ƃ�SASS�L�@�̕������R�[�f�B���O���ȗ�������Ƃ������_������B����ŁuSCSS�̕���CSS�ɋ߂����߃R�[�f�B���O���͂��ǂ�Ƃ������������v�Ǝv���̂ŁA�꒷��Z���낤�B
�@�Ⴆ�ASass�iSASS�L�@�ASCSS�L�@�j��CSS�̃R�[�h�̈Ⴂ�͈ȉ��̒ʂ肾
body color: #000
body{ color:#000; }
�@������R���p�C���[�ɒʂ��ƁA���L�̂悤�ɕϊ������B
body { color:#000; }
�@SCSS�L�@��SASS�L�@�̈Ⴂ���܂Ƃ߂�ƁA�ȉ��̕\�̒ʂ肾�B
SCSS�L�@ | SASS�L�@ | CSS | |
---|---|---|---|
�g����{} | �K�v | �s�v�i���p�X�y�[�X2�����̃C���f���g�Ńu���b�N��\���j | �K�v |
�Z�~�R����; | �K�v | �s�v | �K�v |
: �̌�ɃX�y�[�X | �s�v | �K�v | �s�v |
�~�b�N�X�C�� | @mixin | = | �Ȃ� |
�C���N���[�h | @include | + | �Ȃ� |
�g���q | .scss | .sass | .css |
�@�ŋ߂́ASCSS�L�@���嗬�ƂȂ��Ă���̂ŁA�{�A�ڂł́A���SCSS�L�@�������Ă������ASASS�L�@�̏ڍׂ��C�ɂȂ����Sass�̗R���Ȃǂɂ��ẮA�L���uSass��CSS�̎�_���������悤�v���Q�Ƃ��Ăق����B
�@Sass�ɂ́A���̂悤��CSS�̋L�q���ȗ�������@�\�����ł͂Ȃ��ACSS�̋L�q�̕��S�����Ȃ����č�Ƃ��͂��ǂ点����ACSS�t�@�C���̎��s���x���グ���肷��A���܂��܂ȋ@�\������B�{�e�ł́A��\�I��10�̋@�\���Љ�悤�B
Copyright © ITmedia, Inc. All Rights Reserved.