Sass和Less（预处理器）

最新推荐文章于 2024-08-17 23:30:44 发布

sam80000

最新推荐文章于 2024-08-17 23:30:44 发布

阅读量2.9k

点赞数 3

分类专栏：前端知识点文章标签： css less sass

本文链接：https://blog.csdn.net/sam80000/article/details/112319596

版权

前端知识点专栏收录该内容

35 篇文章 2 订阅

订阅专栏

Sass和Less（预处理器）

一、了解Sass和Less
二、Sass和Less 语法

一、了解Sass和Less

Sass 对自己的定位首先是一个预处理器。其最主要的竞争对手包括 LESS，一个基于 Node.js 的预处理器，因著名 CSS 框架 Bootstrap 的使用而声名鹊起。此外还有 Stylus ，一种对形式无所限制的 LESS 版本。它是一种无论你想怎么样使用，大都能顺利转换成 CSS 的程序语言。
Sass和Less都属于预处理器。Less文件以.less结尾，Sass文件新版的以.scss结尾，老版的以.sass结尾。
Less文件和Sass文件都会生成css文件。
在这里插入图片描述

二、Sass和Less 语法

在这里插入图片描述

2.1 注释

在less文件中，单行注释不会再css文件中显示出来，多行注释就是css的注释方式，会在css文件中显示出来。
在这里插入图片描述

2.2 语法

赋值

在Less文件中，定义变量用@。
在Sass文件中，定义变量用$。

@number:123px;
$number:123px;

/* 
    普通变量声明：直接用 $ 声明
    变量执行顺序是自上而下，当下面对变量重新赋值时，会用下面的新值
*/
$width:200px;
$width:100px;

/* 
    默认变量：在后面添加 !default
    变量在执行的时候，不会根据位置执行，执行不是默认变量的值
*/
$width:230px;
$width:300px !default;

/* 
    全局变量和局部变量
    在局部变量后添加 !global ，局部变量作用域为全局变量
*/
$color:red;
#div1{
    color: $color;  //使用全局变量，结果 red
    // $color:orange;  //局部变量，结果是 orange
   $color:orange !global;   //添加 !global 后，局部变量 变成全局变量，div2的值为 orange
    .box{
        background-color: $color;   //在本作用域下颜色是 orange
    }
   
}

#div2{
    background-color: $color;//
}

插值

在Less文件中定义一个值，插入进去用@{}，将定义的值放入括号中

在Less中的编译和结果
在这里插入图片描述

特殊变量 #{}
在Sass中，用$定义值后，用#{}进行插值，$和值一起写入括号中。
在这里插入图片描述

作用域

采用就近原则，在大括号里有已经创建的变量，优先使用大括号里面的变量值。

在Less文件中，在大括号内先取值，在定义，最后显示的都是大括号内的变量值
在这里插入图片描述

在Sass文件中，如果先取值，在定义新变量，定义新变量之前的会使用之前的值，定义新变量后的代码会取更改后的值。Sass作用域有顺序。
在这里插入图片描述

选择器嵌套、伪类嵌套、属性嵌套（Sass）

在Less和Sass中，可以对标签嵌套，在里面写各个层级写相应的样式，编译完成后，会自动写好对应的选择器。减少复杂的编译选择器代码。
伪类嵌套，需要在伪类的冒号前面加&，不然会有空格。
属性嵌套只有在Sass中有，Less没有。

/* 
    选择器嵌套
*/
#div3{
    width: 300px;

    .name{
        color: aqua;
    }

    a{
        background: azure;
        // & 父类元素选择器，添加伪类选择器
        &：hover{
            color: blue;
        }
    }
}

在这里插入图片描述

运算

在Less加减乘除都可以做。如果进行不同单位的计算，会按照第一个单位进行计算，只计算值。
在这里插入图片描述

在Sass中不同单位不能进行计算，默认/是分割，不会像Less一样会认为是除号。
在这里插入图片描述

函数

Sass和Less有的函数可以通用，有的不行，需要去官网查询API。
round()取整，percentage()小数点换成百分数。

Sass可以自定义函数中，用function定义。Less中不能使用自定义函数

/*
    函数
*/
$colors:(light:white,dark:black);	//map映射
//根据key获取值
@function color($key){
    @if not map-has-key($colors,$key){
        //警告@warn不会中断 sass 监听
        @warn  "在映射中没有#{$key}这个键";

        //错误@error 会中断 sass 监听
        @error "在映射中没有#{$key}这个键";
    }

    @return map-get($colors,$key);
}

//使用函数color
body{
    background: color(light);
}

在这里插入图片描述

混合、命名空间（Less）、继承

混入在Less中使用。样式可以单独显示，也可以在其他的杨使用混入，如果不想选择器编译出来可以在样式后面加一个()，就不会编译出来，可以在括号中进行传参。
在这里插入图片描述

在Sass中混入，用@mixin方法定义要混入的样式，用@include将方法混入。就是编写代码块和使用代码块。


/* 
    混合：@mixin 名称{}
    引用混合： @include 名称
*/

//无参混合
@mixin clear {
    width: 100px;
}

#div4{
    @include clear;
}
//有参混合
@mixin col($color:red,$border:1px solid black) {
    background: $color;
    border:$border ;
}

#div5{
    @include col;
    //传参
    @include col(orange)
}