Ogone 0.22.0 - 명백한: 새로운 CSS 전처리기
4455 단어 javascripttypescriptdenoogone
소개
여기요! 저는 Stanley Robotics에서 프런트 엔드 개발자로 일하고 있는 Rudy Alula입니다.
이제 프레젠테이션이 만들어졌으므로 여러분이 탐색해야 할 Ogone의 새로운 기능인 스타일 네트워크를 소개하겠습니다.
.
역사
이전 버전에서 Ogone은 텍스트와 같은 scss/sass/stylus를 변환하기 위해 deno-sass 및 denolus와 같은 모듈을 지원했습니다.
이들은 유지되지 않았고 Ogone 내부에서 많은 문제를 발생시켰으므로 . 지웠어..
Sass/Stylus 사용자인 저는 Ogone이 제가 익숙한 트릭 없이 기본 CSS만 지원한다는 사실을 알 수 없었습니다.
그래서 내가 원하는 모든 트릭을 처리할 수 있는 내부 css 전처리기를 만들기로 결정했습니다.
& 당연하게 나왔다
분명히 이 전처리기의 이름입니다. 왜 그런지는 모르겠지만 멋진 것 같습니다.
더 심각하게 Obvious는 컴파일 단계 중 하나이기 때문에 큰 잠재력을 가지고 있습니다. 구성 요소에 액세스할 수 있으며 어떤 구성 요소에서 어떤 구성 요소를 가져오는지 알고 있습니다.
과거에는 자연스럽게
<style lang="obvious">
와 같은 스타일 태그에 언어를 부여했습니다. 더 이상 필요하지 않으며 이제 Obvious가 기본입니다.좋아, 멋지지만 기능은 무엇입니까?
개요를 알려 드리겠습니다.
&
를 참조하는 부모@use 'component-tagname' as Component;
@export const myVar = red;
@const t = div { /* ... */}
.@const rule = div {...}; div { ...$rule; }
@const t = value;
@const* var = true;
중첩된 규칙
나는 이것이 명백하다고 생각한다. 이 기능이 필요했습니다.
예를 들어 스타일 요소 안에 다음과 같이 작성할 수 있습니다.
div 요소의 자식인 단락을 제외하고 모든 단락 요소는 텍스트를 회색으로 표시해야 합니다.
부모 참조
&
문자를 사용하여 부모 선택자를 참조하십시오.처럼
div.container { background: blue; }
div.container:hover { background: red; }
변수
js에서 변수 선언을 가져옵니다. 이를 통해 외부 사용에 사용할 수 있는 규칙/변수를 필터링할 수 있습니다.
다음과 같이 변수 사용
@const
을 선언하려면:이제 구성 요소 외부에서 규칙을 통해 해당 변수를 사용할 수 있기를 원한다고 가정해 보겠습니다.
컴포넌트에서 가져오기/내보내기
이는 Less의 네임스페이스와 같지만 구성 요소를 통해 수행됩니다.
두 가지 규칙을 작성해 봅시다. 하나는 수출되고 다른 하나는 개인용입니다.
다른 구성 요소 내에서
$spanRule
를 사용하기 시작합니다.결론
Sass와 Less에서 영감을 받았지만 몇 가지 구문에 대해 약간의 자유를 얻었습니다.
이 기사는 Obvious라는 Ogone의 새로운 CSS 파서만 노출합니다. 이제 CSS 규칙의 속성을 구문 분석할 수 있으므로 셰이더 정의에 CSS 규칙을 사용할 계획입니다. webGL1/2 API에 관심이 있다면 이것을 확인하십시오.
리소스
Otone ^0.1.3 VS 코드
Deno에서 사용 가능: here
Reference
이 문제에 관하여(Ogone 0.22.0 - 명백한: 새로운 CSS 전처리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/srnv/ogone-0-22-0-css3-style-network-between-web-components-17ek텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)