CSS/CSS3中的原生变量var详解以及布局响应式网页扩展

前端开发作者： 2024-08-20 16:20:01

使用语法首先我们先来看一个例子：html代码： css代码：实现效果：结果是该DOM元素背景变成了黑色。 CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的

<div class="element">这是一段文字</div>

.element {
  width:200px;
  height:
  --main-bg-color: #000;
  color:#fff;
  background-color: var(--main-bg-color);
}

:root{
    --main-bg-color: #000;
}
.element {
    background-color: var(--main-bg-color);
}


  --黑色: var(--黑色);
}

 var(--new-bg-color,#EE0000);
}

body {
  --color: 20px; #369; var(--color,#cd0000);
}

A. transparent
B. 20px
C. #369
D. #cd0000


    --color: transparent;
}

id="jsDom"#jsDom {
    --my-varwidth: 200px;
    color:
    width:var(--my-varwidth);
    height:200px;
}

var element = document.getElementById('jsDom');
var curWidth = getComputedStyle(element).getPropertyValue("--my-varwidth");
console.log(curWidth); //200px

设置过后该DOM元素的宽度变为了300px
element.style.setProperty("--my-varwidth",'300px');

="jsDom" style="--my-varwidth:400px;width:var(--my-varwidth);">

var curWidth = element.style.getPropertyValue("--my-varwidth"400px

预处理器变量不是实时的

$gutter: 1em;
@media (min-width: 30em) {
     $gutter: 2em; 
} 
 .Container { 
     padding: $gutter; 
 }

.Container { 1em;
 }

预处理器变量不能级联

$font-size: 1em;
.user-setting-large-text {
    $font-size: 1.5em;
} 
body { 
    font-size: $font-size; 
}

 1em;
}

预处理器变量不继承

.alert { lightyellow;
}
.alert.info { lightblue;
}
.alert.error { orangered;
}

.alert button {
    border-color: darken(background-color,25%);
}

预处理器变量不可互操作

:root {
    --gutter:

@media (min-width: 30em) {
    :root {
        --gutter: 2em;
    }
}
@media (min-width: 48em) {
    :root {
        --gutter: 3em;
    }
}

h1>这是标题>
="warpper">
    ="item item1">1="item item2">2="item item3">3="item item4">4html,body{padding:0;margin:0;}
:root {
  --base-font-size: 30px;
  --columns: 200px 200px;
  --base-margin: 30px;
}

@media all and (max-width: 450px) {
  :root {
    --columns: 200px;
    --base-margin: 15px;
    --base-font-size: 20px;
  }
}

h1 {
  font-size: var(--base-font-size);
  margin: var(--base-margin) ;
}
.warpper {
  display: grid; var(--base-margin) ;
  grid-template-columns: var(--columns);
}
.item{text-align: center;font-size:20px;color:height:40px;line-height: 40px;}
.item1{background:#acf4b6;}
.item2{#ffe975;}
.item3{#5efffa;}
.item4{#e6b4fd;}