스타일러스를 알게됩니다

당신이 프론트 엔드 개발자라면, 당신은 Sass의 먼 친척 인 Stylus에 대해 들었을 것입니다. Sass와 마찬가지로 Stylus는 Node.js에 작성된 CSS 전 처리기입니다. Github 코드 기반에 따르면 자체를 호출합니다.

[…] CSS를 생성하는 효율적이고 역동적이며 표현적인 방법을 제공하는 혁신적인 새로운 언어.

글쎄, "혁명적"은 약간 과장 될 수 있습니다. 그러나 다른 모든 것은 사실입니다.

키 포인트

스타일러스는 Node.js로 작성된 CSS 전 처리기이며 SASS와 같은 유사한 도구보다 느슨한 구문이 있습니다. 선택적인 괄호, 콜론 및 세미콜론을 허용하며 계약 구문 및 일반 CSS 스타일을 지원합니다.

스타일러스는 변수, 기능 및 Mixins의 사용을 지원하여 CSS를 진정한 프로그래밍 언어에 더 가깝게 제공합니다. 또한 속성 값 검색 기능이 있으며 속성이 정의되었는지 여부를 기반으로 조건부 속성을 출력 할 수 있습니다.

스타일러스는 매우 유연하지만 스타일러스를 사용하려면 혼란을 피하기 위해 구문 규칙을 준수해야합니다. Node.js 및 NPM을 사용하여 설치하고 Stylus 명령을 사용하여 CSS로 컴파일 할 수 있습니다. Stylus에는 자체 프레임 워크 인 NIB가 있으며, 이는 추가 도우미와 Mixin에 대한 크로스 브라우저 지원을 제공합니다.

뭐, 다른 사람? !

조금 비슷합니다. 그러나 스타일러스는 완전히 새로운 것이 아닙니다. 2011 년 초부터 왔지만 키 커뮤니티가 매우 낮다고 생각합니다. 그건 그렇고, 최신 Mozilla 개발자 네트워크 재 설계가 Stylus로 완료되었다는 것을 알고 있습니까? 이 프로젝트에 참여한 David Walsh는 Stylus를 시작하는 방법에 대해서도 썼습니다.
• 그래서 Sass에 비해 스타일러스의 장점은 무엇입니까? 글쎄, 그것은 node.js로 만들어 졌는데, 제 생각에는 이점이 있습니다. Node-Sass Libsass 래퍼로 인해 노드 워크 플로우에서 Sass를 사용하는 것은 완전히 괜찮지 만 LibSass가 Node에 완전히 쓰여진 것은 아닙니다.
또한 Stylus는 프로젝트, 팀 및 엄격한 코딩 규범을 고수하려는 경향에 따라 매우 느슨한 구문을 가지고 있습니다. 스타일 시트에 너무 많은 논리를 포함시키지 않는 한 코드를 제출하기 전에 코드 확인을 수행하면 느슨한 구문이 정상적으로 생각합니다.
• 스타일러스와 Sass는 거의 동일한 기능을 지원하지만 스타일러스 기능 목록을 확인할 수 있지만 획기적인 기능은 예상되지 않습니다 (새로운 기능이 있지만). Stylus는 또한 여러 구문을 지원하지만 경계는 Sass보다 훨씬 흐릿합니다. 원하는 방식으로 스타일을 지정할 수 있으며 (인기, CSS 스타일) 동일한 스타일 시트에서 혼합 및 일치 할 수 있습니다 (이 파서는 매우 흥미 롭습니다).
그래서 당신은 어떻게 생각하십니까? 시도하고 싶습니까?
• 초보자
언급 된 바와 같이, Stylus는 node.js로 작성되므로 다른 NPM 패키지와 마찬가지로 설치할 수 있습니다.

<code>$ npm install stylus -g</code>

거기에서 JavaScript API를 사용하여 노드 워크 플로에 삽입하거나 명령 줄 실행 파일을 사용하여 스타일 시트를 컴파일 할 수 있습니다. 단순화하기 위해 Stylus Command Line 도구를 사용하지만 원하는대로 노드 스크립트, Gulp 또는 Grunt에서 수행 할 수 있습니다.
이전 명령은 스타일러스에게 스타일러스 스타일 스타일 시트 (.styl)를 스타일 시트 폴더에서 컴파일하고 공개/CSS 폴더에서 생성하도록 지시합니다. 물론 디렉토리의 변경 사항을 모니터링 할 수도 있습니다.

<code>stylus ./stylesheets/ --out ./public/css</code>

쓰기 스타일 스타일 방금 배우기 시작했고 새로운 구문에 압도되기를 원하지 않는다면 .Styl 파일에 순수한 CSS를 쓸 수 있다는 것을 알고 있습니다. Stylus는 표준 CSS 구문을 지원하기 때문에 CSS 코드를 사용한 다음 천천히 향상시키는 것은 전혀 괜찮습니다.

