scss的基本用法
2021/4/16 18:25:55
本文主要是介绍scss的基本用法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文记录scss的基本用法
引入外部文件 @import "xxxxxxx"
1.scss定义变量 $
$fontSize: 100px; .content { font-size: $fontSize }
2.scss中继承 语法: @extend XXX
.extend { color: red; } $fontSize: 100px; .content { font-size: $fontSize; @extend .extend; }
3.scss中混入可传参设置默认值 语法:定义@mixin 引入@include
.extend { color: red; } @mixin bd($color: red) { background-color: $color } $fontSize: 100px; .content { font-size: $fontSize; @extend .extend; @include bd(yellow) }
混入跟继承的区别,继承实在.content加类.extend 混入是clone一份代码放到.content里,编译后的结果
.extend, .content { font-size: 26.667vw; background-color: yellow; }
4.scss循环 语法:@for $i from 1 through 30 {}
@for $i from 1 through 10 { .pd-#{$i} {padding-bottom: $i + px} }
5.遍历 语法: @each $i in red, blue, yellow
@each $i in red, blue, yellow { .bg-#{$i} { background-color; $i } } //或者 $color: (1:purple, 2:green, 3:yellowgreen); @each $k, $i in $color { .bd-#{$k} { border: 1px solid $i; } }
6.if判断 @if @else if
@mixin bd($color) { @if $color === red { background-color: red} @else if $color === blue{ background-color: blue} @else $red=== blue{ background-color: red} }
7.定义函数 语法: @function() { @return 111}
@function double($i) { @return $i * 10; }
这篇关于scss的基本用法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享