标签:scss 基本 extend color 用法 content fontSize background red
本文记录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,基本,extend,color,用法,content,fontSize,background,red 来源: https://www.cnblogs.com/95xdy/p/14668139.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。