scss语法介绍

 
这里既然是对语法的介绍,那么至于如何安装和编译scss我就不多少了,主要是因为本人在群里认识的小伙伴有的不会用scss,所以就借着放假的机会来对scss语法做个总结,博主在开发过程中用scss蛮多,所以对scss语法还是熟知的。

1.自定义变量

$color:pink;
.test1{
	background-color:$color;
}

通过编译工具编译出来后

.test1{
	background-color:pink;
}

注:时间原因我在这里只写scss了,就不写编译后的结果,一来方便大家自己去尝试编译,二来增加大家对scss的理解:编译工具kaola很好的一个编译工具,大家可以百度如何使用,再这里就不做过多介绍了。


2.插入一个变量

$right:right;
.test2{
	border-#{$right}:1px solid #000; } 

3.子元素书写

.text3{
	.text33{
		border:1px solid;
	}	
}

4.样式的加减乘除

$paramer:3;
.text4{
	height:(1px+3px); width: (96px/6); right: $paramer*4; } 

5.继承

.class5{
	border:1px solid red;
}
.class5E{
	@extend .class5; font-size:20px; } 

6.代码块的复用

@mixin text6 {
	height:50px;
	left:20px; } .text6M{ @include text6 } //这里的mixin就是定义一个可以复用的代码段,当然我们也可以给它传递一个参数,就像这样一样: @mixin text66($height){ height:$heigth; left:20px; } .text6N{ @include text66(100px); } 

7.if语法,通过对if的判断来决定使用那一套样式

.text7{
	@if 1 +2 == 3 { border:1px solid ; } @if 5 < 3 { border:2px dsahed red; } } 当然,我们都知道if一般是要和else配合的,所以我们也可以这样写 .test77{ @if lightness($color) > 30%{ background-color:#fff; }@else{ background:#0ff; } } 这里的lightness是一个scss颜色函数,$color指向之前定义的值。 

8.循环语法,包括最常见的三种循环方法,for,while,each

//for 循环
@for $i from 1 to 5 { .item-#{$i} { border:#{$i}px solid; } } //while 循环 $m:8; @while $m > 0 { .items-#{$m} { width:2em*$m; } $m:$m - 2 ; } //这里可以对$m进行运算 让它每次都减去2 //each 语法 @each $img in q,w,e,r { .#{$img} { background-image:url('#{$img}.png') } } 

9.函数语法

@function double ($number){
	@return $number*2; } .text9{ font-size:double(20px); } 

10.import导入语法

@import 'other.scss'
这样就在你现在的scss中导入了other.scss编写的scss

scss语法并不是很多,但是需要开发者灵活使用,这样才能事半功倍,要深刻理解scss变量,以及如何插入变量,以及循环语法和函数思想,如果遇到不太清楚的可以给博主留言哈,欢迎指正和提出问题。

转自https://www.cnblogs.com/dreamsboy/p/6658695.html

原文地址:http://www.cnblogs.com/qingshuihongye/p/16869392.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性