SCSS变量类型小要点

最新推荐文章于 2024-07-10 10:14:49 发布
最新推荐文章于 2024-07-10 10:14:49 发布
阅读量213 收藏
点赞数
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laolitou_/article/details/121599082
版权

1.可以使用16进制的rgba

 

2.带符号的数字相加减，数字不会四舍五入，精确到小数点后5位，最终得到数字之间相加减加上符号,带引号的字符串相加减，如果前面有引号，则整个字符串都有引号，反之相反.
 

 

 

3.数值之间不可以带符号的进行相乘
 

 

4.相等运算符
 

 

 

 
 

 
 


                

        

    

  



    

      

        

            

              
                
                  laolitou_
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
CSS预处理器--SCSS

				
			

			

				

					qq_48113035的博客
				

				

					03-01
					
					1645
					
				

			

		

		

			
				
1.


			
		

	



                

            
              



	

		

			

				
					
scss 的基本使用

				
			

			

				

					weixin_45986657的博客
				

				

					05-24
					
					6092
					
				

			

		

		

			
				
CSS 生成时，变量会被它们的值所替代。如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。属性和选择器嵌套是非常伟大的特性，因为它们不仅大大减少了你的编写量，而且通过视觉上的缩进使你编写的样式结构更加清晰，更易于阅读和开发。

			
		

	



              


  
              

                


	

		

			

				
					
对比less聊scss（2）：变量和数据类型

				
			

			

				

					weixin_30763397的博客
				

				

					05-11
					
					313
					
				

			

		

		

			
				
在less中，声明变量使用@符号，而scss也有用到@符号，这也是以后的篇章要讲的关键字的符号。
而scss中的变量则是用$符号来标记变量，是不是让程序员倍感熟悉的符号啊~~（很多linux支持的语言变量都是$来定义，包括linux-shell）

然而，和less不同的是，scss新增了几种数据类型。在这点要比less高明很多，因为less的数据类型很模糊。下面分别对比一下两者：
le...

			
		

	





	

		

			

				
					
scss基础语法--嵌套语法、注释、变量

				
			

			

				

					weixin_42017221的博客
				

				

					02-07
					
					2701
					
				

			

		

		

			
				
html {

			
		

	



		

			
		



	

		

			

				
					
实用小方法（保存两位小数，随机数）

				
			

			

				

					qq_46100747的博客
				

				

					03-29
					
					292
					
				

			

		

		

			
				
formatNum(num) {
      let str = ""; //字符串累加
      str = (Math.round(num * 100) / 100)
        .toFixed(2)
        .toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
          return $1 + ",";
        });
      return str; //字符串=>数组=

			
		

	





	

		

			

				
					
css 保留两位小数,css – 在样式表规则中解释小数点后的位数？

				
			

			

				

					weixin_36282765的博客
				

				

					08-03
					
					1644
					
				

			

		

		

			
				
