yibu-xiaoxin

Appearance

Less&Sass ​

1.Less ​

1）Less简介 ​

​ Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数，嵌套等功能，让 CSS 更易维护、方便制作主题、扩充。

​ 官网

2）学习Less目的 ​

​ 提升开发效率，减少代码量。

注意：

​ 浏览器不能直接识别Less，必须先编译成CSS。

3）安装Less ​

​ 通过 npm （node.js 的包管理器），安装Less方法如下：

​ cnpm i -g less

image-20240122112016061

​ 查看安装是否成功：

​ lessc -v

image-20240122112034945

tips：

​ git Bash Here 支持cmd的操作，可以通过右键进入 git Bash here 执行命令。

4）编译 ​

①手动编译 ​

​ 编译：

​ lessc [less文件.less] [目录] [ 文件名.css]

​ 编译并压缩：

​ lessc [less文件.less] [目录] [ 文件名.css] -x

②使用插件进行编译（推荐） ​

​ 安装插件：Easy LESSimage-20240122114040489

​ 点击扩展设置进入 setting.json 配置文件

image-20240122114333467

​ 在setting.json中添加如下代码：

json
"less.compile": {
     "compress": true,/*是否进行压缩处理*/
     "sourceMap": false,/*是否生成map(映射文件)文件，如果为true则可以在控制台看到less行数*/
     // "out": "${workspaceRoot}\\dist\\css\\",/* 设置编译后的输出路径 为当前项目目录下的dist下的css文件夹下*/
     "out":"./dist/css/", /*输出当当前目录下的dist下的css文件夹内*/
     // "out":true, /*true：表示编译后输出，输出到当前目录下*/
     "outExt": ".css" /*设置编译后的文件的扩展名*/
    },

​ 对less文件进行修改后会自动进行编译并覆盖原css文件。

​ image-20240122114800609

​ **注意：**此处的输出目录一般是相对于当前vscode打开项目的作为根目录的，因此当当前项目在其它项目内被打开使，一般会出现输出路径错误。最好将此项目（此文件夹）单独打开。

③使用外部工具进行编译 ​

​ 安装考拉客户端编译工具。

​ 将要编译的CSS文件夹拖放到 考拉中，然后进行编译。当改动less文件时，会自动进行编译。

image-20240122122536663

image-20240122122552052

5）Less中的注释和变量 ​

①注释： ​

​ /* 注释 */ 可以被编译

​ // 注释 不会被编译

②变量 ​

​ 在Less中，可以使用变量，来统一设置一类可以重复使用的值。 使用@符号定义，语法如下：

less
@变量名: 变量值;

注意：

​ 变量与字符串拼接时，变量要用 @{变量名} 。

less
@imgUrl:"./imgs/1.png";

ul{
  background:url("@{imgUrl}");
}

6）混合mixin ​

①不带参数的混合用法 ​

​ 在less中定义一些通用的属性放在一个class中，然后再在另一个样式中调用它。

语法：

.类名{
	/* css样式表； */
}

使用：
.类名；

less

