CSS 전처리기가 필요한 이유와 이점 간단하게 시작하는 LESS 전처리기

2012년 Johnathan Croom이 작성한 NetTuts+ 기사.

이 기사의 주요 목적은 Sass, LESS 및 Stylus에 설명된 세 가지 전처리기 중 하나를 사용하는 이점을 보여주는 것입니다. 이 리뷰는 웹 디자인의 이러한 측면을 이제 막 발견한 초보자에게 적합합니다.

이 기사에서는 세 가지 전처리기(Sass, LESS 및 Stylus)를 사용할 때의 장점과 이점을 살펴보겠습니다.

소개

CSS 전처리기는 브라우저 간 호환성을 손상시키지 않으면서 CSS 스타일 시트에 강력함과 유연성을 추가하려는 유일한 목적으로 만들어졌습니다. 모든 전처리기는 구문을 사용하여 생성된 코드를 아무리 오래된 브라우저라도 이해하고 사용하는 표준 CSS 코드로 컴파일합니다( 브라우저) 아니였다.

전처리기가 CSS 스타일 시트에 가져오는 많은 이점이 있으며 이 기사에서는 잘 알려진 것과 덜 일반적인 것 중 몇 가지만 살펴보겠습니다. 리뷰를 시작하겠습니다.

통사론

CSS 전처리기에서 코드를 작성할 때 가장 중요한 부분은 구문입니다. 다행스럽게도 우리가 살펴볼 세 가지 전처리기의 구문은 모두 CSS와 유사합니다.

Sass & LESS

Sass 및 LESS 전처리기에는 모두 표준 CSS 구문이 있습니다. 이렇게 하면 기존 CSS 코드를 이러한 전처리기의 구문으로 빠르고 쉽게 변환할 수 있습니다. Sass는 파일 확장자를 사용합니다.

Sass 또는 LESS 구문의 일반 파일 모양은 다음과 같습니다.

이것이 Sass(SCSS) 또는 LESS로 완벽하게 변환되는 일반 CSS 구문임을 분명히 알 수 있습니다.

Sass(SCSS)에는 세미콜론과 중괄호를 생략하는 이전 버전의 Sass 구문도 있다는 점에 유의하는 것이 중요합니다.

이 구문은 여전히 ​​실제로 사용할 수 있지만 더 이상 사용되지 않으며 예제에서는 사용하지 않습니다.

Sass 구문( 구 버전) 다음과 같이:

첨필

해당 파일의 경우 이 전처리기는 확장자를 사용합니다.

스타일러스 구문 예:

위에 표시된 모든 구문은 유효하며 올바른 CSS로 컴파일됩니다. 예를 들어, 다음 코드는 오류 없이 표준 CSS로 컴파일됩니다.

변수

전처리기에서 변수는 CSS 스타일 파일 내에서 선언되고 사용됩니다. 변수는 CSS에서 허용하는 모든 값(색상, 숫자 또는 텍스트)을 가질 수 있으며 CSS 문서의 어디에서나 참조할 수 있습니다.

사스

Sass 전처리기에서 변수는 기호로 선언됩니다.

더 적은

LESS의 변수는 변수 이름 앞에 기호가 있다는 점을 제외하면 Sass와 완전히 동일합니다.

첨필

Stylus의 변수는 선언하기 위해 기호가 필요하지 않지만 여전히 기호를 사용할 수 있습니다.

즉, 다음 작업은 수행되지 않습니다.

컴파일된 CSS

예제로 제시된 각 파일은 정확히 동일한 CSS 코드로 컴파일됩니다. 상상력을 발휘하여 변수가 얼마나 유용한지 상상할 수 있습니다.

덕분에 색상 값을 설정한 다음 CSS 코드에서 20번 반복할 필요가 없습니다. 또는 사이트의 너비를 변경하도록 작업이 설정되었으며 이를 위해 이 값을 찾기 위해 코드를 "샅샅이 뒤져야" 합니다.

다음은 컴파일 후 CSS 코드입니다.

네스팅

CSS 코드가 동시에 동일한 부모를 가진 여러 요소에 액세스하는 작업을 수행하는 경우 해당 부모를 반복해서 작성하는 것은 지루한 작업입니다.

예를 들면 다음과 같습니다.

대신 전처리기의 힘을 사용하여 모든 자식 선택자를 부모 요소의 괄호 안에 넣을 수 있습니다. 또한, 상징

Sass, LESS 및 스타일러스

세 개의 전처리기 모두 중첩 선택기에 대해 정확히 동일한 구문을 사용합니다.

컴파일된 CSS

아래는 위 코드의 CSS 컴파일 결과입니다. 우리가 처음에 작성한 코드와 비교해보십시오. 완전히 동일합니다. 하지만 전처리기를 활용하는 것이 얼마나 편리한지!

믹스인

블렌딩은 요소별 스타일이나 브라우저 접두사를 만들 때 특히 유용합니다. 믹스인이 CSS 선택기 내에서 호출되면 믹스인의 인수가 인식되고 해당 스타일이 이를 호출한 선택기에 적용됩니다.

메모. 번역기: 아래 예제에서 세 전처리기 모두에 대해 CSS 선택기 내에서 믹스인을 선언하고 호출하는 구문의 차이점에 주의해야 합니다.

사스

더 적은

스타일

컴파일된 CSS

세 전처리기 모두에서 컴파일한 결과는 동일한 CSS 코드입니다.

계승

"클래식" 방식으로 CSS 스타일을 작성할 때 HTML 문서의 여러 요소에 동일한 속성을 적용하려면 다음과 같은 코드를 작성합니다.

모든 것이 훌륭하게 작동합니다. 그러나 이러한 선택자에 대해 개별적으로 스타일을 작성하려면 각각에 대해 별도의 규칙을 만들어야 합니다. 그리고 즉시 스타일 시트 코드가 엉성해지고 유지하기 어려워집니다.

반대로 상속이 사용됩니다. 상속은 일부 CSS 선택기가 다른 선택기에서 속성을 상속하는 기능입니다.

메모. 변환기: 지시문을 사용하여 CSS 선택기 내에서 상속을 연결(선언)하기 위한 동일한 구문에 주의하십시오.

1

@연장하다

.

Sass & 스타일러스

컴파일된 CSS

더 적은

LESS 전처리기는 Sass 또는 Stylus 방식의 상속을 완전히 지원하지 않습니다. 단일 속성 집합에 여러 선택기를 추가하는 대신 상속은 인수가 없는 혼합으로 처리됩니다.

각 선택기에 대해 스타일을 가져옵니다. 이 접근 방식의 단점은 컴파일된 CSS 스타일에서 속성 행이 지속적으로 반복된다는 것입니다.

상속이 있는 LESS 코드는 다음과 같습니다.

컴파일된 CSS

코드에서 명확하게 알 수 있듯이 클래스 스타일

가져오기

CSS 커뮤니티에서 지시문을 사용하여 스타일을 가져오려면

