css+less变量

1.css变量的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="./main.js"></script>
    <style>
        .test_css_val{
            /*通过--定义变量 */
            --bgColor:red;
            /*通过var()使用变量 */
            background-color: var(--bgColor);

        }
        .test_css_unval{
            background-color: rebeccapurple;
        }

        .test_css_default{
            /* 第二个参数是默认值，当没有变量传入时默认使用默认 */
            background-color: var(--bgColor,yellow);
        }

        .test_css_joint1{
            --bgColor:red;
            /* 变量的拼接 */
            border: var(--bgColor) solid 1px;
        }
        /* 变量的拼接 */
        .test_css_default:after{
            --msg:"这是一个信息";
            content: var(--msg) "---这是拼接的尾巴";
        }
        /* 使用calc进行计算 */
        .test_css_calc{
            width: calc(50% - 100px);
            height: 300px;
            background-color: aquamarine;
        }
        /* 使用calc + 变量进行计算 */
        .test_css_var_calc{
            --width:100px;
            width: calc(50% - var(--width));
            height: 300px;
            background-color: rosybrown;
        }
        /* 使用calc的使用细节:calc中的运算符的左右两侧必须加空格 */
        .test_css_calc_detail{
            height: calc(100px + 100px);
            background-color: salmon;
        }

        /* 根标签里定义通用变量 */
        :root{
            --c_color:red;
        }
        /* css原生变量的定义域 */
        .test_css_domain1{
            --color:blue;
            background-color: var(--color);
            color: var(--c_color);
        }
        /* 不能使用--color */
        .test_css_domain2{
            background-color: var(--color);
            color: var(--c_color);
        }
    </style>
</head>
<body>

<div class="test_css_val">非变量的形式</div>
<div class="test_css_unval">非变量的形式</div>
<div class="test_css_default">没有变量时的默认背景色</div>
<div class="test_css_joint1">没有变量时的默认背景色</div>
<div class="test_css_calc">通过calc计算宽度</div>
<div class="test_css_var_calc">通过calc+变量计算宽度</div>
<div class="test_css_calc_detail">使用calc的使用细节:calc中的运算符的左右两侧必须加空格</div>
<div class="test_css_domain1">第一个定义域</div>
<div class="test_css_domain2">第二个定义域</div>

</body>
</html>

2.less变量使用：变量+混合+嵌套+循环
webstorm配置less：通过命令npm install -g less先安装less

image.png

html内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 浏览器不支持less文件,所以直接引用css -->
    <link href="css/test.css" rel="stylesheet" />
</head>
<body>

<div class="less_val">在less中使用变量</div>
<div class="less_minmax">在less中使用函数</div>
<div class="less_nest">
    <span>less中样式的嵌套1
        <h4>less中样式的嵌套2</h4>
    </span>

</div>

<div class="div_c">
    <div class="div_class1">循环的第一块</div>
    <div class="div_class2">循环的第二块</div>
</div>

</body>
</html>

less内容如下：

/* 1.less中声明变量是通过 @变量名 生成 */
@color:red;
@border: 1px solid blue;
/* 使用变量，如何声明则如何使用*/
.less_val{
  background-color: @color;
  border: @border;
}

/* 2.minxin 混合函数 less 通过 . 声明函数 */
.setColor(@c){
  background-color: white;
  color: @c;
  border: 1px solid @c;
}

.less_minmax{
  .setColor(blue)
}

/* 3.嵌套 */
.less_nest{
  span{
    color: yellow;
    h4{
      color: yellowgreen;
    }

  }
}

/* 4.循环(递归) */
/* 当@index的值大于0的时候就继续执行 */
.less_loop( @index ) when ( @index > 0 ){
  /* @index进入的顺序为10 、9 、8、7...1 */
  .less_loop( @index - 1 );
  /* @index出来的顺序为1 、2 、3、4...10 */
  width: @index * 10px;
}


.loop( @index ) when ( @index > 0 ){
  .loop( @index - 1 );
  // 固定这种写法
  .div_class@{index}{
    width: @index * 100px;
    background-color: rebeccapurple;
  }
}

.div_c{
  .loop(2);
}