【JavaWeb学习】CSS（less）

Garcia • Kirlant

已于 2022-05-15 10:06:09 修改

阅读量216

点赞数

分类专栏： web前端学习文章标签： css less 学习

于 2022-05-08 10:53:15 首次发布

本文链接：https://blog.csdn.net/WingNebula/article/details/124644936

版权

web前端学习专栏收录该内容

25 篇文章 1 订阅

订阅专栏

less是一门CSS的预处理语言，是CSS的增强版。通过less可以编写更少的代码实现更强大的样式。
在less中添加了许多新特性，像对变量的支持、对mixin的支持等。
less的语法大体上和CSS一致，但是less中增添了许多对CSS的扩展，所以浏览器无法直接执行less代码，要执行必须先将less转换为CSS。
less中所有的数值都可以直接运算

引入

将其他的less文件中的样式引入当前文件中@import "path/xxx.less";

变量

在变量中可以存储一个任意的值，并且可以在需要时任意修改变量中的值。
语法：@变量名：变量值；
使用变量时，如果直接使用，则用@变量名；如果作为类名或一部分值使用时，必须用@{变量名}，比如background-image:url("@{part_path}/1.png");

@a:200px;
@b:100px;
@c:box3;
.box1{
    width: @a;
    height: @a;
    background-color: aqua;
    .box2{
        width: @b;
        height: @b;
        background-color: aquamarine;
        .@{c}{
            width: 50px;
            height: 50px;
            background-color: antiquewhite;
        }
    }
}

父元素

@a:200px;
@b:100px;
.box1{
    width: @a;
    height: @a;
    background-color: rgb(170, 255, 255);
    .box2{
        width: @b;
        height: @b;
        background-color: rgb(185, 255, 232);
        &:hover{
            background-color: azure;
        }
    }
    // 子元素选择器        
    >.box3{
        width: 50px;
        height: 50px;
        background-color: rgb(255, 254, 253);
    }
    // &表示外层的父元素
    &:hover{
        background-color: aliceblue;
    }
}

扩展

@a:200px;
.box1{
    width: @a;
    height: @a;
    background-color: rgb(185, 249, 249);
    &:hover{
        background-color: aliceblue;
    }
}
// extend对当前选择器扩展指定选择器的样式，类似于选择器分组
.box2:extend(.box1){
    color:purple;
    &:hover{
        background-color: silver;
    }
}
// 直接对指定样式进行引用，相当于将box1的样式进行了复制
.box3{
    .box1();
}

使用类选择器时可以在选择器后面添加一个括号，实际上是保存了这个样式，供其他选择器引用。

.box(){
    width: @a;
    height: @a;
    background-color: rgb(185, 249, 249);
    &:hover{
        background-color: aliceblue;
    }
}
.box3{
    .box;
}

混合函数

在混合函数中可以直接设置变量，定义时设了几个变量，在调用时就要传几个参数，可以按顺序传参也可以根据名字传参。
有一些很好用的functions，可以看一看。

.box(@edge,@bg-color){
    width: @edge;
    height: @edge;
    background-color: @bg-color;
    &:hover{
        background-color: aliceblue;
    }
}
.box1{
    .box(300px,rgb(221, 253, 213));
    /*.box(@bg-color:rgb(221, 253, 213),@edge:300px);*/
}

弹性盒 flex

CSS的布局手段，代替“浮动”进行页面布局。
flex可以使元素具有弹性，让元素可以跟随页面大小的改变而改变。

弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器。
display设置弹性容器

flex 设置为块级弹性容器
inline-flex设置为行内弹性容器

弹性元素

弹性容器的直接子元素是弹性元素，或者叫弹性项。一个元素可以同时是弹性容器和弹性元素。
主轴：弹性元素的排列方向
侧轴：与主轴方向垂直的轴

弹性容器上的样式

flex-wrap 设置弹性元素是否在弹性容器中自动换行
nowrap 默认值，不自动换行
wrap 沿辅轴方向换行
wrap-reverse 沿辅轴反方向换行
flex-flow wrap和direction的简写属性
justify-content如何分配主轴上的剩余空间（主轴上的元素如何排列）；align-content 如何分配辅轴上的剩余空间
flex-start 沿主轴起边排列
flex-end 沿主轴终边排列
center 元素居中排列
space-around 空白分配到每个元素的两侧（就像 margin-left + margin-right ）
space-between 空白均匀分布到元素间
space-evenly 空白分布到元素的单侧
align-items 元素在辅轴上如何对齐
stretch 默认值，将处于同一行元素的长度设置为相同的值
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 沿着辅轴终边对齐
center 居中对齐
baseline 基线对齐
align-self 单独为每个弹性元素进行设置，覆盖之前的align-items

