calc（）函数中的使用Scss变量

最新推荐文章于 2024-09-26 18:52:35 发布
最新推荐文章于 2024-09-26 18:52:35 发布
阅读量714 收藏
点赞数
分类专栏： css sass 文章标签： scss css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/workhard0905/article/details/123167189
版权
css 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
sass
2 篇文章 0 订阅
订阅专栏 
 

 
 
$titleHeight: 3.4rem;
 
 
.record_table {
  height: calc(100% - #{$titleHeight});
}
 
 
使用 #{变量}的方式
 


                

        

    

  


    


                



	

		

			

				
					
css中使用变量与calc() 函数

				
			

			

				

					漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
				

				

					09-24
					
					619
					
				

			

		

		

			
				
在 CSS 中，你可以使用变量（也称为自定义属性）来存储和重用值。变量可以使你的样式表更易于维护，因为它们允许你在一处更改值，并在整个样式表中更新使用该值的所有地方。在 CSS 中使用变量需要遵循以下步骤：定义变量：使用 --* 符号定义变量，其中 * 是变量的名称。变量名可以包含字母、数字、连字符和下划线。例如：css:root {使用变量：在样式表中，你可以使用 var(*) 函数来使用变量，其中 * 是变量的名称。例如：cssbody {

			
		

	



                

            
              



	

		

			

				
					
CSS | calc的基本使用

				
			

			

				

					MGsniper的博客
				

				

					01-21
					
					626
					
				

			

		

		

			
				
 在box-sizing的解析与应用场景一文的问题场景中，我们用border-box属性使得元素的盒子宽高 为 父元素（内容）宽高 * 100%。
 除了使用border-box，我们还可以使用CSS3加入的calc（）函数进行规范。
 我们可以使用calc()对元素的宽高进行手动计算，calc(100% - padding * 2 - border * 2)，效果等价于border-box
&l...

			
		

	



              


  
              

                


	

		

			

				
					
CSS_calc() 函数内部怎么使用scss变量

				
			

			

				

					小歪博客
				

				

					07-05
					
					1374
					
				

			

		

		

			
				
CSS_calc() 函数内部怎么使用scss变量

			
		

	





	

		

			

				
					
scss在calc中插入变量

				
			

			

				

					Yana1225的博客
				

				

					08-04
					
					504
					
				

			

		

		

			
				
定义一个宽度的变量，好统一修改，但是编译之后，变成了 invalid value ——— calc(100% - $width)，原样输出了。用插入值的表达式，格式：#{$width}

			
		

	



		

			
		



	

		

			

				
					
scss中calc使用变量

				
			

			

				

					路过君的博客
				

				

					04-11
					
					1403
					
				

			

		

		

			
				
可使用插值语法带入变量
$box-width: 100px;
.box {
	width: calc(100% - #{$box-width});
}




			
		

	





	

		

			

				
					
CSS SASS calc() 计算表达式或使用变量

				
			

			

				

					carbonzhao的专栏
				

				

					09-19
					
					3111
					
				

			

		

		

			
				
calc（）是css的一个函数，可用于元素计算长度，比如div宽度想要减去一个固定宽度后并自适应，可以写为calc(100% - 60px) 注意“-”两边有空格。sass已经是常用的预编译语言，允许使用变量等规则，如果上边写到60px是一个变量，这个表达怎么写呢。显然这样写是不行的，浏览器解析完是这样子的。

			
		

	





	

		

			

				
					
calc怎么用？css3 calc()函数的使用总结

				
			

			

				

					lin123_00的博客
				

				

					05-05
					
					3021
					
				

			

		

		

			
				
calc是什么意思？怎么使用？本篇文章给大家带来的内容是介绍css3中的calc()函数是什么，有什么用，如何使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先小编在这里谢谢大家一直的支持，每天都会更新十个web前端基础内容，需要的可以关注我，另外也可以进我的web学习交流群1045267283，领取资料学习资料笔记，可以跟里面的小伙伴一起学习一起成长，不懂的问题也可以...

			
		

	





	

		

			

				
					
umi引入css,umi中使用scss

				
			

			

				

					weixin_35480430的博客
				

				

					08-04
					
					2889
					
				

			

		

		

			
				
在umi中可以直接使用css，但是并不支持scss，我们需要加两个loader，直接npm安装 node-sass和sass-loader 即可，剩余的事情umi已经帮我们做好了。npm i --save-dev node-sass sass-loader在src/assets下新建文件夹- assets+  - img+  - css+   -style.scss  // 这个样式文件一般来说存...

			
		

	





	

		

			

				
					
CSS3中的calc( )属性

				
			

			

				

					xm1037782843的博客
				

				

					03-03
					
					2528
					
				

			

		

		

			
				
calc()函数简单讲解

			
		

	





	

		

			

				
					
css中设置变量 calc()

				
			

			

				

					在无知中学习，在学习中成长，在成长中学习
				

				

					05-10
					
					388
					
				

			

		

		

			
				
css中设置变量 calc()

			
		

	





	

		

			

				
					
scss里用calc计算百分比

				
			

			

				

					m0_73216899的博客
				

				

					01-29
					
					1231
					
				

			

		

		

			
				
scss

			
		

	





	

		

			

				
					
scss中使用calc函数，包含变量的函数使用

				
			

			

				

					ma_luping的博客
				

				

					09-07
					
					3602
					
				

			

		

		

			
				
移动端项目，做rem适应，任何元素的高宽边距等都使用这个函数返回的变量；


@function px2em($px, $base-font-size: 75px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2em($px + 0px); // That may fail

			
		

	





	

		

			

				
					
对scss变量做calc计算的方法

				
			

			

				

					iwen08的博客
				

				

					02-16
					
					2964
					
				

			

		

		

			
				
今天写代码时，需要对一个scss变量做calc处理，发现直接使用变量，浏览器是无法识别的，于是百度，发现要对变量处理才能正常使用，在此记一下用法：

　　假定定义变量$a = '20px'，若要使用calc，直接calc(100% - $a)这么用是不行的，需要按如下使用方法：

　　calc(100% -#{$a})
...

			
		

	





	

		

			

				
					
【CSS_Sass】在 calc() 内部如何使用 sass 变量进行计算

				
			

			

				

					工作中遇到问题记录
				

				

					06-25
					
					252
					
				

			

		

		

			
				
【CSS_Sass】在 calc() 内部如何使用 sass 变量进行计算

			
		

	





	

		

			

				
					
scss中calc计算含参数

				
			

			

				

					songshuguowang的专栏
				

				

					12-17
					
					1209
					
				

			

		

		

			
				
注意要添加#{}

calc(100% - #{$a})


			
		

	





	

		

			

				
					
calc()

				
			

			

				

					wu_dada的博客
				

				

					10-17
					
					1066
					
				

			

		

		

			
				
calc() = calc(四则运算) ，属于css属性，能实现自适应的布局，用于动态计算长度值。
如果一个盒子宽度为100%的话，若再在其中加入padding或margin等属性时，都会把盒子撑破，这个时候，用calc()属性解决起来就相对比较容易了。


如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和

			
		

	





	

		

			

				
					
深入解析 CSS calc()：实现动态布局的终极利器

				
			

			

				

					宇珩的博客
				

				

					09-26
					
					4299
					
				

			

		

		

			
				
本文详细介绍了 CSS 中 calc() 的基本用法，包括如何在样式中动态计算属性值。通过举例说明了 calc() 在调整宽度、自适应内边距和外边距、元素对齐、网格布局、字体大小等方面的典型应用场景。接着，文章针对在 SCSS 中使用 calc() 的注意事项进行了探讨，包括避免运算符冲突、嵌套 calc() 使用的风险、混合单位运算的注意点以及如何结合 SCSS 变量和函数优化代码。通过这篇文章，读者将全面了解如何利用 calc() 来创建更灵活、响应式的布局。

			
		

	





	

		

			

				
					
rem布局配置：calc 函数中的变量：在 calc 函数中使用变量时，需要将变量包裹在 #{} 中，以确保它们被正确解析。

				
			

			

				

					小蜜蜂的博客
				

				

					08-22
					
					146
					
				

			

		

		

			
				
【代码】rem布局配置：calc 函数中的变量：在 calc 函数中使用变量时，需要将变量包裹在 #{} 中，以确保它们被正确解析。

			
		

	





	

		

			

				
					
css变量，calc与自定义属性

				
			

			

				

					qq_73917015的博客
				

				

					05-07
					
					308
					
				

			

		

		

			
				
css变量与calc与自定义属性

			
		

	





	

		

			

				
					
css 中使用calc

					
最新发布

				
			

			

				

					02-23
				

			

		

		

			
				
### 如何在CSS中使用`calc()`函数

#### 使用场景与基本语法
`calc()` 函数允许开发者通过表达式来定义长度、频率、角度、时间间隔以及数值等 CSS 属性值。此功能特别适用于创建响应式的网页设计，能够轻松处理不同屏幕尺寸下的布局调整[^1]。

对于具体的语法结构而言，在 `calc()` 中可以执行加法 (`+`)、减法 (`-`)、乘法 (`*`) 和除法 (`/`) 操作，并支持混合单位制运算，比如像素(px)加上百分比(%)或是 em 单位相加等情况[^4]。

#### 实际应用案例分析
当试图在一个 Sass 文件里运用 `calc()` 来设置元素的高度时，如果直接写入类似这样的语句：

```scss
$body_padding: 50px;
padding-top: $body_padding;
height: calc(100% - $body_padding);
```

可能会遇到解析错误的问题。这是因为Sass编译器无法识别 `$body_padding` 变量作为参数传递给原生的 CSS `calc()` 方法。为了使这段代码正常工作，应该采用如下方式编写：

```scss
$body_padding: 50px;

.example {
  padding-top: #{$body_padding};
  height: calc(100% - #{#{$body_padding}});
}
```

这里的关键在于利用了字符串插值 `${}` 的形式让 Sass 正确地将变量值嵌入到最终生成的标准 CSS 文本之中[^2]。

#### 注意事项
需要注意的是，虽然可以在 `calc()` 表达式内部进行四则运算操作，但在同一个表达式内不允许连续放置两个相同类型的运算符；另外，括号可用于改变优先级顺序以确保预期的结果被返回出来[^3]。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值