css @ & -- sass less 变量

最新推荐文章于 2025-04-08 13:53:14 发布

puspos

最新推荐文章于 2025-04-08 13:53:14 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/puspos/article/details/112535348

11 篇文章

订阅专栏

本文介绍了CSS、Sass和Less中定义变量的方法。CSS使用`--`，Sass使用`$`，而Less使用`@`。强调变量的大小写敏感性，以及在CSS中如何使用`var()`函数。同时，讨论了在Less中`&`的特殊用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@

@import 'global.css';
@import url("https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css");

:root{//根元素<html>
	--size:10px;//需要先在选择器中设置才能使用
}
.ca{
	font-size:var(--size);	}

body{
--foo:red;
}
a {
  color: var(--foo);
  color: var(--foo, blue);
}

:root {
  --color: red;
  -text: var(--color);
}

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

body{
	--bar:"hello";
	--foo:var(--bar)' world';
}

.c1::after{
	content:var(--foo);
}

.foo {
  --gap: 20;
  margin-top: var(--gap)px; /* 无效 */
  margin-top: calc(var(--gap) * 1px);
}

/*定义变量*/
@gray: #6b7381;
body {
	color: @gray;
}

& 表示嵌套的上一级

/*使用&*/
ul{
    width: 20px;
    & >li {
        width: 0;
    }
  }
/*不使用&*/
ul{width: 20px;}
ul > li {width: 0;}

https://www.cnblogs.com/lc1999/archive/2018/11/19/9986151.html