less文件到最后

转载

架构魔法师 2024-07-16 18:04:19

文章标签 less文件到最后 CSS 嵌套运算符 文章分类 架构后端开发

1.什么是less?

less是一门CSS预处理语言（不能直接渲染页面，要编译成CSS文件才可以），它是对CSS的扩充，增加了变量、函数、嵌套的功能，让网页开发中的CSS更容易维护，提高开发效率。

2.如何安装less？

在命令行：npm install -g less
验证less有没有安装成功？lessc -v
创建一个less文件，书写less代码
.编译less文件

方式1：命令行 lessc *.less *.css
lessc *.less *.css -x (压缩)
方式2：使用koala外部编译文件
注意事项：可以选择压缩；
可以监听less文件的变化，自动编译；
可以生成资源地图文件
方式3：针对于webstorm配置自动编译而来
File->setting->File watcher->右上角加号（新建）

less文件到最后_嵌套

Less的语法

注释

注释：

//单行注释

/**/多行注释

单行注释编译之后不保留，多行注释编译之后会保留

变量

为什么使用变量？

将重复使用的CSS属性定义为变量，可以重复使用，方便后期CSS的维护。

2. 定义变量的语法

@ 变量名称：变量值（css的值）

变量值必须符合CSS的规范

3. 变量的使用

在选择器中属性的名称：@变量

less文件到最后_CSS_02

生成的CSS代码

less文件到最后_less文件到最后_03

注意事项：

变量与字符串拼接时，需要使用{}将变量名称包裹起来，并且@符号放在{}外面

混合

Mixins有点像函数，在定义之后，可以通过名称调用。（也支持动态传参）。

混合可以将一个定义好的classA轻松的调用到另一个classB中，从而简单实现classB继承classA中的所有属性。我们还可以带参数的调用，就像调用函数一样。

1.什么是Mixins混合？

简单来说就是函数，可以封装CSS，在别的选择器中调用，提高代码的重用性和可用性。

2.定义混合的语法：

定义混合：

.混合名（）{
   //封装的CSS代码
}
.混合名（@参数名称：默认值）{
   //封装的CSS代码
}
调用混合
h1{
   .混合名称（）；
}
h2{
   .混合名称（参数的值）；
}

3.示例

less文件到最后_CSS_04

生成的CSS代码

less文件到最后_运算符_05

模式匹配

1. 模式匹配的含义

相当于定义相同的混合名称，根据分支的值决定执行哪个分支，但是有一个公共的分支（任何分支都会调用）。

@_表示匹配所有，通常用于定义公共部分。

2. 模式匹配的使用形式

less文件到最后_嵌套_06

生成的CSS代码

less文件到最后_CSS_07

颜色函数

色彩三要素：色相（颜色的名称）、饱和度（鲜艳程度）、明度（明暗程度）
颜色函数

亮度

lighten(@color，10%) //比@color亮10%的颜色

darken(@color，10%) //比@color暗10%的颜色

饱和度

saturate（@color, 10%） //比@color浓10%的颜色

desaturate (@color ，10%) //比@color淡10%的颜色

色相

spin(@color ,10) //色相值增加10

spin(@color ,-10) //色相值增加10

mix(@color1, @color2) //混合两种颜色

3. 示例

less文件到最后_运算符_08

生成的CSS代码：

less文件到最后_运算符_09

嵌套

1. 什么是嵌套？

具有层级关系的CSS样式，CSS的层级最终是由HTML的结构决定的。

2. 嵌套用在哪里？

用在具有后代关系和父子关系的选择器中，这样很大程度上减少了代码量，并且代码结构看起来更加清楚。

3. 如何使用嵌套？

爷爷容器{
  //爷爷的样式
  大伯容器{
//大伯自己的样式
&>*{
  大伯所有儿子的样式
}
大伯儿子容器{
}
}
  爸爸容器{
  //爸爸自己的样式
儿子容器{
}
}
二叔容器{
  //二叔自己的样式
   二叔儿子{
}
}
}

使用&符号表示父元素：父子、兄弟、邻居、伪类

4.示例

@width_header: 1000px;
@height_header: 100px;
@bgColor: green;
@bgImage: '../img';

*{
    margin: 0;
    padding: 0;
}
header{
   margin: 0 auto;
   width:@width_header;
   height: @height_header; 
   background-color: @bgColor;
   display: flex;
   
   #logo{
       width: 180px;
       height: @height_header;
       background: url('@{bgImage}/bg.jpg') no-repeat;
   }
       
   ul{
       list-style-type: none;
       width: @width_header - 180px;
       display: flex;
       justify-content: space-around;
      
       
       li{
           width: (@width_header - 180px)/10;
           height: @height_header;
           background-color: pink;
           line-height: @height_header;
           text-align: center;
           
           a{
               text-decoration: none;
               font-size: 50px;
               &:link{
                   color: red;
               }
               &:visited{
                   color: yellow;
               }
               &:hover{
                   color: blue;
               }
               &:active{
                   color: purple;
               }
           }
       }
   }
}

生成的CSS代码

* {
  margin: 0;
  padding: 0;
}
header {
  margin: 0 auto;
  width: 1000px;
  height: 100px;
  background-color: #008000;
  display: flex;
}
header #logo {
  width: 180px;
  height: 100px;
  background: url('../img/bg.jpg') no-repeat;
}
header ul {
  list-style-type: none;
  width: 820px;
  display: flex;
  justify-content: space-around;
}
header ul li {
  width: 82px;
  height: 100px;
  background-color: pink;
  line-height: 100px;
  text-align: center;
}
header ul li a {
  text-decoration: none;
  font-size: 50px;
}
header ul li a:link {
  color: red;
}
header ul li a:visited {
  color: yellow;
}
header ul li a:hover {
  color: blue;
}
header ul li a:active {
  color: purple;
}