日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

CSS樣式：less語言的用法

作者：那人獨釣寒江雪. 更新時間： 2022-07-12 編程語言 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            /* css原生也支持變量的設置 
            變量名可自取
            */
            --color:#bfa;
            --length:100px;
        }
        .box1{
            width: var(--length);
            height: 100px;
            background-color: var(--color)
        }
        .box2{
            width: 100px;
            height: 100px;
            color:#bfa;
        }
        .box3{
            width: 100px;
            height: 100px;
            border: 10px solid #bfa;
        }
    </style>
</head>
<body>
    <!-- less是一門css的預處理語言
        - less是一個css的增強版,通過less可以編寫更少的代碼實現更強大的樣式 -->
    <div class="box1">aaa</div>
    <div class="box2">bbb</div>
    <div class="box3">ccc</div>
</body>
</html>

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="C:\Users\Administrator\Desktop\HTML\CSS學習文件夾\7\10\syntax.css">
</head>
<body>
    
</body>
</html>

//import用來將其他的less引入到當前的less
@import "syntax.less";

//less中的單行注釋, 
.box1 {
    background-color: #bfa;

    .box2 {
        background-color: #ff0;

        .box4 {
            background-color: red;
        }
    }

    .box3 {
        background-color: orange;
    }
}

// 變量, 在變量中可以存儲一個任意的值
// 并且我們可以在需要時,任意的修改變量中的值
@a:100px;
@b:red;
@c:box6;

.box5{
    //使用變量時,如果可以直接使用 則以@變量名的形式使用即可
    width: @a;
    color: @b;
}
.p1{
    width: 100px;
    height: 200px;
}

//作為類名,或者一部分值使用時必須以@{變量名}的形式使用
.@{c}{
    width: @a;
    background-image: url("../../../圖片素材/1.jpg");
}

@d:200px;
@d:300px;

div{
    @d:115px;
    width: @d;
    //表示外層的父元素 為box1設置一個hover
    &:hover{
        color: oldlace;
    }
}

//:extend() 對當前選擇器擴展指定的選擇器的樣式(選擇器分組)
.p2:extend(.p1){
    color: red;
}
.p3{
    //直接對指定的樣式進行引用,這里就相當于將p1的樣式在這里進行了復制
    //mixin 混合
    .p1();
}
.p4(){
    width: 100px;
    height: 100px;
    background-color: #bfa;
}

//混合函數 在混合行數中可以直接設置變量
.test(@w:200px,@h:300px,@bg-color){
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}

div{
    //可更改默認值
    .test(100px,200px,red)
}

span{
    color: average(red,yellow);
}
.box7{
    //在less中所有的數值都可以直接進行運算
    width: 100px+100px;
    height: 100px/2;
    background-color: #bfa;
}

.box1 {
  background-color: #bfa;
}
.box1 .box2 {
  background-color: #ff0;
}
.box1 .box2 .box4 {
  background-color: red;
}
.box1 .box3 {
  background-color: orange;
}
.box5 {
  width: 100px;
  color: red;
}
.p1,
.p2,
.p2 {
  width: 100px;
  height: 200px;
}
.box6 {
  width: 100px;
  background-image: url("../../../圖片素材/1.jpg");
}
div {
  width: 115px;
}
div:hover {
  color: oldlace;
}
.p2 {
  color: red;
}
.p3 {
  width: 100px;
  height: 200px;
}
div {
  width: 100px;
  height: 200px;
  border: 1px solid red;
}
span {
  color: #ff8000;
}
.box7 {
  width: 200px;
  height: 100px/2;
  background-color: #bfa;
}
.box1 {
  background-color: #bfa;
}
.box1 .box2 {
  background-color: #ff0;
}
.box1 .box2 .box4 {
  background-color: red;
}
.box1 .box3 {
  background-color: orange;
}
.box5 {
  width: 100px;
  color: red;
}
.p1,
.p2,
.p2 {
  width: 100px;
  height: 200px;
}
.box6 {
  width: 100px;
  background-image: url("../../../圖片素材/1.jpg");
}
div {
  width: 115px;
}
div:hover {
  color: oldlace;
}
.p2 {
  color: red;
}
.p3 {
  width: 100px;
  height: 200px;
}
div {
  width: 100px;
  height: 200px;
  border: 1px solid red;
}
span {
  color: #ff8000;
}
.box7 {
  width: 200px;
  height: 100px/2;
  background-color: #bfa;
}

原文鏈接：https://blog.csdn.net/m0_62491934/article/details/125710959

欄目分類
最近更新