所以最近我偶然发现了this answer’s CSS：larger {width: 66.66666666%;}smaller {width: 33.333333333%;}这让我想到：使用样式表的浏览器真正解释了多少位数？因为在Chrome中使用4位数时我没有看到差异.CSS：body,div {width: 100%;min-height:2em;margin:0px;padding:0px...

			
		

	





	

		

			

				
					
前端项目回顾：SCSS技术要点梳理

				
			

			

				

					
				

			

		

		

			
				
1. 变量的使用：SCSS允许开发者定义变量来存储颜色、字体样式、布局尺寸等频繁出现的值。这样做不仅减少了代码的重复，还使得样式的全局修改变得异常容易。例如，如果项目中多个地方使用了相同的主题颜色，那么在...

			
		

	





	

		

			

				
					
SCSS作业实践：第六次作业要点总结

				
			

			

				

					
				

			

		

		

			
				
 SCSS中的变量可以让样式值（如颜色、字体大小等）存储在一个变量中，方便在多处复用，并且当需要改变某个值时，只需在变量上做出修改即可。  3. **混合(Mixins)**  Mixins是SCSS中的一个功能强大的特性，它允许...

			
		

	





	

		

			

				
					
SCSS/SASS教程：用代码绘制小黄人

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息:"SCSS（SASS）画小黄人项目是使用Sass预处理器语言来创建一个卡通人物小黄人的过程。Sass是CSS的一个扩展，它提供了包括变量、嵌套规则、混合、继承和颜色功能在内的高级功能，使得CSS的编写更为高效...

			
		

	





	

		

			

				
					
ProjetCv的SCSS技术应用与实践分析

				
			

			

				

					
				

			

		

		

			
				
虽然以上信息对于理解“ProjetCv”项目的细节和内容可能远远不够，但基于标题、描述、标签和提供的文件名称列表，我们可以梳理出这些与SCSS相关的前端开发知识要点。如果“ProjetCv”是一个具体的项目案例，那么了解...

			
		

	





	

		

			

				
					
scss概念及使用

					
最新发布

				
			

			

				

					m0_74293254的博客
				

				

					07-10
					
					6153
					
				

			

		

		

			
				
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。

			
		

	





	

		

			

				
					
1.1 Sass/Scss函数 -- 数字

				
			

			

				

					moonlight的博客
				

				

					08-14
					
					2214
					
				

			

		

		

			
				
Scss 数字函数大全及用法

			
		

	





	

		

			

				
					
数据强制保留两位小数

				
			

			

				

					这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
				

				

					07-06
					
					2217
					
				

			

		

		

			
				
数据强制保留两位小数，记录分享：前台写法：首先用到EL表达式时这样处理a、引入标签库<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
使用<fmt:f

			
		

	





	

		

			

				
					
Sass函数-数字函数-floor()函数

				
			

			

				

					weixin_33889665的博客
				

				

					05-30
					
					616
					
				

			

		

		

			
				
floor() 函数刚好与 ceil() 函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算：

>> floor(2.1)
2
>> floor(2.5)
2
>> floor(3.5%)
3%
>> floor(10.2px)
10px
>> floor(10.8em)
1...

			
		

	





	

		

			

				
					
Scss-监听和数据类型

				
			

			

				

					qac的博客
				

				

					12-14
					
					680
					
				

			

		

		

			
				
2020.12.14   04:03
Scss00.监听文件(node-sass)01.单行注释和多行注释02.变量的定义、使用和作用域03.数据类型04.数据类型----字符串(Strings)05.数据类型----数字(Numbers)06.数据类型----空值(Null)07.数据类型----布尔值(Booleans)08.数据类型----数组(Lists)09.数据类型----映射(Maps)10.数据类型----颜色(Colors)
00.监听文件(node-sass)
在命令行中scss文件同目

			
		

	





	

		

			

				
					
css 保留两位小数,使用CSS格式化数字（小数位，数千个分隔符等）

				
			

			

				

					weixin_30533109的博客
				

				

					08-03
					
					1630
					
				

			

		

		

			
				
MMMHUHU好吧，对于Javascript中的任何数字，我都使用下一个：var a = "1222333444555666777888999";a = a.replace(new RegExp("^(\\d{" + (a.length%3?a.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim...

			
		

	





	

		

			

				
					
Scss 基本使用（变量、嵌套）

					
热门推荐

				
			

			

				

					明天也要努力的博客
				

				

					11-29
					
					3万+
					
				

			

		

		

			
				
1. Scss 简介
Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能 (如：变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面。
因此对 Sass 语法进行了改良，Sass3 就变成了 Scss(Sassy CSS)。SCSS(Sassy CSS) 是 

			
		

	





	

		

			

				
					
Scss----运算和语法

				
			

			

				

					qac的博客
				

				

					12-14
					
					3608
					
				

			

		

		

			
				
2020.12.14  06:30
Scss01.数字运算符02.关系运算符03.相等运算符04.布尔运算符05.颜色值运算06.运算优先级
01.数字运算符
SS支持数字的加减乘除、取整等运算(+, -, *, /, %)

如果必要会在不同单位间转换值
如果要保留运算符号，则应该使用差值语法

加+

纯数字
$add1: 1 + 2; ==> 3
$add2: 1 + 2px;==> 3px
$add3: 1px + 2;==> 3px
$add4: 1px + 2px;==>

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值