css原生、sass、less变量区别及使用

最新推荐文章于 2023-09-12 09:07:00 发布

易烊千玺的女朋友

最新推荐文章于 2023-09-12 09:07:00 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/qq_41046662/article/details/107692943

版权

本文探讨了CSS、SASS和Less三种语法中的变量使用，包括命名方式、插入方式和作用域的区别。SASS允许局部改变全局变量，而原生CSS变量在某些浏览器中可能不受支持。

摘要由CSDN通过智能技术生成

一般有接触到scss，less的都知道，动态样式语言。动态样式语言的精髓就在于其有了变量，其中的诸多功能都是建立在变量之上的，目前css原生也有了变量，但是个人认为使用的局限略大

命名方式：

scss:$ 开头的即表示变量

less: @开头的即表示变量

原生css: -- (以--开头，*代表变量名称)

例子：

// sass 
$blue: blue;

.box{
    color: $blue;
}

// less
@blue: blue;

.box{
    color: @blue;
}

// 原生css
:root{
    --blue: blue;
} 

.box{
    color: var(--blue);
}
// 若想使用默认值,第二个参数默认值
.box{
    color: var(--blue,blue);
}

区别：在两种语言中，变量都可以以一定的方式插入到字符串中去，这个特性极为有用，但两种语言的插入方式不同，而原生css则不支持：具体请看下例：

//sass

$left: left;
.box{
	padding-#{$left}: 5px;                             
}

//less

@direction: left;
.box{
	padding-@{left}: 5xpx;
}


//编译后的css代码是相同的，如下：
.box{