기본 구문 문법 자체에 대해 거의 모든 것이 선택 사항입니다. 버팀대 : 왜 귀찮게합니까? 세미콜론 : 잊어 버려! 콜론 : 너무 버리세요. 브래킷 : 제발. 다음은 완전히 유효한 스타일러스 코드입니다

처음에는 약간 혼란 스럽지만 특히 구문 강조 표시가있는 경우 익숙해 질 수 있습니다. 당신이 추측했듯이, 이전 코드는 다음과 같이 컴파일합니다 :

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

변수 CSS 전 처리기의 가장 일반적인 기능은 변수를 정의하는 능력이어야합니다. 스타일러스가 그것을 제공한다는 것은 놀라운 일이 아닙니다. Sass와는 반대로, 그들은 결장 (:) 대신 동일한 부호 (=)로 선언됩니다. 또한, 주요 달러 표시 ($)는 선택 사항이며 안전하게 생략 할 수 있습니다.
스타일러스는 이제 Sass 또는 다른 전처리자가하는 일을합니다 : 속성 가치 조회. 너비의 절반에 해당하는 음의 왼쪽 마진을 적용하고 싶다고 가정 해 봅시다.

@width를 사용하여 Stylus에게 현재 블록의 너비 속성 값을 얻고 변수로 취급하도록 지시합니다. 매우 영리합니다! 또 다른 흥미로운 사용 사례는 속성이 정의되었는지 여부를 기반으로 속성을 조건부 출력하는 것입니다.

이 경우 mixin 이것에 대해 말하면, 아마도 Sass의 가장 인기있는 특징 중 하나이기 때문에 Mixin을 정의합시다! 스타일러스의 믹스 인은 특정 키워드가 필요하지 않습니다.

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

마찬가지로 Mixin을 포함하여 @include 등과 같은 특정 구문이 필요하지 않습니다.

원하는 경우 브래킷을 제거 할 수도 있습니다.이 경우 완전히 표준 (그러나) CSS 속성을 사용하는 것처럼 보입니다. 이 메커니즘은 투명한 믹스 <code>.foo, .bar { color: tomato; background: deepskyblue; }</code>라고 불립니다.
이것은 언뜻보기에 불필요한 속임수처럼 보일 수 있지만, 신중하게 생각하면이 기능을 사용하면 저자가 기본 CSS 구문을 확장 할 수 있습니다. 다음 오버 플로우 믹스를 고려하십시오 :

<code>$ npm install stylus -g</code>

주어진 값이 타원체 인 경우 단일 라인 타원 오버플로를 얻는 데 필요한 잘 알려진 선언 트리플을 인쇄합니다. 그렇지 않으면 주어진 값을 인쇄합니다. 다음은 그것을 사용하는 방법입니다 :
<:>는 생산할 것입니다 :

<code>stylus ./stylesheets/ --out ./public/css</code>

당신은 이것이 매우 멋진 트릭임을 인정해야합니다. 혼란 스러울 수 있고 위험 할 수 있지만 추가 값으로 표준 CSS 속성을 확장 할 수 있다는 것은 실제로 흥미로운 개념입니다.

@Content 방식으로 혼합 된 콘텐츠를 전달하려면 {block} 변수로 수행 할 수 있습니다. 포함하는 동안 추가 콘텐츠를 전달하려면 Mixin 이름 앞에 추가하면됩니다.

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

이 코드는 다음과 같이 컴파일됩니다

Stylus Mixin의 마지막 매우 흥미로운 특징 : 포함 된 경우 (있는 경우) 믹스 인에게 전달 된 모든 매개 변수를 포함하는 로컬 변수는 항상 인수가 있습니다. 예를 들어, [..]를 사용하여 JavaScript에서와 같이이 변수를 조작하여 특정 인덱스에서 값을 얻을 수 있습니다.
최종 생각 스타일러스의 모든 기능과 구문 팁을 여행하는 것은 너무 장점이 될 것이며, 우리는 이미 학습을 시작하기에 충분한 소개를 이미 소개했다고 생각합니다!

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

보시다시피 스타일러스는 매우 느슨합니다. 기존의 모든 CSS 작문 도우미 중에서 Stylus는 CSS를 진정한 프로그래밍 언어로 가져 오는 가장 가까운 도구입니다.

Stylus에는 Sass가 Compass를 소유 한 것처럼 자체 프레임 워크가 있습니다.이를 펜촉이라고합니다. NIB는 스타일러스에 추가 도우미와 Mixin에 대한 크로스 브라우저 지원을 제공하는 도구 상자입니다.

