scss常用语法
2021/9/5 23:08:26
本文主要是介绍scss常用语法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在线编译 https://wow.techbrood.com/fiddle/11143
群组选择器的嵌套【编译前】
.container { h1, h2, h3 {margin-bottom: .8em} }
编译后
.container h1, .container h2, .container h3 { margin-bottom: .8em }
1. 优先使用scss中的变量
$biancolor:#ccc; #deno{ color:$biancolor }
说明
在scss中使用变量用$符号开头; 为什么我们要使用scss中的变量。 比如我们需要动态去切换主题的颜色, 我们就非常有必要去使用变量了哈。 这个虽然大家都会,但是在项目中就不一定回去使用变量了。
2.嵌套伪类:通过"&"实现 在中使用的":"符号 添加& 字符号
#deno{ .deo1{ background-color: #ccc; &:hover{ color:red } } }
编译后的
#deno .deo1 { background-color: #ccc; } #deno .deo1:hover { color: red; }
3. @mixin 和 @include的使用
@mixin 和 @include在项目中真的是超好用 当我们某一段css样式大量重复的时候,我们就可以了。 如果说:我们自定义的滚动条
编译前
//使用@mixin来定义共同的样式 @mixin test{ width:100px; height:100px; background:red } // @include 来使用 #deno{ @include test() }
编译后
#deno { width: 100px; height: 100px; background: red; }
4.传参 编译前
使用传递会让我们的css代码更加的灵活。 这样写起来会更加的高效
@mixin test($w,$h, $color){ width:$w; height:$h; background:$color }; #deno{ @include test(200px,200px,pink); }
编译后
#deno { width: 200px; height: 200px; background: pink; }
5. 默认传参
@mixin test($w:100px,$h:100px){ width:$w; height:$h; background-color:red; } #deno{ @include test(200px,200px); }
默认参数 编译前
<!-- 默认参数优先放置在最后 --> @mixin test($color,$size: 20px ) { background: $color; font-size: $size; } #deno { @include test( $color: green ) }
编译后
#deno { background: green; font-size: 20px; }
传参(指定参数) 这一种很有用
@mixin test($color,$size: 20px ,$w:100px ) { background: $color; font-size: $size; width:$w } #deno { @include test( $color: green, $w:200px ) }
这篇关于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专业技术文章分享