Sass를 시작하는 방법

Sass 는 다른 프로그래밍 언어의 많은 기능 (예 : 함수, 변수 및 루프)을 CSS로 가져오고 믹스 인, 중첩 및 부분과 같은 고유 한 직관적 기능을 가져 오는 강력한 도구입니다.

말을 단계별로 그리는 방법

이 튜토리얼에서는 Sass 루프, 믹스 인 및 기능을 사용하여 소셜 아이콘을 만들 것입니다. 또한 Sass에서 사용할 수있는 강력한 중첩을 사용할 것입니다.

먼저 클래스 이름, 글꼴 참조 및 색상으로 구성된 소셜 아이콘을 생성하기 위해 Sass에서 목록을 만들고 나중에 도구 설명을 만들 것입니다.



믹스 인을 사용하여 재사용 가능한 미디어 쿼리를 만들고 픽셀 값을 em 값으로 바꾸는 함수를 만들 것입니다. 이를 위해 기본 글꼴 크기에 대한 변수도 생성합니다.

시스템 및 빌드 도구 요구 사항에 따라 Sass를 설치하고 사용하는 방법에는 여러 가지가 있습니다. 자세한 내용은 찾을 수 있습니다. 여기 – 그러나 우리는 가능한 한 단순하게 유지하기 위해 CodePen을 사용하여 Sass를 CSS로 컴파일 할 것입니다.

Sass의 힘을 진정으로 활용하고 특이성과 복잡성의 혼란에 빠지지 않으려면 CSS에 대한 확실한 이해가 필요합니다. 우리가 사용할 Sass의 특별한 특징은 SCSS (Sassy CSS)입니다. 즉, Sass 코드에서 여전히 중괄호 {}를 사용합니다.

튜토리얼 파일 받기

이 튜토리얼의 예제 파일을 다운로드하려면 다음으로 이동하십시오. FileSilo 에서 튜토리얼 옆에있는 무료 콘텐츠 및 무료 콘텐츠를 선택합니다. 참고 : 처음 사용자가 FileSilo를 사용하려면 등록해야합니다.

01. CodePen CSS 설정

CodePen CSS를 올바르게 설정하는 것이 핵심입니다.

CodePen CSS를 올바르게 설정하는 것이 핵심입니다.

가장 먼저해야 할 일은 새 펜 만들기 CodePen에서 CSS 편집기의 일부 기본 설정을 변경합니다. CSS Preprocessor를 SCSS로 변경하고 Normalize 및 Autoprefixer를 켭니다.

02. 코드 작성 시작

이제 우리는 코드 작성을 시작할 수있는 모든 것을 설정했습니다. HTML 편집기 내에서 컨테이너와 각 아이콘에 대한 링크와 아이콘을 포함하는 여러 항목을 내부에 생성합니다.

여기에 사용 된 이름은 CSS의 참조로 Sass 목록에 사용됩니다. 또한 클래스 이름에 BEM 명명 규칙을 사용할 것입니다.

...

03. 기본 스타일 설정

CSS 편집기로 이동하여 font-awesome을 포함하고 기본 글꼴 크기에 대한 변수를 설정하고 페이지에 대한 몇 가지 기본 스타일을 설정하는 것으로 시작합니다.

