Sass 튜토리얼 Sass & Compass로 온라인 vCard 구축하기

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Lorem ipsum dolle 앉아 amate, consipetur adipiscing elit. 반짝 반짝 빛나는 서스펜스, 반짝 반짝 빛나고 반짝 반짝 빛납니다. Etiam et auctor arcu.
 
 
 
 
 
 
페이스 북
 
 지저귀다
 
Google+
 
드리블
 
 
 
 

위에서 볼 수 있듯이 '사회'에 포함 된 사회적 정체성은 '섹션은 목록 요소 내에 구조화되어 있으므로 쉽게 나란히 표시 할 수 있습니다. 각 클래스에는이 규칙에 따라 클래스 이름이 부여됩니다. 사회 - 페이스 북, 소셜 - 트위터, 사회 - 구글 등등.

나침반 구성

우리는 몇 줄의 주석 처리를 해제하여 나침반을 약간 구성해야합니다. config.rb 다음과 같이 파일 :

 # 원하는 출력 스타일을 여기에서 선택할 수 있습니다 (명령 줄을 통해 무시할 수 있습니다) : output_style = : expanded # compass 도우미 함수를 통해 상대 경로를 에셋에 설정합니다. Uncomment : relative_assets = true # 선택기의 원래 위치를 표시하는 디버깅 주석을 사용하지 않도록 설정합니다. 주석 처리 해제 : line_comments = false 

찾을 수 없다면 config.rb 파일, 아마 당신이 명령을 실행하지 않았습니다 나침반 초기화 프로젝트 디렉토리에.

파일 가져 오기

Compass를 사용할 것이기 때문에 Compass를 가져와야합니다.

 @ 수입 "나침반"; 

그리고 브라우저에서 기본 스타일을 다시 설정하여 출력물이보다 일관되게 렌더링되도록하는 것이 개인적으로 선호합니다. 이 경우 나침반에는 재설정 모듈이 있습니다. 이 모듈은 Eric Meyer의 CSS 재설정을 기반으로하며;

 @import "compass / reset"; 

그러나, 고맙게도 Normalize를 사용하는 것을 선호합니다. 또한 Sass / Scss 형식으로 제공됩니다.. 파일을 여기에서 다운로드하여 저장하십시오. 축축한 작업 디렉토리에 저장하고 스타일 시트로 가져옵니다..

 @import "normalize"; 

추천 도서 : CSS 스타일 우선 순위 수준 검토

변수

우리는 확실히 스타일 시트에 몇 가지 상수 값을 가질 것이므로 변수를 저장하고 아래의 두 변수는 vCard의 기본 색상을 정의합니다.

 $ base : #fff; $ 어둡게 : 어둡게 ($ 기본, 10 %); 

동안 $ 너비 아래 변수는 페이지의 너비입니다. 다른 요소 크기를 정의하는 기준이됩니다..

 $ width : 500px; $ space : $ width / 25; // = 20px 

그리고 $ space 볼 수 있듯이 변수는이 예에서 vCard의 기본 간격 또는 열 크기입니다. 20px;

나침반에는 이미지 크기를 감지하는 도우미가 있으며 우리는 다음과 같이이 기능을 그림 프로파일에서 사용할 것입니다.

 $ img : image-width ( "me.jpg") + (($ space / 4) * 2); 

여분의 부가 의 (($ space / 4) * 2) 위 코드에서 그림의 테두리를 포함하여 전체 이미지 너비를 계산하는 것입니다. 프레임에는 일반적으로 두면이 있습니다. 위아래 / 왼쪽 / 오른쪽, 그래서 우리는 구분 결과 으로 2.

선택기 상속

스타일 시트에는 스타일 지정 규칙이 같은 셀렉터가 몇 가지 있습니다. 코드에서 반복되는 것을 피하기 위해 먼저 스타일을 지정해야합니다. @넓히다 지시어. 이 방법은 Sass에서 다음과 같이 알려져 있습니다. 선택기 상속, 덜 유용하다..

 .float-left float : 왼쪽;  .box-sizing @include 상자 크기 조정 (테두리 상자);  

스타일

필요한 모든 것이 준비되면, HTML 문서에 배경색으로 시작하여 vCard를 스타일링해야합니다.

 html 높이 : 100 %; 배경색 : $ 기본;  

vCard

다음 스타일은 vCard 래퍼를 정의합니다. 이전에 LESS로 작업 한 적이 있다면이 코드는 익숙하고 쉽게 소화 할 수 있습니다..

 .vcard 너비 : $ 너비; 여백 : 50px 자동; background-color : 어둡게 ($ base, 5 %); 국경 : 1px 고체 $ 어두운; @include border-radius (3px); ul 패딩 : 0; margin : 0; li list-style : none;  

