JavaScript가 CSS 및 Sass와 대화 할 수 있습니다

JavaScript와 CSS는 20 년 이상 공존 해 왔지만 이들 사이에 데이터를 공유하는 것은 매우 어려웠습니다. 물론 많은 시도가 있었지만 구조를 변경하는 대신 CSS 사용자 정의 속성 또는 SASS 변수를 활용하는 대신 간단하고 직관적 인 접근 방식을 생각해 냈습니다.

CSS 사용자 정의 속성 및 JavaScript

여기의 CSS 사용자 정의 속성은 너무 놀라운 일이 아닙니다. 브라우저가 사용자 정의 속성을 지원하기 시작한 이후로 JavaScript로 값을 설정하고 조작 할 수있었습니다.

구체적으로, 우리는 여러 가지 방법으로 사용자 정의 속성과 함께 JavaScript를 사용할 수 있습니다. setProperty 사용하여 사용자 정의 속성의 값을 설정할 수 있습니다.

 Document.DocumentElement.style.setProperty ( "-패딩", 124 "PX"); // 124px

JavaScript에서 getComputedStyle 사용하여 CSS 변수를 검색 할 수도 있습니다. 그 뒤에있는 논리는 매우 간단합니다. 사용자 정의 속성은 스타일의 일부이므로 계산 된 스타일의 일부이기도합니다.

 getComputedStyle (document.documentElement) .getProperTyValue ( '-Padding') // 124px

getPropertyValue 는 또한이를 처리하는 유사한 방법으로 HTML 태그의 인라인 스타일에서 사용자 정의 속성 값을 얻을 수 있습니다.

 Document.DocumentElement.style.getPropertyValue ( "-Padding"); // 124px

사용자 정의 속성은 스코프가 있습니다. 이것은 우리가 특정 요소에서 계산 된 스타일을 가져와야한다는 것을 의미합니다. 우리는 이전 :root 에서 변수를 정의 했으므로 HTML 요소로 가져옵니다.

SASS 변수 및 JavaScript

Sass는 전처리 언어이므로 웹 사이트의 일부가되기 전에 CSS로 변환됩니다. 따라서 CSS 사용자 정의 속성과 같은 JavaScript에서 액세스 할 수 없습니다 (DOM에서 계산 된 스타일로 액세스).

이를 변경하려면 빌드 프로세스를 수정해야합니다. 로더는 일반적으로 이미 빌드 프로세스의 일부이므로 대부분의 경우에는 이것이 필요하지 않다고 생각합니다. 그러나 이것이 프로젝트의 경우에는 해당되지 않으면 SASS 모듈을 가져오고 변환 할 수있는 3 개의 모듈이 필요합니다.

다음은 웹 팩 구성의 예입니다.

 module.exports = {
  // ...
  모듈 : {
    규칙 : [
      {
        테스트 : /\.scss$/,
        사용 : [ "Style-Loader", "CSS-Loader", "Sass-Loader"]
      },
      // ...
    ]]
  }
};

JavaScript에서 SASS (또는 더 구체적으로 SCSS) 변수를 만들려면 "내보내기"가 필요합니다.

 // 변수 .Scss
$ 1 차 컬러 : #fe4e5e;
$ 배경색 : #fefefe;
$ 패딩 : 124px;

:내보내다 {
  1 차 콜러 : $ 1 차 컬러;
  배경 통화 : $ 배경색;
  패딩 : $ 패딩;
}

:export Block은 변수를 가져 오기 위해 사용하는 Magic Webpack입니다. 이 접근법의 장점은 낙타 명명법을 사용하여 변수의 이름을 바꾸고 공개 할 내용을 선택할 수 있다는 것입니다.

그런 다음 SASS 파일 ( variables.scss )을 JavaScript로 가져 와서 파일에 정의 된 변수에 액세스 할 수 있습니다.

 './variables.scss'에서 가져 오기 변수;

