JavaScript가 CSS 및 Sass와 어떻게 상호작용하는지 살펴보겠습니다.-JS 튜토리얼-php.cn

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(&#39;--padding&#39;) // 124px

로그인 후 복사

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

document.documentElement.style.getPropertyValue("--padding&#39;"); // 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 &#39;./variables.scss&#39;;

/*
 {
  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: &#39;(max-width: #{map-get($breakpoints, mobile)})&#39;,
  tablet: &#39;(max-width: #{map-get($breakpoints, tablet)})&#39;,
  // 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(&#39;image&#39;).animate([
  { transform: &#39;scale(1)&#39;, opacity: 1, offset: 0 },
  { transform: &#39;scale(.6)&#39;, 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 구문에 대한 몇 가지 제한 사항을 언급할 가치가 있습니다. 🎜