JavaScript가 CSS 및 Sass와 어떻게 상호작용하는지 살펴보겠습니다.

JavaScript와 CSS는 20년 넘게 공존해 왔습니다. 하지만 그들 사이에 데이터를 공유하는 것은 매우 어렵습니다. 물론 많은 시도가 있습니다. 하지만 제가 염두에 둔 것은 구조적 변경이 아닌 CSS 사용자 정의 속성이나 심지어 Sass 변수를 사용하는 간단하고 직관적인 것이었습니다.

CSS 사용자 정의 속성 및 JavaScript

사용자 정의 속성은 여기서 놀라운 일이 아닙니다. 브라우저가 지원되는 동안 브라우저가 수행해 온 작업 중 하나는 JavaScript를 사용하여 값을 설정하고 조작하는 것입니다.

그러나 특히 JavaScript가 사용자 정의 속성과 작동하도록 할 수 있는 몇 가지 방법이 있습니다. setProperty를 사용하여 사용자 정의 속성 값을 설정할 수 있습니다. setProperty 设置自定义属性的值：

document.documentElement.style.setProperty("--padding", 124 + "px"); // 124px

我们还可以用 JavaScript 中的 getComputedStyle 来检索 CSS 变量。其背后的逻辑非常简单：自定义属性是样式的一部分，因此它们是计算样式的一部分。

getComputedStyle(document.documentElement).getPropertyValue('--padding') // 124px

与 getPropertyValue 一样。这样我们就可以从 HTML 标记的内联样式中获得自定义属性值。

document.documentElement.style.getPropertyValue("--padding'"); // 124px

请注意，自定义属性是有作用域的。这意味着我们需要从特定元素获取计算样式。正如我们之前在:root

module.exports = {
 // ...
 module: {
  rules: [
   {
    test: /\.scss$/,
    use: ["style-loader", "css-loader", "sass-loader"]
   },
   // ...
  ]
 }
};

getCompulatedStyle

에서 CSS 변수를 검색합니다. 이에 대한 논리는 매우 간단합니다. 사용자 정의 속성은 스타일의 일부이므로 계산된 스타일의 일부입니다.

// variables.scss
$primary-color: #fe4e5e;
$background-color: #fefefe;
$padding: 124px;

:export {
  primaryColor: $primary-color;
  backgroundColor: $background-color;
  padding: $padding;
}

getPropertyValue와 동일합니다. 이렇게 하면 HTML 태그의 인라인 스타일에서 사용자 정의 속성 값을 얻을 수 있습니다.

import variables from './variables.scss';

/*
 {
  primaryColor: "#fe4e5e"
  backgroundColor: "#fefefe"
  padding: "124px"
 }
*/

document.getElementById("app").style.padding = variables.padding;

사용자 정의 속성에는 범위가 있다는 점에 유의하세요. 이는 특정 요소에서 계산된 스타일을 가져와야 함을 의미합니다. 이전에 :root에 변수를 정의한 것처럼 HTML 요소에 변수를 배치합니다.

Sass 변수 및 JavaScript

Sass는 사전 처리된 언어입니다. 즉, 웹사이트의 일부가 되기 전에 CSS로 변환됩니다. 따라서 CSS 사용자 정의 속성과 동일한 방식으로 JavaScript에서 액세스할 수 없습니다(계산된 스타일의 DOM에서 액세스할 수 있음). 우리는 자체 빌드 프로세스를 수정하여 이를 변경해야 합니다. 나는 대부분의 경우 로더가 이미 빌드 프로세스의 일부이기 때문에 많은 작업을 수행할 필요가 없을 것이라고 생각합니다. 하지만 프로젝트에 그렇지 않은 경우 Sass 모듈을 가져오고 번역할 수 있는 세 개의 모듈이 필요합니다.

Webpack 구성에서는 다음과 같습니다.

:export 块是 webpack 用来导入变量的。这种方法的好处是，我们可以用 camelCase 语法重命名变量，然后选择要公开的内容。

然后，把 Sass 文件（variables.scss）导入 JavaScript，从而可以访问文件中定义的变量。

// Sass variables that define breakpoint values
$breakpoints: (
  mobile: 375px,
  tablet: 768px,
  // etc.
);

// Sass variables for writing out media queries
$media: (
  mobile: '(max-width: #{map-get($breakpoints, mobile)})',
  tablet: '(max-width: #{map-get($breakpoints, tablet)})',
  // etc.
);

// The export module that makes Sass variables accessible in JavaScript
:export {
  breakpointMobile: unquote(map-get($media, mobile));
  breakpointTablet: unquote(map-get($media, tablet));
  // etc.
}