세 전처리기 중 하나에서 한 파일을 다른 파일로 가져오면 실제로 컴파일할 때 한 파일의 코드가 다른 파일에 삽입되어 단일 CSS 파일이 됩니다.

메모. 번역기: 즉, 전처리기에서 여러 파일에서 하나의 파일을 컴파일하려면 가져오기가 필요합니다. 표준 CSS에서 가져오기는 한 코드를 다른 코드로 대체합니다.

지시문을 사용하여 표준 연결로 파일을 컴파일할 때

컴파일된 CSS

색상 기능

"색상" 함수는 컴파일 시 색상을 변환하도록 설계되었습니다. 이러한 기능은 그라디언트를 만들 때 매우 유용합니다.

사스

위의 코드는 Sass의 짧은 색상 함수 목록입니다. 사용 가능한 모든 기능의 전체 목록은 Sass 문서에 있습니다.

"색상" 함수는 코드에서 색상 작업을 하려는 모든 곳에서 사용할 수 있습니다. 간단한 예 - 코드에서 색상 디밍 기능이 추가로 적용되는 색상이 있는 변수가 선언됩니다.

더 적은

LESS 전처리기의 기능 목록은 LESS Documentation 프로젝트 공식 웹사이트에서 확인할 수 있습니다.

다음은 LESS에서 "색상" 기능을 적용할 수 있는 방법의 예입니다.

첨필

모든 스타일러스 전처리기 색상 기능의 전체 목록은 스타일러스 문서 프로젝트 사이트에서 사용할 수 있습니다.

Stylus에서 "색상" 기능을 사용하는 예:

산술 연산

전처리기 덕분에 CSS 코드 내에서 산술 연산을 수행하는 것이 이제 간단하고 쉬워졌습니다. 이 기능은 종종 유용합니다.

메모. 번역기: CSS3의 기능을 이름으로 언급할 가치가 있습니다.

1

계산()

, CSS 코드 내에서 간단한 산술 연산을 수행할 수도 있습니다.

Sass, LESS 및 스타일러스

실용적인 예

그래서 세 가지 전처리기가 모두 무엇을 어떻게 할 수 있는지에 대한 요점을 살펴보았습니다. 그러나 우리는 이러한 가능성을 실제로 적용한 적이 없습니다. 다음은 전체 코드를 크게 개선하면서 전처리기를 사용하는 실제 웹 애플리케이션 목록입니다.

브라우저 접두사

전처리기 사용의 이점에 대한 가장 명확한 예 중 하나는 전처리기를 사용하여 브라우저 접두사를 사용하여 속성을 작성하는 것입니다. 일단 브라우저 접두어를 지원하는 믹스인을 생성하면 일상적인 작업에서 벗어날 수 있습니다.

예를 들어, 세 전처리기 모두에 대해 블록 코너 라운딩 혼합을 생성해 보겠습니다.

사스

더 적은

첨필

컴파일된 CSS

3D 텍스트

CSS 속성을 사용하여 텍스트에 3D 효과 만들기

믹스인과 색상 기능을 사용하여 3D 텍스트를 만들고 즉시 색상을 변경할 수 있습니다.

사스

더 적은

첨필

Stylus 예제에서 속성을 쓰기로 선택했습니다.

컴파일된 CSS

스피커

이러한 변수에 대한 변수 및 숫자 값의 사용은 CSS 전처리기의 가능성에 대해 처음 알게 되었을 때 마음에 떠올랐습니다. 변수 내부의 레이아웃에 대한 너비를 선언하면 해당 너비를 변경하는 작업을 수행합니다( 필요하다면) 간단하고 빠름:

사스

더 적은

첨필

컴파일된 CSS

일부 전처리기 트릭

CSS 전처리기로 작업할 때 몇 가지 요령이 있습니다. 이 기사에서는 그중 일부만 다룰 것입니다. 그러나이 주제에 관심이 있다면 공식 문서를주의 깊게 읽거나 코딩하는 동안 매일 전 처리기를 사용하기 시작하는 것이 좋습니다.

에러 메시지

오랫동안 CSS 코드를 작성해 왔다면 어떤 식으로도 찾을 수 없는 오류가 코드에 스며드는 상황에 직면했을 것입니다. 정확히 같은 상황에 처해 있다면 기쁘게 해드릴 수 있습니다. 이러한 문제를 해결할 방법이 있습니다.

CSS 전처리기는 코드의 오류를 보고할 수 있으며 오류를 보고하는 것은 매우 쉽습니다. 이 경우 전처리기 자체가 CSS 코드에서 오류가 있는 위치를 알려줍니다( 그리고 모두가 행복하다).

세 전처리기 모두에서 이 기능에 관심이 있는 경우 이 문서에서 이 설정을 수행하는 방법을 자세히 설명합니다.

절대적으로 모든 숙련된 레이아웃 디자이너는 전처리기를 사용합니다. 예외는 없습니다. 이 활동에서 성공하고 싶다면 이 프로그램을 잊지 마십시오. 언뜻보기에 그들은 초보자에게 조용한 공포를 유발할 수 있습니다. 이것은 이미 프로그래밍과 너무 유사합니다! 사실 CSS 전처리기의 모든 기능은 하루 정도면, 노력하면 몇 시간이면도 알아낼 수 있습니다. 앞으로 그들은 당신의 삶을 크게 단순화시킬 것입니다.

CSS 전처리기는 어떻게 탄생했는가

이 기술의 기능을 더 잘 이해하기 위해 웹 페이지의 시각적 표현 개발 역사에 대해 간략하게 살펴보겠습니다.

인터넷의 대량 사용이 막 시작되었을 때 스타일 시트가 존재하지 않았습니다. 설명서는 브라우저에만 의존했습니다. 그들 각각은 특정 태그를 처리하는 데 사용되는 고유한 스타일을 가졌습니다. 따라서 페이지를 여는 브라우저에 따라 페이지가 다르게 보였습니다. 결과는 혼란, 혼란, 개발자 문제입니다.

1994년 노르웨이 과학자 Haakon Lee는 HTML 문서와 별개로 페이지의 모양을 지정하는 데 사용할 수 있는 스타일 시트를 개발했습니다. 이 아이디어는 W3C 컨소시엄의 대표자들이 좋아했으며 즉시 개선하기 시작했습니다. 몇 년 후 CSS 사양의 첫 번째 버전이 게시되었습니다. 그런 다음 지속적으로 개선되고 세련되었습니다 ... 그러나 개념은 동일하게 유지되었습니다. 각 스타일에는 특정 속성이 부여됩니다.

CSS 테이블을 사용하는 것은 항상 문제였습니다. 예를 들어 레이아웃 디자이너는 종종 속성을 정렬하고 그룹화하는 데 어려움을 겪었고 상속도 그렇게 간단하지 않습니다.