/*
  {
    PrimaryColor : "#fe4e5e"
    BackgroundColor : "#fefefe"
    패딩 : "124px"
  }
*/

document.getElementById ( "app"). style.padding = 변수.

:export 구문에는 주목할만한 제한 사항이 있습니다.

• 최상위 수준이어야하지만 파일의 어느 곳에도있을 수 있습니다.
• 파일에 여러 가지가 있으면 키와 값이 결합되어 함께 내보내집니다.
• exportedKey 반복되면 마지막으로 (소스 순서로) 우선합니다.
• exportedValue CSS 선언 값에 유효한 모든 문자 (공백 포함)가 포함될 수 있습니다.
• exportedValue 이미 문자 그대로 문자열로 간주되므로 따옴표가 필요하지 않습니다.

JavaScript에서 SASS 변수에 액세스 할 수있는 방법에는 여러 가지가 있습니다. 이 방법을 사용하여 중단 점을 공유하는 경향이 있습니다. 다음은 내 breakpoints.scss 파일입니다. 나중에 JavaScript로 가져 와서 matchMedia() 메소드를 사용하여 일관된 중단 점을 얻을 수 있습니다.

 // 중단 점 값을 정의하는 SASS 변수 $ 중단 점 : (
  모바일 : 375px,
  태블릿 : 768px,
  // 등.
);

// 미디어 쿼리를 작성하는 데 사용되는 SASS 변수 $ media : (
  모바일 : '(max-width : #{map-get ($ breakpoints, mobile)})',
  태블릿 : '(max-width : #{map-get ($ breakpoints, tablet)})',
  // 등.
);

// JavaScript에서 SASS 변수에 액세스 할 수 있도록하는 내보내기 모듈 : 내보내기 {
  BreakPointMobile : unquote (map-get ($ media, mobile));
  BreakPointTablet : unquote (map-get ($ media, tablet));
  // 등.
}

애니메이션은 또 다른 사용 사례입니다. 애니메이션의 지속 시간은 일반적으로 CSS에 저장되지만 더 복잡한 애니메이션에는 JavaScript의 도움이 필요합니다.

 // animation.scss
$ Global-Animation 기간 : 300ms;
$ Global-Animation-easing : 쉽게 아웃;

:내보내다 {
  애니메이션 구성 : 스트립 유닛 ($ Global-Animation-Duration);
  애니메이션 : $ Global-Animation-easing;
}

변수를 내보낼 때 사용자 정의 strip-unit 기능을 사용했습니다. 이를 통해 JavaScript 측면에서 컨텐츠를 쉽게 구문 분석 할 수 있습니다.

 // main.js
document.getElementById ( 'image'). 애니메이션 ([[
  {transform : 'scale (1)', 불투명도 : 1, 오프셋 : 0},
  {transform : 'scale (.6)', 불투명도 : .6, 오프셋 : 1}
], {
  기간 : 숫자 (변수.animationDuration),
  쉬운 : 변수. 애니메이션,
});

CSS, Sass 및 JavaScript간에 데이터를 교환 할 수있어서 기쁩니다. 이와 같은 공유 변수는 코드를 간결하고 건조하게 만듭니다.

물론 동일한 기능을 달성하는 방법에는 여러 가지가 있습니다. Les James는 2017 년에 Sass와 JavaScript가 JSON을 통해 상호 작용할 수있는 흥미로운 방법을 공유했습니다. 저는 편견이있을 수 있지만 여기에 소개하는 방법이 가장 쉽고 직관적 인 방법이라고 생각합니다. 이미 사용하고 작성한 CSS 및 JavaScript 방식에 미친 변경이 필요하지 않습니다.

다른 방법으로 다른 방법을 사용 했습니까? 의견을 공유하십시오 -이 문제를 해결하는 방법을보고 싶습니다.

위 내용은 JavaScript가 CSS 및 Sass와 대화 할 수 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!