css变量、less变量、scss变量

比眉伴天荒 2022-10-06 00:45 270阅读 0赞

因为css、less和scss定义及使用变量的方法老是弄混，所以在此记录一下。

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>定义</th> 
   <th>使用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>css</td> 
   <td>scope { --variable: value; }</td> 
   <td>selector { --attribute: var(–variable); }</td> 
  </tr> 
  <tr> 
   <td>less</td> 
   <td>@variable: 10px;</td> 
   <td>selector { width: @variable; }</td> 
  </tr> 
  <tr> 
   <td>scss</td> 
   <td>$variable: 10px;</td> 
   <td>selector { width: $variable; }</td> 
  </tr> 
 </tbody> 
</table>

#### 1、css变量：–variable ####

详解 [https://blog.csdn.net/weixin\_43829719/article/details/114160413?spm=1001.2014.3001.5501][https_blog.csdn.net_weixin_43829719_article_details_114160413_spm_1001.2014.3001.5501]

#### 2、less变量：@variable ####

示例：

@width: 10px;
    @height: @width + 10px;
    
    #header { 
      width: @width;
      height: @height;
    }

#### 3、scss变量：$variable ####

示例：

$nav-color: #F90; nav { 
      $width: 100px;
      width: $width;
      color: $nav-color;
    }

[https_blog.csdn.net_weixin_43829719_article_details_114160413_spm_1001.2014.3001.5501]: https://blog.csdn.net/weixin_43829719/article/details/114160413?spm=1001.2014.3001.5501

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关 scss变量自动导入

一、背景 > 我们平时项目开发的时候，会有如下应用场景，scss变量自动引入，来方便我们直接使用二、方法 1.定义scss变量文件 var.scss

￡神魔★判官ぃ/ 2023年10月10日 23:58/ 0 赞/ 22 阅读

相关 Scss--变量--使用/实例

原文网址：[Scss--变量--使用/实例\_IT利刃出鞘的博客-CSDN博客][Scss--_--_IT_-CSDN] 简介本文用示例介绍Scss的变量的用法。

偏执的太偏执、/ 2023年09月28日 13:47/ 0 赞/ 15 阅读

相关 vite 添加scss全局变量

首先要先安装一下npm安装一下sass，然后再vite.config中修改配置 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG

待我称王封你为后i/ 2022年10月07日 01:58/ 0 赞/ 565 阅读

相关 css变量、less变量、scss变量

因为css、less和scss定义及使用变量的方法老是弄混，所以在此记录一下。 <table> <thead> <tr> <th></th> <th

比眉伴天荒/ 2022年10月06日 00:45/ 0 赞/ 271 阅读

相关 less笔记-变量

一、less变量的直观优点比较下面CSS 写法与 less写法： css： a, .link { color: 428bca; }

柔情只为你懂/ 2022年09月25日 13:24/ 0 赞/ 218 阅读

相关 LESS详解之变量(@)

　　变量基本上是每个语言脚本上都会涉及的一个小小知识点，是学好语言脚本的必经之路。LESS中也可以设置变量，然后通过变量可以改变整个网站的设计风格。良好的掌握LESS中变量的用

亦凉/ 2022年09月17日 13:12/ 0 赞/ 439 阅读

相关 less-变量

1、编辑less： @nice-blue: 5B83AD; @light-blue: @nice-blue + 111; hea

本是古典何须时尚/ 2022年06月14日 10:14/ 0 赞/ 223 阅读

相关 CSS变量

变量的声明声明变量的时候，变量名前面要加两根连词线 -- 。 :root { --color:000; --Color:001

Myth丶恋晨/ 2022年05月24日 02:26/ 0 赞/ 260 阅读

相关 uniapp 配置全局scss/less/sass变量

uniapp 配置全局scss/less/sass变量根目录新建 `vue.config.js`文件 vue.config.js module.exports

╰半橙微兮°/ 2021年08月31日 12:37/ 0 赞/ 2574 阅读

相关 CSS-变量

CSS变量声明变量和使用变量 <style> :root{ --blue:blue } .fo-blue{ color: var(--blue); } <

以你之姓@/ 2021年07月24日 18:59/ 0 赞/ 439 阅读