어떤 사람들은 그것을 좋아할 수도 있고, 어떤 사람들은 그렇지 않을 수도 있습니다. 저의 조언은 문법을 엄격히 준수하는 것입니다. 그러한 느슨한 구문을 다루는 것이 항상 쉬운 것은 아닙니다. 어쨌든, Sass의 훌륭한 경쟁자들을 만나서 반갑습니다.

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

스타일러스에 대한 FAQS (FAQS)
스타일러스와 다른 CSS 전 처리기의 주요 차이점은 무엇입니까?

스타일러스는 강력하고 유연한 역동적 인 스타일 시트 언어입니다. Sass 및 Less와 같은 다른 CSS 전 처리기와 달리 Stylus는 괄호, 콜론 및 세미콜론을 선택적으로 사용할 수 있으므로보다 유연하고 덜 엄격합니다. 또한 들여 쓰기 구문 및 일반 CSS 스타일을 지원하여 코드를 작성할 때 개발자에게 더 큰 자유를줍니다. 또한 Stylus는 투명한 Mixin을 지원하므로 특수 구문을 사용하지 않고 Mixins에 전화 할 수 있습니다.

스타일러스를 설치하는 방법?

스타일러스는 node.js 및 npm (노드 패키지 관리자)을 사용하여 설치할 수 있습니다. 먼저 컴퓨터에 node.js 및 npm을 설치해야합니다. 설치가 완료되면 터미널 또는 명령 프롬프트에서 NPM 설치 Sylus -G를 실행하여 Stylus를 전 세계적으로 설치할 수 있습니다. 이를 통해 컴퓨터의 모든 디렉토리에서 스타일러스를 사용할 수 있습니다.

스타일러스를 CSS로 컴파일하는 방법은 무엇입니까?

스타일러스 코드를 작성한 후 터미널 또는 명령 프롬프트에서 스타일러스 명령을 사용하여 CSS로 컴파일 할 수 있습니다. 예를 들어, 스타일러스 파일의 이름이 style.styl 인 경우 Stylus -c Style.styl 명령을 실행해야합니다. 이렇게하면 같은 디렉토리에 Style.css라는 CSS 파일이 생성됩니다.

스타일러스에서 변수를 사용할 수 있습니까?

예, 스타일러스는 변수 사용을 지원합니다. 이름에 값을 할당하여 변수를 정의 할 수 있습니다. 예를 들어, 글꼴 크기 = 14px. 그런 다음 다음과 같은 이름을 참조하여 코드의 다른 곳 에서이 변수를 사용할 수 있습니다.

스타일러스는 기능과 믹스 인을 지원합니까?

예, 스타일러스는 기능과 믹스 인을 지원합니다. 스타일러스의 함수는 DEF 키워드를 사용하여 정의되며 계산을 수행하거나 값에서 작동하는 데 사용할 수 있습니다. 반면, Mixin은 다른 규칙 세트에 포함될 수있는 재사용 가능한 코드 블록입니다.

스타일러스에서 조건부 진술을 사용하는 방법은 무엇입니까?

스타일러스는 if, else 및 else 키워드를 사용하여 조건부 명세서를 지원합니다. 특정 조건에 따라 다른 스타일을 적용하는 데 사용할 수 있습니다. 예를 들어, 조건부 명세서를 사용하여 화면 크기에 따라 다른 글꼴 크기를 적용 할 수 있습니다.

다른 스타일러스 파일을 가져올 수 있습니까?

예, 스타일러스를 사용하면 @import 지시문을 사용하여 다른 스타일러스 파일을 가져올 수 있습니다. 이는 코드를 별도의 파일로 구성하고 여러 스타일 시트로 코드를 재사용하는 데 유용합니다.

스타일러스가 루프를 지원합니까?

예, 스타일러스는 루프를 지원합니다. 이들은 중복 CSS 규칙 또는 반복 목록 및 배열을 생성하는 데 사용할 수 있습니다.

node.js와 함께 스타일러스를 사용할 수 있습니까?

예, 스타일러스는 node.js와 함께 사용할 수 있습니다. 실제로 Stylus는 Node.js를 기반으로하며 NPM (Node Package Manager)을 사용하여 설치할 수 있습니다. Node.js의 인기있는 웹 응용 프로그램 프레임 워크 인 Express와 함께 스타일러스를 사용할 수도 있습니다.

스타일러스 코드를 디버그하는 방법은 무엇입니까?

스타일러스는 디버깅 정보를 출력하는 데 사용할 수있는 -데버그 플래그를 제공합니다. 이것은 오류를 추적하거나 코드 처리 방법을 이해하는 데 도움이됩니다. 또한 스타일러스의 evepect () 함수를 사용하여 변수 또는 표현식의 값을 출력 할 수 있습니다.

위 내용은 스타일러스를 알게됩니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!