scss 常用API
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 常用API相关的知识,希望对你有一定的参考价值。
参考技术A 1、@import 'resources/variables.scss'; 引入2、$ 变量
.class1 font-size:19px; width:$g-main-sidebar-width
.class2 @extend .class1; color:black;
.class1 font-weight:bold;
3、# 插值
$width: 100px;
.class3
width: calc(100% - #$width)
4、mixin 混入以及传参
@mixin pull-right($size:14)
float: right;
font-size: #$sizepx;
.class4
@include pull-right(16)
5、 @if @else 条件语句
$sideWidth:180px;
.container
@if ($sideWidth==180px)
width: calc(100% -# $sideWidth);
@else
width: 100%;
6、循环语句
@for...to... / @for...through...
@for $i from 1 to 5
.border-#$i
border:1px solid #ccc;
// 编译结果: border-1、border-2、border-3、border-4 不包括最后一个 5,如果把to 换成 through,就会包括最后一个5
@each...in...
@each $member in a,b,c,d
.#$member
background-image:url('/images/#$member.png');
@while...
$i:6;
@while $i>0
.item-#$i
width:2em * $i
$i: $i - 2;
7、@function 函数
@function double($n)
@return $n *2;
#sidebar
width:double(5px);
8、:export 导出变量,给js使用
$g-main-sidebar-width: 80px;
$g-sub-sidebar-width: 120px;
:export
g_main_sidebar_width: $g-main-sidebar-width;
g_sub_sidebar_width: $g-sub-sidebar-width;
9、@extend 继承
.tip
font-size:14px;
.warnTip
@extend .tip;
color:#f40;
.errorTip
@extend .tip;
color: red;
10、var()
声明变量
$colors:
primary: #FFBB00;
success: #00FFAA
.txtColors
@each $name,$color in $colors
--color-#$name : $color; // var() 中变量必须 -- 开头
// 编译结果: --color-primary: #FFBB00; --color-success:#00FFAA; 动态声明的变量
使用变量
. normalColor
color: var(--color-primary)
. successColor
color: var(--color-success)
// 注意声明的变量的 “作用域”。将局部变量转换为全局变量可以添加 !global 声明。
#main
$width: 5em !global;
width: $width;
#sidebar
width: $width;
11. 字符串运算
+ 可用于连接字符串
p
cursor: e + -resize;
编译为
p
cursor: e-resize;
注意,如果有引号字符串(位于 + 左侧)连接无引号字符串,运算结果是有引号的,相反,无引号字符串(位于 + 左侧)连接有引号字符串,运算结果则没有引号。
p:before
content: "Foo " + Bar;
font-family: sans- + "serif";
编译为
p:before
content: "Foo Bar";
font-family: sans-serif;
运算表达式与其他值连用时,用空格做连接符:
p
margin: 3px + 4px auto;
编译为
p
margin: 7px auto;
在有引号的文本字符串中使用 # 插值语句可以添加动态的值:
p:before
content: "I ate #5 + 10 pies!";
编译为
p:before
content: "I ate 15 pies!";
空的值被视作插入了空字符串:
$value: null;
p:before
content: "I ate #$value pies!";
编译为
p:before
content: "I ate pies!";
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
)
}
作者:明月人倚楼
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
支付宝
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。
以上是关于scss 常用API的主要内容,如果未能解决你的问题,请参考以下文章