@import url(http://srt.lt/w8yT8); // Variables $base-font-size: 16px; // Basic Styling body { font-size: $base-font-size; ... }

04. 기본 기능 생성

다음으로 '$ base-font-size'변수를 사용하여 픽셀 값을 em 값으로 바꾸는 기본 함수를 만듭니다.

Sass의 함수는 '@function'뒤에 함수 이름과 함수를 수행하는 데 사용되는 입력을 사용하여 생성됩니다.

그런 다음 선언 내에서 '@return'을 사용하여 함수를 사용할 때 값을 출력합니다. 계산을 둘러싼 '# {}'는 보간 .

// Functions @function px-to-em($pixels) { @return #{$pixels/$base-font-size}em; }

05. 믹스 인 만들기

설정을 계속하면서 'px-to-em'함수를 사용하여 간단한 모바일 우선 미디어 쿼리를위한 믹스 인을 만들 것입니다.이 함수는 px 값을 전달하여 em 값을 반환합니다.

Mixin은 '@mixin'뒤에 mixin의 이름을 사용하여 생성됩니다. 그런 다음 선언 내에서 '@content'를 사용하여 나중에 코드베이스에서 호출 할 때 믹스 인에 넣은 코드를 출력합니다.

@mixin viewport--large { @media only screen and (min-width: px-to-em(1680px)) { @content; } } @mixin viewport--medium { @media only screen and (min-width: px-to-em(1080px)) { @content; } }

06. Sass 목록 설정

설정의 마지막 단계는 목록을 만드는 것입니다. Sass의 목록은 변수를 사용하여 생성됩니다. 그 후에 정확한 구문은 매우 느슨해져 다양한 그것을 정의하는 방법 .

변수 내에서 각 아이콘의 클래스 이름, 유니 코드 값 및 색상을 정의하고 괄호 안에 쉼표로 구분합니다.

그래픽 디자인 직업을 얻는 것이 왜 그렇게 어려운가요?
$icon-list: ( vimeo “f27d' #1ab7ea, twitter “f099' #1da1f2, ... github “f113' #333, rss “f09e' #f26522 );

07. 아이콘을 연속으로 표시

소셜 아이콘이 연속적으로 표시되도록 각 컨테이너에 간단한 CSS를 추가합니다.

.social__item { display: inline-block; margin-right: 0.05em; }

08. 공유 아이콘 스타일 만들기

출력되는 CSS의 양을 최소화하기 위해 CSS3 선택기를 사용하여 'icon'으로 시작하는 모든 클래스를 찾고이를위한 공유 스타일을 만듭니다.

[class^='icon'] { font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

09. 스타일 업 버튼 배경

동일한 방법을 사용하여 'em'에서 값을 정의하는 버튼에 대해 동일한 작업을 수행하여 나중에 컨테이너를 사용하여 크기를 조정할 수 있습니다.

[class^='social__icon'] { font-size: 1em; width: 2em; height: 2em; background-color: #333; color: white; text-decoration: none; border-radius: 100%; text-align: center; display: flex; align-items: center; justify-content: center; }

10. 아이콘에 대한 @each 루프

루프를 사용하여 각 소셜 아이콘에 대한 아이콘을 생성했습니다.

루프를 사용하여 각 소셜 아이콘에 대한 아이콘을 생성했습니다.

이제 우리는 목록을 사용하여 각 아이콘에 특정한 CSS를 생성 할 수있는 모든 기본 스타일을 갖게되었습니다.

공개적으로 표지 사진을 숨기는 방법

Sass에서 루프를 만들려면 '@each'를 사용하고 각 항목의 각 값에 대한 이름 ( '$ icon', '$ unicode'및 '$ icon-background')을 사용하고 그 뒤에 단어 'in'과 이름을 차례로 사용합니다. 목록의.

루프 내에서 HTML에서 만든 각 아이콘의 'before'유사 요소에 '$ unicode'값을 적용하여 이전에 만든 공유 스타일이 필요한 다른 모든 스타일을 처리 할 수 ​​있도록합니다.

@each $icon, $unicode, $icon-background in $icon-list { .icon--#{$icon} { &::before { content: $unicode; } } }

11. 배경색에 대한 @each 루프

배경색과 아이콘을 추가했습니다.

'@each'루프에 배경색과 아이콘을 추가했습니다.

이제 아이콘이 모두 작동하지만 여전히 대체 배경색이 있습니다. 이를 수정하기 위해 목록에 코드를 더 추가 할 것입니다. 위와 같은 방법을 사용하여 '$ icon'이름을 출력하지만 이번에는 'social__icon'클래스와 그 안에 '$ icon-background'색상을 출력합니다.

@each $icon, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { background-color: $icon-background; } }

12. 믹스 인 사용

믹스 인을 사용하여

믹스 인을 사용하여 컨테이너의 글꼴 크기를 업데이트하여 뷰포트 너비에 따라 아이콘 크기를 변경했습니다.

앞서 만든 믹스 인을 사용하고 'em'값을 사용하여 아이콘 스타일을 지정했기 때문에 컨테이너에 글꼴 크기를 적용하고 '@include'를 사용하는 미디어 쿼리 믹스 인을 사용하여이를 늘릴 수 있습니다. 미디어 쿼리에 포함 할 코드입니다.

.social__container { font-size: 1em; @include viewport--medium { font-size: 1.5em; } @include viewport--large { font-size: 2em; } }

13. 상호 작용 상태 및 내장 기능 추가

버튼이 마우스 또는 키보드를 사용하여 상호 작용할 때 배경색을 변경하여 버튼에 상호 작용을 추가 할 수 있습니다.

Sass에는 많은 내장 색상 기능 목록에서 설정 한 배경색을 가져 와서 검정색과 혼합하여 상호 작용할 때 버튼을 어둡게 할 수 있습니다.

icon--#{$icon} { background-color: $icon-background; &:hover, &:focus, &:active { background-color: mix(black, $icon-background, 15%); } }

14. 배경색 전환

또한 CSS의 '전환'속성을 활용하여 배경색 간의 차이를 애니메이션으로 만들 수 있습니다. 'all'값을 사용할 수 있지만 성능 측면에서 비용이 많이 들고 다른 타이밍과 타이밍 기능에서 다른 값을 전환 할 수 없습니다.

[class^='social__icon'] { ... transition: background-color 150ms ease-in-out ; }

15. 추가 전환 효과 추가

버튼과 상단 값에 '상대'위치를 추가하고 'transition'속성에 'top'을 추가하여 추가 상호 작용을위한 요소를 준비 할 수 있습니다.

[class^='social__icon'] { position: relative; top: 0; ... transition: background-color 150ms ease-in-out, top 250ms linear ; }

16. 상호 작용시 버튼을 위로 이동

이 상호 작용을 위해 그것을 생성하는 데 특별히 필요한 것이 없으므로 공유 클래스에 코드를 추가 할 수 있습니다. 음의 상단 값을 적용하고 윤곽선을 제거하면 상호 작용의 시각적 신호가 훨씬 더 명확 해집니다.

[class^='social__icon'] { ... &:hover, &:focus, &:active { outline: none; top: -0.25em; } }

17. 그림자 추가

전환 속성을 사용하여 버튼과의 상호 작용에 애니메이션을 적용했습니다. 버튼을 위로 이동하고 배경을 어둡게하고 그림자를 추가합니다.

mac book pro 13 레티 나 케이스
전환 속성을 사용하여 버튼과의 상호 작용에 애니메이션을 적용했습니다. 버튼을 위로 이동하고 배경을 어둡게하고 그림자를 추가합니다.

또한 동일한 방법을 사용하여 '상자 그림자'를 만들고 애니메이션을 적용 할 수 있습니다. 상호 작용에 약간의 깊이를 추가하고 상단 값과 동시에 그림자의 수직 높이를 변경합니다.

box-shadow: 0 0 0.25em -0.25em rgba(0,0,0,0.2); &:hover, &:focus, &:active { ... box-shadow: 0 0.5em 0.25em -0.25em rgba(0,0,0,0.3); }

18. 툴팁 추가

CSS로 툴팁을 쉽게 추가하여 사용자에게 명확성을 더할 수 있습니다. 가장 먼저 할 일은 목록에 도구 설명 값을 추가하는 것입니다. 필요한 경우 공백을 사용할 수 있도록 따옴표로 묶으십시오.

$icon-list: ( vimeo “Vimeo' “f27d' #1ab7ea, twitter “Twitter' “f099' #1da1f2, ... github “GitHub' “f113' #333, rss “RSS' “f09e' #f26522, );

19. @each 루프 수정

목록에 추가 되었기 때문에 툴팁 값 ( '$ name')을 포함하도록 '@each'루프를 수정해야합니다. 그런 다음 해당 이름을 버튼의 'before pseudo'요소의 내용으로 출력 할 수 있습니다.

@each $icon, $name, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { ... &::before { content: '#{$name}'; } } }

20. 이전 의사 요소 스타일 지정

우리

툴팁에 몇 가지 기본 스타일을 다시 추가했습니다.

이제 화면에 각 요소의 이름이 표시되어 요소의 스타일을 지정하고 배경색, 패딩 및 기타 스타일링 요소를 추가하고 요소의 위치를 ​​지정하고 전환을 준비하고 상호 작용시 불투명도 및 상단 값을 수정해야합니다. .

&::before { ... top: -3.5em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::before { opacity: 1; top: -2.5em; } }

21. 이후 유사 요소 스타일 지정

우리는 사용할 것입니다 CSS 삼각형 다른 타이밍에서 불투명도 및 상단 값을 전환하여 툴팁의 하단을 생성하고 전환을 위해 요소를 다시 배치합니다.

지연을 추가하면 툴팁이 페이드 인되고 제자리로 이동하는 애니메이션을 얻습니다.

&::after { ... top: -1.9em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::after { opacity: 1; top: -0.9em; } }

튜토리얼 단계의 CodePen 컬렉션을 찾을 수 있습니다. 여기 .

이 기사는 원래 Web Designer 잡지 264 호에 실 렸습니다. 여기서 구입 .

더 읽어보기 :