모던 CSS와 Sass를 활용한 실무 튜토리얼

CSS 프리프로세서 덕분에 CSS를 훨씬 효율적으로 쓸 수 있습니다. 이러한 프리프로세서가 무엇이며, 어떤 것들이 있는지, 그리고 이 시리즈에서 Sass를 선택한 이유는 이 동영상에서 보여줍니다.

Sass를 사용하려면 먼저 설치해야 합니다. 그리고 그것의 전제 조건은 Ruby입니다. Ruby와 Sass를 설치하는 방법은 이 동영상에서 보여집니다. 그런 다음 Sass 설치가 제대로 되었는지 바로 테스트할 수 있습니다.

Sass를 실제로 사용할 수 있도록 CSS 파일로 변환해야 합니다. Watch 명령어를 통해 파일 또는 디렉토리 내의 변경 사항을 쉽게 감지할 수 있습니다.

@import를 사용하여 SCSS 파일을 가져와 병합할 수 있습니다. 파일 이름 앞에 밑줄이 있는 경우의 이유는 이 비디오의 한 측면입니다.

Sass에서는 변수를 선언할 수 ​​있습니다. 이 개념은 전통적인 CSS에서는 사용할 수 없지만, Sass에서는 스타일 시트를 효과적으로 개발하는 뛰어난 도구입니다.

네스팅 덕분에 Sass 문법을 CSS에서 일반적인 것보다 훨씬 간결하게 유지할 수 있습니다. 또한 중첩은 코드를 훨씬 더 명확하게 작성하는 데 도움이 됩니다.

@extend을 사용하면 한 셀렉터에서 다른 셀렉터로 CSS 속성 세트를 전달할 수 있습니다. 이는 Sass 파일을 가볍게 유지하는 데 도움이 됩니다.

플레이스홀더 셀렉터는 모듈의 정의를 가능하게 합니다. 이 모듈화는 Sass 구문을 논리적 블록으로 분할하여 다른 위치에서 포함할 수 있습니다.

믹싱은 예를 들어 작업 흐름을 상당히 간단하게 만들 수있는 함수입니다. 이 비디오에서는 자체믹싱을 정의하고 최종적으로 적용하는 방법을 보여줍니다.

이 비디오에서 얘기하는 선택자는 요소의 부모 요소에 액세스할 수 있게 해줍니다. 이 선택자는 CSS에 없으며 따라서 매우 큰 가치를 제공합니다.

Sass는 for 루프의 사용을 가능하게 합니다. 이는 Sass에서 매우 간단하게 작동하며 예를 들어, 자체 그리드 시스템 정의에 사용될 수 있습니다.

`For-Schleifen`을 사용하는 것 외에도 `Each-Schleifen`과 `While-Schleifen`을 Sass에서 사용할 수 있습니다. 이를 자동화에 어떻게 활용할 수 있는지 이 동영상이 보여줍니다.

PHP 및 JavaScript와 같은 언어에서는 if와 else를 사용하여 다른 이벤트에 대응할 수 있는 기능이 있습니다. 실제로 Sass에서도 이와 같은 기능이 있습니다. 이를 활용하는 방법은 이 비디오에서 보여줍니다.

당신들은 Sass에서 계산할 수 있습니다. 예를 들어 글꼴 크기를 정의할 때 유용합니다. 적절한 연산자 덕분에 귀하만의 그리드 시스템을 만들 수도 있습니다.

물론 Sass에서 색상을 정의할 수 있습니다. 그러나 Sass는 일반적인 CSS보다 이 분야에서 훨씬 더 나아갑니다. 해당 기능 덕분에 예를 들어 색상을 쉽게 조작할 수 있습니다.

컴파스 프레임워크는 Sass의 기능을 한층 더 확장합니다. 이 첫 번째 비디오는 컴파스를 설치하고 활용하는 방법을 보여줍니다.

Compass 프레임워크 작업에 대한 중요한 정보원인 Compass의 프로젝트 웹사이트입니다. CSS3 Compass 기능으로 설명하여 문서 사용 방법을 보여드리겠습니다.

예제는 Compass를 사용하여 얼마나 쉽게 사물을 구현할 수 있는지 보여줍니다. 이 시리즈의 끝에서 다른 Sass 프레임워크를 살펴볼 것입니다. Susy는 가벼운 그리드 시스템을 제공합니다.