值得一提的是对 :export 语法的一些限制：

• 它必须在顶层，但可以在文件中的任何位置。
• 如果文件中有多个，则将 key 和 value 组合在一起一并导出。
• 如果特定的 exportedKey 被复制，则最后一个（按源顺序）优先。
• exportedValue 可以含有在 CSS 声明值中任何有效的字符（包括空格）。
• exportedValue 不需要被引用，因为它已经被当作文本字符串了。

有很多方法可以方便地访问 JavaScript 中的 Sass 变量。我倾向于使用这种共享断点的方法。下面是我的breakpoints.scs 文件，后来我将其导入 JavaScript 中，这样我可以用 matchMedia()方法得到一致的断点。

// animation.scss
$global-animation-duration: 300ms;
$global-animation-easing: ease-in-out;

:export {
  animationDuration: strip-unit($global-animation-duration);
  animationEasing: $global-animation-easing;
}

动画是另一个用例。动画的持续时间通常存储在 CSS 中，但是需要 JavaScript 的帮助才能完成更复杂的动画。

// main.js
document.getElementById('image').animate([
  { transform: 'scale(1)', opacity: 1, offset: 0 },
  { transform: 'scale(.6)', opacity: .6, offset: 1 }
], {
  duration: Number(variables.animationDuration),
  easing: variables.animationEasing,
});

请注意，在导出变量时，我用了自定义 strip-unit

rrreee

Sass(또는 이 경우에는 특히 SCSS) 변수를 JavaScript에서 사용할 수 있도록 하려면 해당 변수를 "내보내야" 합니다.

rrreee

:export 블록은 webpack이 변수를 가져오는 데 사용하는 것입니다. 이 접근 방식의 이점은 camelCase 구문을 사용하여 변수 이름을 바꾼 다음 노출할 항목을 선택할 수 있다는 것입니다. 그런 다음 파일에 정의된 변수에 액세스할 수 있도록 Sass 파일(variables.scss)을 JavaScript로 가져옵니다.

rrreee🎜:export 구문에 대한 몇 가지 제한 사항을 언급할 가치가 있습니다. 🎜

• 최상위 수준에 있어야 하지만 파일의 어느 위치에나 있을 수 있습니다.
• 파일이 여러 개인 경우 키와 값을 결합하여 내보냅니다.
• 특정 exportedKey가 복사되면 마지막 항목(소스 순서)이 우선 적용됩니다.
• exportedValue는 CSS 선언 값에 유효한 문자(공백 포함)를 포함할 수 있습니다.
• exportedValue는 이미 텍스트 문자열로 처리되므로 인용할 필요가 없습니다.

🎜JavaScript에서 Sass 변수에 쉽게 액세스하는 방법은 여러 가지가 있습니다. 나는 이 공유 중단점 방법을 선호합니다. 다음은 matchMedia() 메서드를 사용하여 일관된 중단점을 얻을 수 있도록 나중에 JavaScript로 가져온 breakpoints.scs 파일입니다. 🎜rrreee🎜애니메이션은 또 다른 사용 사례입니다. 애니메이션의 지속 시간은 일반적으로 CSS에 저장되지만 더 복잡한 애니메이션에는 JavaScript의 도움이 필요합니다. 🎜rrreee🎜변수를 내보낼 때 맞춤 스트립 유닛🎜 기능. 이를 통해 JavaScript의 내용을 쉽게 구문 분석할 수 있습니다. 🎜rrreee🎜이를 통해 CSS, Sass 및 JavaScript 간에 데이터를 쉽게 교환할 수 있습니다. 이와 같이 변수를 공유하면 코드가 단순해지고 덜 장황해집니다. 🎜🎜물론 동일한 목표를 달성하는 방법에는 여러 가지가 있습니다. Les James는 🎜Sass와 JavaScript가 JSON을 통해 상호 작용할 수 있는 흥미로운 방법🎜을 공유했습니다. 나는 이것에 대해 편견을 가질 수도 있지만 여기에 제시된 방법이 가장 간단하고 직관적이라고 생각합니다. 이미 사용하고 작성하고 있는 CSS와 JavaScript를 대대적으로 변경할 필요가 없습니다. 🎜

영어 원본 주소: https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/

저자: Marko Ilic

프로그래밍 관련 지식을 더 보시려면 다음 사이트를 방문해 주세요. : 프로그래밍 동영상! !

위 내용은 JavaScript가 CSS 및 Sass와 어떻게 상호작용하는지 살펴보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!