래퍼의 너비는에서 값을 상속받습니다. $ 너비 변하기 쉬운. 배경색이 어두운 경우 5 % 기본 색상에서 테두리 색상이 더 어두워지는 반면 10 %. 이 색상은 Sass 색상 기능을 사용하여 수행됩니다..

vCard는 또한 3px Compass CSS3 Mixins을 사용하여 둥근 모서리의 반지름을 구합니다. 국경 - 반경 (3px).

바이오 섹션

이 자습서의 초반부에서 언급했듯이 vCard는 두 부분으로 나눌 수 있습니다. 아래의 중첩 된 스타일은 몇 가지 세부 정보 (이름, 전자 메일 및 전화 번호)가 포함 된 그림 프로필이 포함 된 첫 번째 섹션을 정의합니다..

 .바이오 border-bottom : 1px solid $ dark; 패딩 : $ 공간; @extend .box-sizing; img @extend .float-left; 디스플레이 : 블록; border : ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend .box-sizing; 색깔 : 어둡게 ($ 기초, 50 %); margin : 왼쪽 : $ space; 하단 : $ space / 2;  width : $ width - (($ space * 3) + $ img); li & : before width : $ space; 높이 : $ 공간; margin-right : $ space; font-family : "ModernPictogramsNormal";  & .name : before content : "f";  & .email : before content : "m";  & .phone : before content : "N";  

위 코드에서 우리가주의해야 할 필요가 있다고 생각하는 것이 있습니다. 너비 .세부 묘사 selector가이 방정식으로 지정됩니다. $ width - (($ space * 3) + $ img);.

이 방정식은 세부 사항을 동적으로 계산하는 데 사용됩니다. 폭 vCard 총 너비에서 그림 프로필 너비와 공백 (채우기 및 여백)을 뺀.

사회 부문

아래의 스타일은 vCard의 두 번째 섹션을위한 것입니다. 실제로 여기에는 일반 CSS와 차이점이 없으며, 지금은 중첩되어 있으며, 몇 가지 값은 변수로 정의됩니다.

 .social background-color : $ dark; 너비 : 100 %; 패딩 : $ 공간; @extend .box-sizing; ul text-align : center; li display : 인라인 블록; 너비 : 32px; 높이 : 32px; a 텍스트 장식 : 없음; 디스플레이 : 인라인 블록; 너비 : 100 %; 높이 : 100 %; 텍스트 들여 쓰기 : 100 %; white-space : nowrap; 오버플로 : 숨김;  

이 섹션에서는 이미지 스프라이트 기법을 사용하여 소셜 미디어 아이콘을 표시하고 컴퍼스는 더 빨리 작업을 수행 할 수있는 기능을 제공합니다.

우선, 우리는 아이콘을 특별한 폴더에 넣을 필요가 있습니다. /사회적인/, 예를 들면. 스타일 시트로 돌아가서 그 아이콘들을 다음과 연결하십시오. @수입 규칙.

 @import "social / *. png"; 

그만큼 사회적인/ 위의 아이콘은 우리가 아이콘을 저장 한 폴더를 나타냅니다. 이 폴더는 이미지 폴더 내에 중첩되어야합니다. 이제 이미지 폴더를 살펴보면 임의의 문자로 생성 된 스프라이트 이미지를 볼 수 있습니다. social-sc805f18607.png. 이 시점에서, 우리는 스타일을 다음 라인으로 적용 할 때까지 프론트 엔드에서 어떤 일도 일어나지 않습니다..

 @ 모든 사회 - 스프 라이트 포함; 

최종 결과

마지막으로, 모든 노력이 끝난 후 다음과 같은 결과를 볼 수 있습니다.

우리가 생각하면 500px 나중에 너무 넓어서 값을 변경하기 만하면됩니다. $ 너비 변수 - 예를 들어, 350px - 나머지는 “마술처럼” 조정해라. 색상 변수를 실험 해 볼 수도 있습니다..

• 데모보기
• 소스 다운로드

결론

이 튜토리얼에서는 Sass와 Compass를 사용하여 간단한 온라인 vCard를 작성하는 방법을 보여줍니다. 그러나 이것은 단지 예일뿐입니다. Sass와 Compass는 실제로 강력하지만 때로는 필요하지 않습니다. 예를 들어, 몇 페이지로 된 웹 사이트에서 작업 할 때 Sass와 Compass를 사용하면 줄이 조금 더 필요할 것입니다..

이 게시물은 우리의 Sass 시리즈를 닫고 우리는 당신이 그것을 즐겼기를 바랍니다. 이 주제와 관련하여 질문이 있으시면 아래 주저한 의견란에 추가하십시오..