less
.overflowtxt{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
li {
  .overflowtxt;
  .flex-container;
}

css

css
.overflowtxt {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
li {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
②带参的混合用法 ​

语法：

less
// 定义
.类名(@变量[:初始值]){
/* css代码块; */
}

//使用：
.类名();	// 使用默认值
.类名(实参); // 传参

注意：.类名() {} 此部分代码不会被编译，而 .类名{} 这部分代码会被当做是对一个class的样式设置，将会被编译成css。

less：

less
.bd(@color:pink,@size:2px){ // 设置默认值
  border:@size soild @color;
}

// 使用
li{
  /* 使用默认值 */
  .bd();
  /* 只传递第二个参数 */
  .bd(@size:5px);
  /* 传递全部参数 */
  .bd(blue,3px);
}

css：

li {
  /* 使用默认值 */
  border: 2px soild pink;
  /* 只传递第二个参数 */
  border: 5px soild pink;
  /* 传递全部参数 */
  border: 3px soild blue;
}

7）模式匹配 ​

​ 相当于定义相同的混合名称，根据分支的值决定执行那个分支，但是有一个公共的分支（任何一个分支都会调用）。 ​ @_ 表示匹配所有，通常用于定义公共部分。

​ eg：传递不同的参数，画出同的三角形。

​ less：

less
// 公共CSS 匹配所有的
.tri(@_,@color,@size:10px){ 
  width: 0;
  height: 0;
  display: block;
  border:@size solid transparent;
}

/* 左三角形 */
.tri(l,@color,@size){
  border-left-color: @color;
}


/* 右三角形 */
.tri(r,@color,@size){
  border-right-color: @color;
}

/* 上三角形 */
.tri(t,@color,@size){
  border-top-color: @color;
}

/* 下三角形 */
.tri(b,@color,@size){
  border-bottom-color: @color;
}

// 调用
.triangle{
  .tri(l,blue,5px)
}
.triangle{
  .tri(r,aqua,20px)
}

​ css：

css
.triangle {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: blue;
}
.triangle {
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-right-color: aqua;
}
image-20240122145602033

8）运算符 ​

​ 运算符可以对角度，颜色，高度等变量进行运算。

​ 在Less中可以使用 +、-、 *、 /、 进行算数运算。

​ 注意：

  • 变量和常量之间进行运算要加上空格，若参数进行了算数运算最好为其加上括号。
  • 使用 / 时要加括号。

​ eg：对数值型变量进行计算

less
@w: 100px;
@num: 10px;
p {
  width: @w*2.5;
}
.container1 {
  margin: @num*2 @num*@w @num - 2;
}
.container2 {
  margin: ((@num+5) * 2) @num*1.5 (@num - 5) (@num / 3);
  // 注意：在写负号时要在运算符两侧加空格，乘号和加号不需要
  // 若参数进行了算数运算最好为其加上括号
}

​ eg：对颜色变量进行运算（直接对十六进制的颜色按位进行加减乘除 +溢出为f -溢出为0）

less
// 对颜色进行运算
@color1:#333;
@width:100px;
li{
  width: @width + 100px;  // 200px
  width: @width * 1.3;  // 130px
  width: @width * (1/3);  // 33.33333333px;
  height: 30px;
  list-style-type: none;
  background-color: #eee;
  margin-bottom: 10px;
  // 直接对十六进制的颜色按位进行加减乘除 +溢出为f -溢出为0
  &:nth-child(1){ //& 代表父级
    background-color: @color1 + @color2;//#999999
  }
  &:nth-child(2){ //& 代表父级
    background-color: @color2 - @color1;//#333333
  }
  &:nth-child(3){ //& 代表父级
    background-color: @color1 - @color2; // 结果为负数时颜色为#000000
  }
  &:nth-child(4){ //& 代表父级
    background-color: @color1 * 2; //#666666
  }
  &:nth-child(5){ //& 代表父级
    background-color: @color1 / 2; //#eeeeee
  }
  &:nth-child(6){ //& 代表父级
    background-color: @color2 * 2; //#cccccc
  }
}

9）嵌套规则 ​

​ Less中的嵌套规则允许在一个选择器中嵌套另一个选择器，通过缩进一个空格来实现父子级关系。

​ 父级选择器：使用 & 引用父选择器，通常在修改类或伪类应用于现有选择器时使用。

格式：

	父级（父类）{
​			属性：属性值；
​			.....
​			子级（子类）{
​				属性：属性值；
​				......
​				&：hover{
​					属性：属性值；
​					.......
​				}
​				&：before{
​					属性：属性值；
​					.......
​				}
​				&：nth-of-child（n
​				}
​				.......
​			}
​		}
less
header {
  width: 1000px;
  height: 44px;
  display: flex; // 弹性布局
  justify-content: space-around;	
  .logo {
    width: 60px;
    height: 44px;
    background-color: #eee;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .menu {
    display: flex;	// 弹性布局
    justify-content: space-around;	
    position: relative;
    & > * {
      // .menu 下的全部子标签
      list-style-type: none;
    }
    li {
      font-size: 20px;
      flex: 1 0 100px;
      &:hover {
        color: aqua;
        &::before {		// 使用为元素画三角形
          content: "";	// 必须设置内容为空
          width: 0;
          height: 0;	// 宽高0
          border: 10px solid transparent;	// 边框透明
          border-top-color: black;	// 上边框设置颜色，即三角形的颜色
          display: block;
          position: absolute;	// 绝对定位，脱离文档流
          top: -10px;
          left: -30%;
        }
      }
      &:first-child {
        color: aqua;
        text-decoration: underline;	// 添加下划线
      }
      & + li + li {
        // 匹配第二个li标签后的兄弟li标签
        background-color: pink;
      }
    }
  }
}

10）作用域 ​

​ 作用域在编译时采用就近原则。首先会从作用域内查找变量或混合模块，如果没找到，则去父级作用域中查找，直到找到为止。（与JS用法相似）

less
// 全局作用域
@var: red;
header {
  // 局部作用
  @var: blue;
  nav {
    background-color: @var; //blue
  }
}
section {
  @var: pink;
  border: 1px solid @var;//pink
}
footer {
  color: @var; //red
}

11）函数 ​

①颜色函数 ​

​ 颜色会先被转化为HSLA（色相，饱和度，亮度，不透明度）色彩空间，然后在通道级别中操作。

​ 取值范围：（h:0-360、s:0-100%、l:0-100%、a:0-1）

​ 设置颜色：

less
 //调整亮度
  lighten(@color, 10%); 返回一个比@color浅10%的颜色
  darken(@color, 10%); 返回一个比@color 深10%的颜色
  //调整饱和度
  saturate(@color, 10%); 返回一个比color饱和比高10%的颜色
  desaturate(@color, 10%); 返回一个比color饱和比低10%的颜色
  //调整不透明度
  fade(@color, 50%); 返回一个@color颜色的50%透明度的颜色
  //调整色调
  spin(@color, 10); 返回一个比@color 色调大10度的颜色
  spin(@color, -10); 返回一个比@color 色调小10度的颜色
  //混合颜色
  mix(@color1, @color2) 返回一个@color1和@color2混合的颜色

eg：

less
@color: red;
li {
  width: 200px;
  height: 20px;
  list-style-type: none;
  &:nth-of-type(1) {
    background-color: darken(@color, 10%);// 颜色加深10%
  }
  &:nth-of-type(2) {
    background-color: darken(@color, 20%);// 颜色加深20%
  }
  &:nth-of-type(3) {
    background-color: darken(@color, 30%);// 颜色加深30%
  }
  &:nth-of-type(4) {
    background-color: darken(@color, 40%);// 颜色加深40%
  }
  &:nth-of-type(5) {
    background-color: darken(@color, 50%);
  }
  &:nth-of-type(6) {
    background-color: darken(@color, 60%);
  }
  &:nth-of-type(7) {
    background-color: mix(red, blue);
  }
}
image-20240122145546991

​ 提取颜色信息：

less
  hue(@color); 返回@color//颜色的色调 返回：0-360
  saturation(@color); //返回@color颜色的饱和度通道
  lightNess(@color); //返回@color颜色的亮度通道
②Math函数 ​
less
 round（x,y） //对x四舍五入，保留y个小数点
  ceil（x） //向上取整
  floor（x） //向下取整
  percentage（x） //取百分数。eg：percentage（0.6）返回60%
  min(a,b,c,d,e…); //取最小值
  max(a,b,c,d,e…); //取最大值
  sqrt(a);	//计算数字的平方根
  abs(a);	//计算数字绝对值
  pi()		//返回Π
  pow(a,b)	//返回a的b次方
  [a]sin(a);	//计算[反]正弦
  [a]cos(a);	//计算[反]余弦
  [a]tan(a);	//计算[反]正切值
③类型函数 ​
isnumber(a);	//判断是否是数字 是数字返回true，不是返回flase
isstring(a);	//判断是否是字符串("string") 是字符串返回true，不是返回flase
iscolor(a);		//判断是否是颜色，是返回true，不是返回flase
.....

2.Sass ​

1）Sass简介 ​

​ Sass（Syntactically Awesome StyleSheets）是一款专业的CSS扩展语言，它旨在增强CSS的功能，提高前端工程师的开发效率。 中文官网

  • 变量和嵌套规则：Sass允许开发者使用变量和嵌套规则，这些特性使得样式表的编写更加灵活和方便。
  • 混合（Mixins）：通过混合，Sass可以复用代码块，减少重复代码，使样式表更加整洁。
  • 导入功能：Sass支持将一个文件导入到另一个文件中，这样可以更好地组织和管理样式表。

2）Sass安装 ​

①安装ruby ​

​ Sass是基于ruby的，所以要先安装ruby。

image-20240122172244185

​ 打开开始菜单，看到新安装内容

image-20240122172512437

​ 测试ruby是否安装成功image-20240122172639895

②安装Sass ​

​ 在线安装：

​ 在Start Command Prompt with Ruby 中输入：gem i sass

③使用node安装 ​

​ 如果使用ruby安装失败 可以使用cnpm进行安装

​ cnpm i -g sass

​ sass --version 查看版本

image-20240122180512281

3）Sass编译 ​

①手动编译

单文件转换命令：

在文件目录下cmd输入 sass d:\test.sass:d:\test.css 或sass d:\test.scss:d:\test.css

​ 被编译文件为：d盘下的test.sass/scss 编译输出到d盘下的test.css文件内

②使用插件编译

​ 安装Easy Sass 插件

​ 在setting.json中设置

image-20240122121632880

image-20240122121819166

​ **注意：**此处的输出目录一般是相对于当前vscode打开项目的作为根目录的，因此当当前项目在其它项目内被打开使，一般会出现输出路径错误。最好将此项目（此文件夹）单独打开。

4）Sass与less的区别 ​

​ Sass和Less是两种常用的CSS预处理器，它们都可以提供更灵活和强大的CSS开发功能。相同之处：Sass和Less都扩展了CSS的功能，引入了变量、混入（Mixins）、嵌套规则等高级特性。

​ 下面是Sass和Less之间的几个区别：

  1. 变量声明的符号不同：Sass使用美元符号（$）来声明变量，而Less使用符号（@）。
  2. 运行环境：Less在JS上运行。而Sass需要通过Ruby环境来编译成CSS文件，需要安装Ruby和Sass的编译工具。
  3. 功能：Sass相对于Less功能更强大。Sass支持条件语句（if-else）和循环语句（for），可以更灵活地控制样式的生成。而Less不支持条件语句和循环语句，功能相对较少。
  4. 处理机制：Sass最初是基于Ruby的，通常在服务端进行处理，而Less是基于JavaScript的，可以在客户端或服务端处理。
  5. 语法风格：Sass最初使用的是缩进式语法，后来发展出了SCSS语法，它与Less的语法都类似于传统的CSS，但Sass的缩进式语法更加简洁直观，可以减少代码的冗余和括号的嵌套。Less的语法则更接近于标准的CSS，这使得从CSS过渡到Less相对容易。

综上所述，Sass相对于Less功能更强大，但使用起来相对复杂一些。而Less相对简单易用，更适合初学者或者对功能要求不高的项目。

5）sass ​

​ Sass的老式写法主要指的是其最初的语法风格，也被称为“缩进式”或“简洁式”语法。

​ 这种语法风格的特点是通过缩进来表示CSS规则的层次结构，而不需要使用大括号和分号。这使得代码看起来更加简洁、清晰，并且减少了冗余。

​ eg：

sass
$color: red
$size: 10px
body
  background-color: $color
  font-size: $size
css
body {
  background-color: red;
  font-size: 10px;
}

​ Sass语法的特点是内部没有标点符号和花括号（容易出错），全部都由缩进控制。文件以”.sass”结尾。

6）SCSS ​

​ SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一 样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

eg：

scss
$color: blue;
$size: 10px;
body{
  background-color: $color;
  font-size: $size * 2;
  p{
    font-size: $size;
  }
}
body {
  background-color: blue;
  font-size: 20px;
}

body p {
  font-size: 10px;
}

​ 文件以”.scss”结尾，支持新语法。（特别注意“.sass”只支持老语法，新语法必须”.scss”结尾）。

7）Sass与SCSS的区别 ​

​ Sass和SCSS实际上是同一种CSS预处理器，只是语法风格不同。

  • 文件扩展名不同。Sass使用“.sass”作为文件扩展名，而SCSS使用“.scss”作为文件扩展名。
  • 语法书写方式不同。Sass采用严格的缩进风格，不使用分号、大括号等符号，使得代码看起来更加简洁。相比之下，SCSS的语法与CSS更为接近，它允许使用大括号和分号，这使得从CSS过渡到SCSS相对容易。

总的来说，Sass和SCSS在核心功能上是相同的，它们都是为了增强CSS的能力而设计的预处理器。开发者可以根据个人喜好和项目需求选择适合自己的语法风格。