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: #{$size}px;
}
.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!"; }
网友评论