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. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性