디스플레이를 전환하기 위해 외부에서 css에 매개 변수를 전달합니다
css는 변수의 구조를 가지고 정의를 총괄할 수 있습니다.
test.css
:root {
--color: red;
}
div {
color: white;
background-color: var(--color)
}
test1.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div>赤</div>
</body>
</html>
그러나 이것은 css에서 변수로 사용할 수 있을 뿐만 아니라 html 측면에서 직접 스타일을 지정하여 변수를 덮어쓸 수 있다
즉, 아래의 html
test2.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div>赤</div>
<div style="--color: blue;">青</div>
<div style="--color: gold;">金</div>
</body>
</html>
이 구조의 즐거움을 말하자면 예를 들어 모든 사용자가 화면 디자인을 바꾸고 싶은 상황에서 html로 스타일을 놀리는 것이 아니라 html과 css 간의 교환을 통해 디자인의 지정을 css로만 전환하는 곳을 실현한다.
스타일을 직접 만지작거리면(
<div style="background-color: blue;">그런 형식), 같은 스타일의 지정은 css와 html로 중복되지만, 값만 건네주고 디자인은 css로 이런 원칙을 결정하면 어느 정도 지켜질 수 있다.그리고 이 실현에서는javascript를 통과하지 않습니다.
만약 디자인이 디자인의 문제로 끝날 수 있다면 더할 나위 없이 좋을 것이다. 이렇게 갇히면 기분이 매우 좋을 것이다.
rails/haml/scss 응용 프로그램에서 동적 전환을 보여 줍니다. 잘 부탁드립니다.
Reference
이 문제에 관하여(디스플레이를 전환하기 위해 외부에서 css에 매개 변수를 전달합니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/retake272/items/1afce741aad2a4ab1578텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