그리고 2000년대가 왔다. 전문 프론트엔드 개발자는 스타일을 사용한 유연하고 동적인 작업이 중요한 마크업을 점점 더 많이 다루기 시작했습니다. 그 당시 존재했던 CSS에는 새로운 브라우저 기능에 대한 접두사 및 추적 지원이 필요했습니다. 그런 다음 JavaScript 및 Ruby의 전문가가 비즈니스에 착수하여 새로운 기능을 추가하는 CSS용 추가 기능인 전처리기를 만들었습니다.

초보자를 위한 CSS: 전처리기의 기능

여러 기능을 수행합니다.

• 브라우저 접두사 및 해킹을 통합합니다.

• 구문을 단순화하십시오.

• 중첩된 선택자를 오류 없이 사용할 수 있습니다.

• 스타일링 로직을 개선합니다.

즉, 전처리기는 CSS의 가능성에 프로그래밍 논리를 추가합니다. 이제 스타일링은 일반적인 스타일 열거가 아니라 변수, 함수, 혼합, 루프, 조건과 같은 몇 가지 간단한 트릭과 접근 방식을 사용하여 수행됩니다. 또한 수학을 사용할 기회가있었습니다.

이러한 추가 기능의 인기를 보고 W3C는 점진적으로 추가 기능을 CSS 코드에 추가하기 시작했습니다. 예를 들어, 이것은 많은 브라우저에서 지원하는 calc() 함수가 사양에 나타나는 방식입니다. 곧 변수를 설정하고 믹스인을 생성하는 것이 가능해질 것으로 예상됩니다. 그러나 이것은 먼 미래에 일어날 것이며 전처리기는 이미 여기에 있고 이미 훌륭하게 작동하고 있습니다.

인기 있는 CSS 전처리기. 사스

2007년에 개발되었습니다. 처음에는 HTML 템플릿 엔진인 Haml의 구성 요소였습니다. Ruby on Rails 개발자는 CSS 요소에 대한 새로운 제어 기능을 사용하여 모든 곳에 배포하기 시작했습니다. Sass는 이제 모든 전처리기에 포함된 수많은 기능을 가지고 있습니다: 변수, 중첩 선택자, 믹스인(하지만 인수를 추가할 수 없었습니다).

Sass에서 변수 선언하기

변수는 $ 기호로 선언됩니다. 예를 들어 "$borderSolid: 1px solid red;"와 같이 속성과 해당 세트를 저장할 수 있습니다. 이 예제에서는 borderSolid라는 변수를 선언하고 그 안에 1px solid red 값을 저장했습니다. 이제 CSS에서 1px 너비의 빨간색 테두리를 만들어야 하는 경우 속성 이름 뒤에 이 변수를 지정하기만 하면 됩니다. 한번 선언된 변수는 변경할 수 없습니다. 여러 내장 함수를 사용할 수 있습니다. 예를 들어 값이 #FF5050인 $redColor 변수를 선언해 보겠습니다. 이제 CSS 코드에서 일부 요소의 속성에서 이를 사용하여 글꼴 색상을 설정합니다: p( color: $redColor; ). 색상을 실험하고 싶습니까? 어둡게 하거나 밝게 하는 기능을 사용합니다. 이것은 다음과 같이 수행됩니다: p ( color: darken($redColor, 20%); ). 이렇게 하면 redColor가 20% 더 밝아집니다.

네스팅

이전에는 중첩을 나타내기 위해 길고 어색한 구조를 사용해야 했습니다. p를 포함하는 div가 있고 그 안에 span이 있다고 상상해 봅시다. div의 경우 글꼴 색상을 빨간색, p는 노란색, 범위는 분홍색으로 설정해야 합니다. 일반 CSS에서는 다음과 같이 수행됩니다.

CSS 전처리기의 도움으로 모든 것이 더 간단하고 간결해졌습니다.

요소는 문자 그대로 다른 요소 안에 중첩됩니다.

전처리기 지시문

@import 지시문을 사용하여 파일을 가져올 수 있습니다. 예를 들어 글꼴 스타일을 선언하는 fonts.sass 파일이 있습니다. 기본 style.sass 파일에 포함합니다: @import 'fonts'. 준비가 된! 하나의 큰 스타일 파일 대신 필요한 속성에 빠르고 쉽게 액세스하는 데 사용할 수 있는 여러 파일이 있습니다.

믹스인

가장 흥미로운 아이디어 중 하나입니다. 한 줄에 전체 속성 집합을 설정할 수 있습니다. 다음과 같이 작업하십시오.