弹性元素上的样式

flex-grow 弹性元素的伸展系数
当父元素有多余的空间时，子元素如何伸展，父元素的剩余空间会按比例分配
flex-shrink 弹性元素的收缩系数
当父元素中的空间不足以容纳所有子元素时，如何对子元素进行收缩，值越大收缩的越厉害，值为0时不进行收缩
flex-direction指定弹性容器的可选方向
row 默认值，水平排列，从左向右
row-reverse 水平排列，从右向左
column 垂直排列，从上到下
column-reverse 垂直排列，从下到上
flex-basis 元素在主轴上的基础长度：主轴横向-指定宽度，主轴纵向-指定高度；默认值是auto，表示参考元素自身的高度或宽度，如果传递了一个具体数值，则以该值为准
flex简写属性，设置弹性元素全部的三个样式，顺序：增长系数缩减系数基础长度
initial：flex: 0 1 auto;
auto：flex: 1 1 auto;
none：flex: 0 0 auto; 没有弹性
order 决定弹性元素的排列顺序

.outer{
    width: 800px;
    height: 400px;
    margin: 100px auto;
    background-color: rgb(244, 244, 244);
    border: 2px solid rgb(174, 174, 174);
    display:flex;
}
.box(@edge,@bg-color,@size:20px){
    width: @edge;
    height: @edge;

    line-height: @edge;
    font-size: @size;
    text-align: center;

    background-color: @bg-color;
    
    &:hover{
        background-color: aliceblue;
    }
}
.box1{
    .box(100px,rgb(221, 253, 213));
    flex-grow: 1;
}
.box2{
    .box(100px,rgb(185, 249, 249));
    flex-grow: 2;
}
.box3{
    .box(100px,rgb(253, 252, 213));
    flex-grow: 3;
}

<div class="outer">
    <div class="box1">1</div>
    <div class="box2">2</div> 
    <div class="box3">3</div>
</div>

练习

w3school导航条

.outer{
    width: 1210px;
    height: 48px;
    line-height: 48px;
    margin: 50px auto;
    background-color: #E8E7E3;
    display:flex;
    li{
        flex-grow: 1;
    }
}
.each(@size, @color){
    
    display: block;
    font-size: @size;

    color: @color;

    text-decoration: none;
    text-align: center;
    margin: auto;

    &:hover{
        background-color: #636363;
        color:#fff;
    }
}
a{
    .each(16px, #808080);
}

<!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>大秦帝国</title>
        <link rel="shortcut icon" href="./imgs/kirlant.ico">
        <link rel="stylesheet" href="./baseCSS/reset.css">
        <link rel="stylesheet" href="./css/all.css">
        <link rel="stylesheet" href="./learn.css">
    </head>
    <body>
        <ul class="outer">
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">Browser Side</a></li>
            <li><a href="#">Server side</a></li>
            <li><a href="#">Programming</a></li>
            <li><a href="#">XML</a></li>
            <li><a href="#">Web Building</a></li>
            <li><a href="#">Reference</a></li>
        </ul>
    </body>
</html>

模拟淘宝移动端的图片排布

@edge:100px;
nav{
    width: 90%;
    margin: 20px 5%;
}
.inner{
    display: flex;
    justify-content: space-around;
}
.item{
    width: 25%;
    text-align: center;
    img{
        width: 100%;
    }
    a{
        color: #333;
        text-decoration: none;
        font-size: 12px;;
    }
}

<!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>大秦帝国</title>
        <link rel="shortcut icon" href="./imgs/kirlant.ico">
        <link rel="stylesheet" href="./baseCSS/reset.css">
        <link rel="stylesheet" href="./css/all.css">
        <link rel="stylesheet" href="./learn.css">
    </head>
    <body>
        <nav class="outer">
            <div class="inner">
                <div class="item"><a href="#">
                    <img src="./imgs/bf_3.jpg">
                    <span>白凤</span>
                </a></div>
                <div class="item"><a href="#">
                    <img src="./imgs/ssm_3.jpg">
                    <span>少司命</span>
                </a></div>
                <div class="item"><a href="#">
                    <img src="./imgs/xh_3.jpg">
                    <span>星魂</span>
                </a></div>
            </div> 
            <div class="inner">
                <div class="item"><a href="#">
                    <img src="./imgs/bf_3.jpg">
                    <span>白凤</span>
                </a></div>
                <div class="item"><a href="#">
                    <img src="./imgs/ssm_3.jpg">
                    <span>少司命</span>
                </a></div>
                <div class="item"><a href="#">
                    <img src="./imgs/xh_3.jpg">
                    <span>星魂</span>
                </a></div>
            </div>
        </nav>
    </body>
</html>