@mixinlarge글꼴(

font-family: 'Times New Roman';

글꼴 크기: 64px;

선 높이: 80px;

글꼴 두께: 굵게;

페이지의 요소에 혼합을 적용하려면 @include 지시문을 사용합니다. 예를 들어 h1 제목에 적용하려고 합니다. 결과는 다음 구성입니다. h1( @include: largeFont; )

믹스인의 모든 속성은 h1 요소에 할당됩니다.

전처리기 적게

Sass 구문은 프로그래밍을 연상시킵니다. 초보자 CSS 학습자에게 더 적합한 옵션을 찾고 있다면 Less를 확인하세요. 2009년에 만들어졌습니다. 주요 기능은 기본 지원이므로 프로그래밍에 익숙하지 않은 레이아웃 디자이너가 쉽게 마스터할 수 있습니다.

변수는 @ 기호로 선언됩니다. 예: @fontSize: 14px;. 중첩은 Sass에서와 동일한 원리로 작동합니다. 믹스인은 다음과 같이 선언됩니다: .largeFont() ( font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; ). 연결하기 위해 전처리기 지시문을 사용할 필요가 없습니다. 선택한 요소의 속성에 새로 만든 믹스인을 추가하기만 하면 됩니다. 예: h1( .largeFont; ).

첨필

다른 전처리기. Jade, Express 및 기타 유용한 제품을 세상에 제공한 동일한 저자가 2011년에 만들었습니다.

변수는 명시적으로 또는 암시적으로 두 가지 방법으로 선언할 수 있습니다. 예: font = 'Times New Roman'; 암시적 옵션입니다. 그러나 $font = 'Times New Roman'은 명시적입니다. 믹스인은 암시적으로 선언되고 포함됩니다. 구문은 redColor() color red입니다. 이제 요소에 추가할 수 있습니다(예: h1 redColor();).

언뜻 보면 Stylus가 혼란스러워 보일 수 있습니다. "네이티브" 대괄호와 세미콜론은 어디에 있습니까? 그러나 그것에 뛰어들자마자 모든 것이 훨씬 더 명확해집니다. 그러나 이 전처리기를 사용하여 장기간 개발하면 고전적인 CSS 구문을 사용하지 않을 수 있습니다. "깨끗한" 스타일로 작업해야 할 때 때때로 문제가 발생합니다.

어떤 전처리기를 선택할 것인가?

정말... 상관없어요. 모든 옵션은 거의 동일한 기능을 제공하며 각각의 구문만 다릅니다. 다음을 수행하는 것이 좋습니다.

• 당신이 프로그래머이고 코드와 같은 스타일로 작업하고 싶다면 Sass를 사용하세요.
• 당신이 레이아웃 디자이너이고 일반 레이아웃과 같은 스타일로 작업하고 싶다면 Less에 주의를 기울이십시오.
• 미니멀리즘을 좋아한다면 Stylus를 사용하세요.

모든 옵션에 대해 개발을 더욱 단순화할 수 있는 수많은 흥미로운 라이브러리를 사용할 수 있습니다. Sass 사용자는 많은 기능이 내장된 강력한 도구인 Compass를 살펴보는 것이 좋습니다. 예를 들어 설치 후에는 공급업체 접두사에 대해 다시는 걱정할 필요가 없습니다. 네트워크 작업이 더 쉽습니다. 색상, 스프라이트 작업을 위한 유틸리티가 있습니다. 이미 발표된 여러 믹스인을 사용할 수 있습니다. 이 도구를 며칠 동안 사용하면 앞으로 많은 시간과 노력을 절약할 수 있습니다.

작성자: css 전처리기는 오랫동안 이야기되어 왔습니다. 많은 개발자들이 이미 프로젝트 개발에 사용하고 있습니다. 전처리기에 대해 들어봤거나 읽은 적이 있지만 css 코드를 작성할 때 전처리기가 어떤 이점을 주는지 이해하지 못하는 사람들이 있습니다.

많은 사람들에게 전처리기는 "비밀" 기술이며 그 이점은 매우 조건적이고 명확하지 않습니다. 이 기사에서는 전처리기가 무엇인지, 무엇을 위한 것인지, 웹 개발자에게 어떻게 도움이 되는지 간단한 용어로 설명하겠습니다.

CSS 전처리기란 무엇입니까?

CSS 전처리기는 새로운 구문 구성으로 표준 CSS의 기능을 확장하는 CSS 추가 기능입니다.

즉, "혁신적인 슈퍼 기술"이 아닙니다. 이것이 CSS에 권한을 부여하는 것입니다. 이는 일상적인 일상 작업을 자동화하고 개발 속도를 높일 수 있는 것입니다.

전처리기는 전처리기 언어로 작성된 코드를 깨끗하고 유효한 CSS 코드로 변환합니다. 그리고 출력에서 ​​깨끗하고 유효한 교차 브라우저 코드를 얻습니다. 전 처리기 작업 방식은 아래에서 볼 수 있습니다.

전처리기는 어떻게 삶을 더 쉽게 만들어 줍니까?

전처리기를 사용하면 CSS 코드 작성 속도를 높이고 향후 지원을 단순화할 수 있습니다.

예를 들어 보겠습니다. 이 사이트는 빨간색 글꼴을 사용합니다. 순수한 CSS를 사용하면 각 요소에 대해 개별적으로 이 색상을 여러 번 설정해야 합니다. 시간이 지남에 따라 빨간색 음영을 변경하기로 결정한 경우 각 요소에 대해 변경해야 합니다. 전처리기를 사용하여 색상은 변수에 한 번 할당되며 이 변수는 이미 각 요소에 할당됩니다. 이번에 색상의 음영을 변경하기로 결정했다면 한 곳에서만 변경하면 됩니다.

이러한 예는 매우 자주 발생합니다. 그리고 처음에 언급했듯이 이 예제에서는 전처리기를 사용하는 데 따른 이점이 많지 않습니다. 모든 코드 편집기에서 키보드 단축키 "ctrl" + "F"를 누르고 색상 코드 "#ff0000"을 찾아 "#00ff00"으로 바꿀 수 있습니다. 그리고 마우스 클릭 한 번으로 모든 곳의 색상이 빨간색에서 녹색으로 바뀝니다.

그렇다면 전처리기가 실제로 우리에게 도움이 되는 것은 무엇일까요?

전처리기는 어떤 문제를 해결합니까?

전처리기는 중첩 선택기, 수학 함수, 상위 선택기에 대한 참조, 코드에서 오류가 발생한 위치와 이유를 알려주는 오류 메시지와 같은 기능 덕분에 시간을 절약하고 많은 일상적인 작업을 수행합니다.

실제 사례를 통해 이 모든 것이 어떻게 도움이 되는지 살펴보겠습니다.

지속적으로 추가되고 개선되는 대규모 또는 매우 오래된 프로젝트에서 CSS 스타일은 자주 변경될 수 있습니다. 그리고 스타일 파일에 수천 줄의 코드가 포함되어 있으면 css 편집이 매우 불편합니다. 스타일을 논리 블록으로 나누고 각 스타일 블록이 별도의 파일에 있으면 훨씬 더 편리할 것입니다.

전처리기는 사용자의 노력 없이 이 문제를 해결합니다. 프로젝트에 여러 전처리기 파일이 있을 수 있으며 컴파일 후 자동으로 병합되어 결과적으로 하나의 "아름다운" css 파일을 얻게 됩니다.

CSS의 또 다른 문제는 스타일과 선택자의 중복입니다. 프로젝트가 진행됨에 따라 재사용할 수 있는 일부 스니펫이 나타납니다. 약간만 다른 단조로운 선택자가 많이 있을 수도 있습니다. 결과적으로 블록을 이동하거나 일부 블록의 클래스 이름을 변경하면 많은 선택기를 편집해야 합니다.

믹스인은 전처리기에서 이 문제를 해결합니다. 믹스인은 매개변수가 있든 없든 필요에 따라 재사용할 수 있는 일종의 CSS를 생성하는 함수입니다.

다음 문제는 종속성 문제입니다. 예를 들어, 스타일에 설정된 블록 너비가 있고, 다른 매개변수, 다른 블록에 대한 들여쓰기 등이 이에 따라 달라집니다. 하나의 매개변수를 올바르게 변경하려면 그에 의존하는 모든 매개변수를 수정해야 합니다.

이 문제는 전처리기의 변수로 매우 쉽게 해결됩니다.

위의 모든 것 외에도 전처리기를 사용할 때 css 파일에서 오류가 발생할 위험을 완전히 제거하고 보다 깨끗하고 논리적이며 브라우저 간 css를 얻을 수 있습니다.

전처리기의 이점

전처리기가 대처하는 데 도움이 되는 레이아웃 어려움에 따라 다음과 같은 전처리기의 장점을 명명할 수 있습니다. 변수 사용, 중첩, 믹스인(mixins), 상속 등 - 이것은 모두 이해할 수 있습니다. 그러나 무엇보다도 전처리기에 대한 지식이 보수가 좋은 직업을 찾고, 경력 사다리를 도약하고, 수입을 최소한 두 배로 늘릴 수 있는 기회를 열어준다는 사실에 주목하고 싶습니다.

사이트의 전처리기에 대한 지식 없이 웹 스튜디오가 레이아웃 디자이너에게 제공하는 급여를 살펴보겠습니다. hh.ru:

그리고 웹 스튜디오가 같은 사이트에서 전처리기에 대한 지식을 가진 코더에게 제공하는 급여는 다음과 같습니다.

보시다시피 전처리기 지식이 없는 최고 임금과 전처리기 지식이 있는 최저 임금은 1.5배 차이가 납니다. 그리고 평균 수치를 보면 지불액이 최소 2-3 배 다릅니다!

또한 모든 전 처리기를 알 필요가 없기 때문에 다른 점을 알 수 있습니다. Sass와 Less라는 두 가지 가장 인기 있는 전처리기를 아는 것으로 충분합니다.

결론

전처리기는 개발자의 삶을 진정으로 더 쉽게 만들고 레이아웃 디자이너의 일상적인 문제를 신속하게 해결하고 일상적인 작업을 대신할 수 있습니다.

전처리기를 알고 매일 사용하지 않거나 필요에 따라 사용하는 것이 좋습니다. 전처리기를 모르고 흥미로운 고임금 프로젝트를 놓치거나 고임금 직업으로 옮길 기회를 놓치는 것보다.

추신개발에 전처리기를 사용합니까? 댓글에 어떤 전처리기를 사용하십니까? 아직 사용하지 않는다면 그 이유는 무엇입니까? 전처리기를 사용할 계획입니까?

"Sass 및 Less 전처리기" 과정의 비디오 프레젠테이션. 프런트엔드 개발 자동화 및 단순화»

질문이 있으신가요?

HTML 및 CSS를 사용하지 않고는 디자인 레이아웃 구현이 불가능합니다. 마크업 언어를 사용하여 필요한 요소에서 템플릿을 스케치할 수 있다면 CSS는 소스 코드에서와 같이 이 템플릿을 원하는 형식으로 변환합니다. 순수한 CSS의 도움으로 고객이 원하는 방식으로 페이지를 만들 수 있는 것 같습니다.

그러나 누군가가 단일 CSS 파일을 열고 무언가를 조정하려고 시도하는 경우 코드를 읽고, 편집하고, 구조화하고, 이해할 수 있다고 확신하십니까? 프로젝트가 거대하고 부품이 많다면 나중에 쉽게 유지 관리할 수 있습니까? CSS 전처리기를 사용하는 경우 대답은 '예'입니다. 게다가 사이트 레이아웃을 자동화하는 방법입니다. 왜? 이제 알아 보겠습니다.

CSS 전처리기란 무엇입니까?

내 이해에 이것은 표준 기능을 확장하고 일부 기능을 추가하며 더 읽기 쉽고 이해하기 쉬운 코드를 작성할 수 있는 표준 CSS에 대한 추가 기능입니다. 출력에서 소스 코드는 우리가 익숙한 CSS로 컴파일됩니다. 최신 개발에서 이러한 도구를 사용하는 것은 "필수"이며 모든 레이아웃 디자이너 또는 개발자가 이에 익숙해지도록 조언합니다. 꽤 많은 CSS 전처리기가 있기 때문에 선택할 수 있는 것이 많다는 것을 추가해야 하지만 가장 인기 있는 전처리기를 강조 표시해야 합니다.

• 첨필

위의 모든 전처리기는 기능이 거의 동일하며 구문에 약간의 차이만 있습니다. 이제 이전에 제기된 질문으로 돌아가서 코드를 보다 편리하고 유지 관리하기 쉽게 만들기 위해 전처리기가 제공하는 이점은 무엇입니까? 이것은 우선 중첩입니다. 이 기능은 요소를 구조화하고, 요소의 부모를 쉽게 찾고, 의사 클래스와 의사 요소를 빠르게 작성하고, 심지어 BEM을 사용할 수 있는 기능을 제공합니다! 예:
.길
색상: #fff
&__제목
패딩: 10px
&:호버, &:포커스
파란색

Sass로 작성된 이 코드 스니펫을 살펴보십시오. 이 모든 것은 다음 CSS로 변환됩니다.

트랙(색상: #FFF;)
.track_title (패딩: 10px;)
.track__title:hover, .track-title:focus ( 색상: 파란색)

간결하고, 편리하고, 이해하기 쉽고, 부모에서 자식으로의 구조가 훌륭하지 않습니까? 두 번째이자 그다지 중요하지 않은 장점은 변수입니다. 작동 원리는 매우 간단합니다. 변수 이름은 $ 기호로 시작한 다음 이름 자체입니다. 우리는 콜론을 통해 값을 씁니다. 편리한 형식의 색상, 들여쓰기 값, 너비, 글꼴 크기 등이 될 수 있습니다. 결과적으로 다음과 같은 결과를 얻게 됩니다.

$btn-색상: 파란색;
$글꼴-메인-크기: 16px;

사용법은 다음과 같습니다.

차단하다 (
글꼴 크기: $font-main-size;
}

얼마나 편리한지 상상해보세요. 사이트 전체에서 버튼 색상을 변경해야 하는 경우 한 곳에서만 변경하면 됩니다! 자, 계속 갑시다. CSS 전처리기가 우리에게 제공할 수 있는 세 번째이자 가장 큰 것은 믹스인의 사용입니다. 일반적인 이해에서 믹스인은 코드의 동일한 부분을 반복하지 않고 여러 번 사용할 수 있는 기능입니다(프로그래밍 원칙 중 하나 기억 - DRY - 반복하지 마십시오). 솔직히 말해서 믹스 인을 그렇게 자주 사용하지 않고 그렇게 급한 필요는 없었던 것 같지만 여전히 몇 가지 예를 보여 드리겠습니다. 내가 가장 많이 사용하는 기능 중 하나는 다음과 같습니다.

@function em($픽셀, $context: $browser-context) (
@if (단위 없음($픽셀)) (
$픽셀: $픽셀 * 1px;
}
@if (단위 없음($context)) (
$컨텍스트: $컨텍스트 * 1px;
}
@return $픽셀 / $context * 1em;
}

그리고 그 적용은 다음과 같습니다.

몸 (
글꼴 크기: em(14px);
}

예, 아시다시피 이것은 PX에서 Em으로의 글꼴 크기 변환 일뿐입니다 (그런 사소한 일에 특별 서비스를 사용했거나 계산기로 계산했을 때 오래 살 수 있습니다). 다음 예는 또한 많은 시간을 절약합니다.

@mixin 입력 자리 표시자(
&.자리 표시자( @content; )
&:-moz-placeholder ( @content; )
&::-moz-자리 표시자( @content; )
&:-ms-input-placeholder( @content; )
&::-webkit-input-placeholder ( @content; )
}

그것의 용도:

입력, 텍스트 영역(
@include 입력 자리 표시자(
색상: $회색;
}
}

더 많은 예가 있지만 이 도구가 얼마나 유용한지 이해하기 위해 믹스인을 직접 사용해 볼 가치가 있습니다. 아마도 당신이 CSS 프리프로세서를 좋아하게 만드는 또 하나의 이유가 있을 것입니다. 그 이름은 모듈성입니다. 지금은 2018년이고 HTML 템플릿 엔진에서 다양한 css 프레임워크 및 프로젝트 빌더에 이르기까지 모든 곳에 모듈성이 있습니다.

최신 CSS는 강력하며 전처리기와 결합하여 일반적으로 페이지의 콘텐츠를 꾸미기 위한 전투 기계입니다. 이 기사는 예제와 함께 Sass/SCSS에 대한 자세한 가이드를 제공합니다. 읽은 후에는 믹스인, 변수 및 지시문을 사용하여 스타일을 더 잘 제어하는 ​​방법을 배웁니다.

참고 모든 Sass/SCSS 코드는 브라우저가 올바르게 이해하고 표시할 수 있도록 CSS로 컴파일됩니다. 현재 브라우저는 Sass/SCSS 또는 다른 CSS 전처리기와의 직접 작업을 지원하지 않으며 표준 CSS 사양은 유사한 기능을 제공하지 않습니다.

CSS 대신 Sass/SCSS를 사용하는 이유는 무엇입니까?

1. 네스팅- SCSS를 사용하면 CSS 규칙을 서로 중첩할 수 있습니다. 중첩 규칙은 외부 선택자와 일치하는 요소에만 적용됩니다(Sass에 대해 이야기하는 경우 대괄호 없이도 모든 것이 아름답고 직관적입니다).
2. 변수- 표준 CSS에도 변수 개념이 있지만 Sass에서는 변수를 조금 다르게 사용할 수 있습니다. 예를 들어 @for 지시문을 통해 반복합니다. 또는 속성을 동적으로 생성합니다. 자세한 내용은 프로젝트의 러시아어 웹사이트에서 확인할 수 있습니다.
3. 향상된 수학 연산- CSS 값을 더하고, 빼고, 곱하고, 나눌 수 있습니다. 표준 CSS와 달리 Sass/SCSS에서는 calc() 를 우회할 수 있습니다.
4. 삼각법- SCSS를 사용하면 JavaScript와 같은 다른 언어에서 수행할 수 있는 방법과 유사하게 Sass/SCSS 구문만 사용하여 고유한(사인 및 코사인) 함수를 작성할 수 있습니다.
5. 지시어@잠시 동안 및 표현@if-else - 다른 언어의 친숙한 요소를 사용하여 CSS 코드를 작성할 수 있습니다. 그러나 실수하지 마십시오. 최종 결과는 일반 CSS입니다.
6. 믹스인(mixins)- CSS 속성 집합을 한 번 만들고 반복적으로 작업하거나 다른 값과 혼합할 수 있습니다. 믹스인을 사용하여 동일한 레이아웃의 별도 테마를 만들 수 있습니다. 믹스인은 또한 전체 CSS 규칙 또는 Sass 문서에서 허용되는 모든 것을 포함할 수 있습니다. 소수의 믹스인으로 다양한 스타일을 만들 수 있도록 인수를 취할 수도 있습니다.
7. 기능 - 재사용 가능한 함수로 CSS 정의를 생성할 수 있습니다.

Sass 전처리기

Sass는 동적이지 않습니다. CSS 속성 및 값을 실시간으로 생성 및/또는 애니메이션화할 수 없습니다. 그러나 보다 효율적인 방법으로 생성하고 표준 속성(예: CSS 애니메이션)이 여기에서 차용하도록 할 수 있습니다.

통사론

SCSS는 종종 코딩 시간을 줄이는 새로운 구문 외에 CSS에 새로운 기능을 실제로 추가하지 않습니다.

전제 조건

5개의 CSS 전처리기가 있습니다: Sass, SCSS, Less, Stylus 및 PostCSS.

이 기사는 주로 Sass와 유사한 SCSS를 다룹니다. Stack Overflow(원본) 또는 stackoverflow(러시아어로 번역됨)에서 이러한 전처리기에 대한 자세한 내용을 읽을 수 있습니다.

SASS - (.sass) 에스문법적으로 ㅏ굉장하다 에스스타일 에스모자.

SCSS - (.scss) 사스와이 씨오름차순 에스스타일 에스모자.

.sass 및 .scss 확장자는 유사하지만 동일하지는 않습니다. 명령줄 팬을 위한 변환 방법은 다음과 같습니다.

# Sass에서 SCSS로 변환 $ sass-convert style.sass style.css # SCSS에서 Sass로 변환 $ sass-convert style.scss style.sass

Sass는 파일 확장자가 .sass인 SCSS의 첫 번째 사양입니다. 개발은 2006년에 시작되었지만 나중에 .scss 확장자로 대체 구문이 개발되었습니다.

메모다른 전처리기는 SCSS와 기능면에서 유사하지만 구문이 다를 수 있습니다. 또한 CSS에서 작동하는 모든 것은 Sass 및 SCSS에서도 잘 작동합니다.

변수

Sass/SCSS를 사용하면 변수로 작업할 수 있습니다. CSS에서는 이중 대시(--)로 표시되고 전처리기에서는 달러 기호($)로 표시됩니다.

$숫자: 1; $색상: #ff0000; $text: "tproger 영원히."; $text: "영원히." !기본; $없음: null;

값 끝에 !default 레이블을 추가하여 아직 값이 없는 변수에 기본값을 할당할 수 있습니다. 이 경우 변수에 이미 값이 할당되어 있으면 변경되지 않습니다. 변수가 비어 있으면 새로 지정된 값이 할당됩니다.

#container ( 내용: $text; )

Sass의 변수는 모든 속성에 할당될 수 있습니다.

중첩된 규칙

공백을 사용하는 표준 중첩 CSS 요소:

/* 중첩된 규칙 */ #A (색상: 빨간색; ) #A #B (색상: 녹색; ) #A #B #C p (색상: 파란색; )

SCSS와 동일한 중첩 요소:

/* 중첩 규칙 */ #A ( 색상: 빨간색; #B ( 색상: 녹색; #C p ( 색상: 파란색; ) ) )

보시다시피 구문이 더 깔끔하고 덜 반복적으로 보입니다.

이는 오버로드된 레이아웃을 관리할 때 특히 유용합니다. 따라서 중첩 속성이 코드에 기록되는 정렬은 응용 프로그램의 실제 레이아웃 구조와 완전히 일치합니다.

배후에서 전처리기는 브라우저에 표시될 수 있도록 여전히 표준 CSS 코드(위에 표시됨)로 컴파일합니다. 우리는 CSS 작성 방식을 변경하고 있을 뿐입니다.

앰퍼샌드

& 문자를 사용하면 부모 선택자를 삽입할 위치를 명시적으로 지정할 수 있습니다.

Sass(이전 예제에서)를 CSS로 컴파일한 결과는 다음과 같습니다.

#p (색상: 검은색;) #p a (글꼴 두께: 굵게;) #p a:hover (색상: 빨간색;)

결과적으로 앰퍼샌드는 부모 a 요소(a:hover)의 이름으로 컴파일되었습니다.

믹스인(일명 믹스인)

믹스인은 속성이 있는 셀렉터를 포함하여 셀렉터도 포함할 수 있습니다. 선택기는 앰퍼샌드(&)를 통해 상위 요소에 대한 참조를 포함할 수 있습니다. 기억하시나요?

여러 브라우저로 작업하는 예

CSS의 일부 항목은 작성하기가 매우 지루합니다. 특히 CSS3에서는 그 위에 많은 공급업체 접두사(-webkit- 또는 -moz-)를 사용해야 하는 경우가 많습니다.

믹스인을 사용하면 사이트에서 여러 번 사용해야 하는 CSS 선언 그룹을 만들 수 있습니다. 공급업체 접두사에 믹스인을 사용하는 것이 좋습니다. 예:

@mixin border-radius($radius) ( // 접두어: -webkit-border-radius: $radius; // Chrome 및 Safari -moz-border-radius: $radius; // Firefox -ms-border-radius: $radius; // Internet Explorer -o-border-radius: $radius; // Opera border-radius: $radius; // 표준 CSS ) // border-radius 혼합을 생성한 후 사용하는 예 box ( @include border- radius(10px); )

산술 연산

실생활에서와 같이 호환되지 않는 데이터 유형(예: px 및 em 추가)이 있는 숫자로 작업할 수 없습니다.

덧셈과 뺄셈

추가되는 데이터 유형에 항상 주의를 기울이십시오. 즉, 픽셀에서 픽셀로, 코끼리에서 코끼리로. 빼기도 같은 방식으로 작동하지만 빼기 기호가 있습니다.

빼기 예:

곱셈

calc(a * b) 를 사용하여 CSS에서와 똑같이 수행되지만 calc 및 괄호는 사용하지 않습니다. 또한 공백으로 곱하기 기호를 숫자와 구분할 수도 있습니다(5 * 6 == 5 * 6).

예외 픽셀을 서로 곱할 수 없습니다. 즉, 10px * 10px != 100px 입니다. 10px * 10 == 100px .

P ( 너비: 10px * 10px; // 오류! 너비: 10px * 10; // 100px 너비: 1px * 5 + 5px; // 10px 너비: 5 * (5px + 5px); // 50px 너비: 5px + ( 10px / 2) * 3; // 20px )

분할

나눗셈은 조금 더 복잡하지만 표준 CSS에서 슬래시(슬래시)는 짧은 형식의 속성 표기법을 사용하기 위해 예약되어 있기 때문에 알아낼 수 있습니다. 예는 다음과 같습니다.

/* 속기 속성 */ font: italic bold .8em/1.2 Arial, sans-serif; /* 표준 속성 표기법 */ font-style: italic; 글꼴 두께: 굵게; 글꼴 크기: .8em; 라인 높이: 1.2; font-family: 굴림, 산세리프;

분할 가능성을 암시하는 세 가지 도우미가 있습니다.

1. 값(또는 그 일부)은 변수에 저장되거나 함수에 의해 반환됩니다.
2. 값은 괄호로 묶여 있습니다.
3. 값은 다른 산술 표현식의 일부로 사용됩니다.

$var1: 20; $var2: 4; p ( top: 16px / 24px; // 표준 CSS에서 그대로 렌더링됨 top: (20px / 5px); // 분할됨(괄호 사용 시에만) top: #($var1) / #($var2); // 렌더링됨 일반 CSS와 마찬가지로 나누기 없음 top: $var1 / $var2; // 나누기 수행 top: random(4) / 5; // 나누기 수행(함수와 쌍을 이룰 때) top: 2px / 4px + 3px; // 나누기는 산술 연산이 하나 더 추가되면 수행됨)

CSS로 컴파일한 결과:

P(위: 16px/24px; 위: 4; 위: 20/4; 위: 5; 위: 0.6; 위: 3.5px; )

나머지

나머지는 나눗셈 연산의 나머지를 계산합니다. 다음은 HTML 목록에 대한 얼룩말 패턴을 만드는 방법입니다.

@mixin zebra() ( @for $i from 1 ~ 7 ( @if ($i % 2 == 1) ( .stripe-#($i) ( background-color: black; color: white; ) ) ) ) * ( @include zebra(); 텍스트 정렬: 중앙; )

zebra mixin의 생성은 위의 코드에 나와 있습니다. @for 및 @if 지시문은 아래 섹션에 설명되어 있습니다.

샘플을 생성하려면 여러 HTML 요소를 작성해야 합니다.

브라우저 결과:

zebra mixin에 의해 성공적으로 생성된 Zebra

비교 연산자

@if 지시문은 SassScript 표현식을 사용하고 표현식이 false 또는 null 이외의 값을 반환하는 경우 중첩된 스타일을 사용합니다.

다음은 믹스인에 중첩될 때 @if 및 @else 지시문이 작동하는 방식을 보여줍니다.

@mixin 간격($padding, $margin) ( @if ($padding > $margin) ( 패딩: $padding; ) @else ( 패딩: $margin; ) ) .container ( @include 간격(10px, 20px); )

행동 비교. 간격 혼합은 여백보다 큰 경우 패딩 크기를 조정합니다.

CSS로 컴파일한 후:

컨테이너( 패딩: 20px; )

논리 연산자

논리 연산자 설명

Sass 부울 연산자를 사용하여 너비에 따라 배경을 변경하는 버튼을 만듭니다.

@mixin 버튼 색상 ($height, $width) ( @if (($height< $width) and ($width >= 35px)) ( 배경색: 파란색; ) @else ( 배경색: 녹색; ) ) .button ( @include 버튼색상(20px, 30px) )

문자열

CSS는 따옴표로 묶인 문자열과 인용되지 않은 문자열의 두 가지 유형의 문자열을 정의합니다. Sass는 둘 다 인식합니다. 결과적으로 Sass에서 사용한 문자열 유형을 CSS에서 얻을 수 있습니다.

경우에 따라 따옴표 없이 유효한 CSS 값에 문자열을 추가할 수 있지만 추가된 문자열이 최종 요소인 경우에만 가능합니다.

P (글꼴: 50px Ari + "al"; // 50px Arial로 컴파일)

아래 예는 하지 말아야 할 일을 보여줍니다.

P (글꼴: "50px" + Arial; // 오류! )

공백이 없는 한 다른 유형의 문자열을 쌓을 수 있습니다. 아래 예제는 컴파일되지 않습니다.

P:after ( 내용: "리누스를 되찾아라" + 토발즈!; // 오류!)

P:after ( content: "Bring back Linus" + "Torvalds!"; // "Torvalds!"에 주목하세요. )

여러 문자열을 추가하는 예:

P:after ( 내용: "운명" + "인류" + "-" + "반복."; )

문자열 및 숫자 추가:

P:after ( 내용: "재귀" + 2013 + "천상의 운명"; )

메모 content 속성은 :before 및 :after 의사 선택자와만 작동합니다. CSS 문서에서 내용을 사용하지 말고 HTML에서 태그 사이에 직접 사용하는 것을 권장합니다.

흐름 제어 문

SCSS에는 기능(fucntion())과 지시문(@directive)이 있습니다. 우리는 믹스인 내부에 인수 전달을 살펴보았을 때 조금 더 일찍 함수 예제를 살펴보았습니다.

함수는 일반적으로 이름 바로 뒤에 괄호로 묶입니다. 지시문은 @ 기호로 시작합니다.

JavaScript와 마찬가지로 SCSS를 사용하면 표준 흐름 제어 문 세트로 작업할 수 있습니다.

만약에()

if()는 함수(때때로 인공 지능의 기초)입니다.

그것의 사용은 다소 원시적으로 보입니다. 연산자는 조건에 표시된 두 값 중 하나를 반환합니다.

/* if() 함수 사용 */ if (true, 1px, 2px) => 1px; if (false, 1px, 2px) => 2px;

@만약에

@if는 조건에 따라 분기하는 데 사용되는 지시어입니다.

/* @if 지시문 사용 */ p ( @if 1 + 1 == 2 ( border: 1px solid; ) @if 7< 5 { border: 2px dotted; } @if null { border: 3px double; } }

컴파일 결과:

P(테두리: 1px 솔리드; )

아래는 @else 지시문이 추가된 콤보 포크입니다.

/* $type 변수 생성 */ $type: river; /* $type 변수의 값이 river이면 컨테이너를 파란색으로 채색 */ div ( @if $type == river ( color: blue; ) ) /* 태그의 텍스트에 대한 조건부 색상

*/ p ( @if $type == 나무 ( 색상: 녹색; ) @else if $type == 강 ( 색상: 파랑; ) @else if $type == 흙 ( 색상: 갈색; ) )

상위 요소의 존재 여부 확인

앰퍼샌드는 상위 요소가 있는 경우 이를 선택합니다. 그렇지 않으면 null 을 반환합니다. 따라서 @if 지시문과 함께 사용할 수 있습니다.

다음 예제에서는 부모 요소의 존재 여부에 따라 조건부 CSS 스타일을 만드는 방법을 살펴보겠습니다.

/* 부모가 존재하는지 확인 */ @mixin does-parent-exist ( @if & ( /* 부모가 존재하는 경우 파란색 적용 */ &:hover ( color: blue; ) ) @else ( /* 부모 요소 누락됨, 링크에 파란색 적용 */ a ( color: blue; ) ) )

@for 지시어

@for 지시문은 지정된 횟수만큼 스타일 세트를 출력합니다. 반복할 때마다 카운터 변수를 사용하여 출력을 변경합니다.

@for 지시문은 5번 반복됩니다.

1에서 5까지의 @for $i ( .definition-#($i) ( width: 10px * $i; ) )

CSS로 컴파일한 결과:

정의-1(너비: 10px; ) .definition-2(너비: 20px; ) .definition-3(너비: 30px; ) .definition-4(너비: 40px; ) .definition-5(너비: 50px; )

@각 지시어

@each 지시문은 $var를 각 목록 또는 사전 값으로 설정하고 해당 $var 값을 사용하여 포함된 스타일을 렌더링합니다.

오리너구리, 사자, 양, 비둘기의 @각 $animal ( .#($animal)-icon ( background-image: url("/images/#($animal).png") ) )

CSS로 컴파일한 결과:

오리너구리 아이콘 ( background-image: url("/images/platypus.png"); ) .lion-icon ( 배경 이미지: url("/images/lion.png"); ) .sheep-icon ( 배경- 이미지: url("/images/sheep.png"); ) .dove-icon ( 배경 이미지: url("/images/dove.png"); )

@while 지시어

@while 지시문은 SassScript 표현식을 사용하고 표현식이 true로 평가되는 동안 중첩 스타일을 반복합니다. 거의 필요하지 않지만 @for보다 더 복잡한 루프를 만드는 데 사용할 수 있습니다. 예를 들어:

$인덱스: 5; @while $index > 0 ( .element-#($index) ( 너비: 10px * $index; ) $index: $index - 1; )

컴파일 결과:

요소-5(너비: 50px; ) .요소-4(너비: 40px; ) .요소-3(너비: 30px; ) .요소-2(너비: 20px; ) .요소-1(너비: 10px; )

Sass/SCSS의 기능

Sass/SCSS를 사용하면 다른 언어에서와 마찬가지로 기능을 사용할 수 있습니다.

300px를 반환하는 three-hundred-px() 함수를 만들어 봅시다.

@function three-hundred-px() ( @return 300px; ) .name ( 너비: three-hundred-px(); 테두리: 1px 단색 회색; 표시: 블록; 위치: 절대; )

.name 클래스를 적용한 후 요소의 너비는 300픽셀이 됩니다.

Sass의 함수는 유효한 CSS 값을 반환할 수 있으며 모든 속성에 할당될 수 있습니다. 전달된 인수를 기반으로 계산할 수도 있습니다.

@function double($width) ( @return $width * 2; )

삼각법

삼각 함수 sin() 및 cos()는 종종 예를 들어 JavaScript와 같은 많은 언어에서 내장 클래스로 발견됩니다.

스로버 생성과 같은 사용자 인터페이스 애니메이션 개발에 소요되는 시간을 줄이려면 그들의 작업을 연구할 가치가 있습니다. 그건 그렇고, 우리는 이미 기사 중 하나에서 이것에 대해 이야기하고 있습니다. 하지만 이 경우 HTML 문서에 삽입된 gif 이미지가 아니라 코드가 됩니다.

다음은 코드의 양을 최소한으로 유지하면서 sin() 함수를 사용하여 흥미로운 애니메이션 효과를 만드는 몇 가지 예입니다. 그런 다음 이 지식을 확장하여 대화형 사용자 인터페이스 요소(원형 이동, 물결 모양 애니메이션)를 만들 수 있습니다.

CSS와 함께 삼각법을 사용하는 이점은 gif 이미지의 경우와 같이 추가 HTTP 요청이 없다는 것입니다.

Sass에서 삼각 함수를 작성할 수 있습니다. 이것에 대해 자세히 읽어보십시오.

나만의 함수 작성

삼각법에서 많은 연산은 함수를 기반으로 합니다. 각 기능은 다른 기능을 기반으로 합니다. 예를 들어, rad() 함수는 PI() 를 사용해야 합니다. cos() 및 sin() 함수는 rad() 를 사용해야 합니다.

@function PI() ( @return 3.14159265359; )

Sass/SCSS에서 함수를 작성하는 것은 다른 언어로 함수를 작성하는 것과 매우 유사합니다.

pow() 함수 사용:

@function pow ($number, $exp) ( $value: 1; @if $exp > 0 ( @for $i from 1 부터 $exp ( $value: $value * $number; ) ) @else if $exp< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

rad() 함수 사용:

@function rad ($angle) ( $unit: unit ($angle); $unitless: $angle / ($angle *0 + 1); //각도("deg") 단위인 경우 라디안으로 변환 @if $unit == deg ( $unitless: $unitless / 180 * PI(); ) @return $unitless; )

tan() 함수로 탄젠트를 계산하려면 sin() 및 cos() 함수를 사용해야 합니다.