变量
定义变量
//app.scss
$allpadding:20px; //声明颜色变量 $color
//使用
@import '@/assets/app.scss';.container{width: 100%;padding:$allpadding;}⚠️scss中，中下划线和下划线是同一个东西
$link-color: blue;
a {color: $link_color;
}//编译后a {color: blue;
}计算
变量可进行加减乘除：http://t.csdnimg.cn/duYU9
width: 100px + 100px + 100px; //加法
width: 100px - 100px + 100px; //减法
width: 100px * 100 //乘法,注scss的乘法和除法是带单位的
width: (100px/3) //注意这里需要带括号,如果不带括号会当场分割数值
width: $width / 3 //也可以不带括号,但是里面计算的一定要有声明的变量,因为这个语法css不认识,那么就会被解析成SCSS
width: 100 % 3px //SCSS也支持取模运算嵌套
基础嵌套
scss和css一样可以进行嵌套：
.container{width: 100%;display: flex;flex-wrap: wrap;.btn{margin: 10px;}}
编译结果
.container{width: 100%;display: flex;flex-wrap: wrap;}
.container .btn{margin: 10px;}
父级选择器
.container{a {color: red; &:a {color:blue;}&-left: {color:black;}}
}
编译结果.container a {color: red;
}
.container a:hover {color: blue;
}
.container a-left {color: black;
}属性嵌套
/* SCSS */
font: {family: Helvetica, sans-serif;size: 18px;weight: bold;
}text: {align: center;transform: lowercase;overflow: hidden;
}/* CSS */
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;text-align: center;
text-transform: lowercase;
text-overflow: hidden;导入scss
@import '@/assets/app.scss';
继承
继承
在scss中可以将一个样式继承于另一个样式，使用@extend
.aaaa {bakckground: red;
}.sprite-1 {@extend .aaaa;background-position: 0 -30px;
}.sprite-2 {@extend .aaaa;background-position: 0 -60px;
}占位符
在scss继承时，你会发现，当.aaaa被继承编译后，你会发现它就没用，也就是说有没有一个办法使.aaaa不会出现在编译后的文件中，但它的功能不变，就出现了占位符
%aaaa {bakckground: red;
}.sprite-1 {@extend %aaaa;background-position: 0 -30px;
}.sprite-2 {@extend %aaaa;background-position: 0 -60px;
}混合
在写css时，经常会有大量重复的代码，这时候混合就出现了。
定义混合
@mixin mixin-name {property: value;
}使用混合
selector {@include mixin-name;
}混合中也可以包含混合
@mixin mixin-name {@include mixin-name-one;
}混合传参
定义默认值color=blue，width=1px
@mixin bordered($color: blue, $width: 1px) {border: $width solid $color;
}
p { @include bordered(blue,2px); }函数
@if
- （1）@if…（单向选择）；
- （2）@if…@else…（双向选择）；
- （3）@if…@else if…（多向选择）；
$num1: 8;.content {@if $num1 >= 20 { width: 150px; color:red } @else if $num1 <= 10{ /* 此样式块会被使用*/width: 200px; color:blue} @else { width: 350px; color:green }}@for
方式1：@for $i from 开始值 through 结束值
方式2：@for $i from 开始值 to 结束值
/* SCSS */@for $i from 1 through 5 {.banner-#{$i} {background-image: url(/images/banner-#{$i}.png);}}/* CSS 编译后 */.banner-1 {background-image: url(/images/banner-1.png); }.banner-2 {background-image: url(/images/banner-2.png); }.banner-3 {background-image: url(/images/banner-3.png); }.banner-4 {background-image: url(/images/banner-4.png); }.banner-5 {background-image: url(/images/banner-5.png); }@each
方法：@each $var in 列表值
{
……
}
/* SCSS */@each $pic in about, news, project,contact {category-pic .#{$pic} {background-image: url(/images/pic/#{$pic}.png); }}/* CSS 编译后 */category-pic .about {background-image: url(/images/pic/about.png); }category-pic .news {background-image: url(/images/pic/news.png); }category-pic .project {background-image: url(/images/pic/project.png); }category-pic .contact {background-image: url(/images/pic/contact.png); }@while
/* SCSS */$i: 6;@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;}/* CSS 编译后 */.item-6 {width: 12em;}.item-4 {width: 8em;}.item-2 {width: 4em;}扩展
justify-content
justify-content 是 SCSS 中的一个属性，用于控制flex容器内元素在主轴方向上的对齐方式。它可以取以下值：flex-start：flex容器内的元素从左到右排列，即左边对齐。
flex-end：flex容器内的元素从右到左排列，即右边对齐。
center：flex容器内的元素居中，即容器中心对齐。
space-between：flex容器内的元素在主轴方向上平均分布，即两端对齐。
space-around：flex容器内的元素在主轴方向上平均分布，并在两端保持相同的外边距，即around对齐。
stretch（默认值）：flex容器内的元素会尽可能地扩展，以填充整个容器。例子：设置内部元素横向自动排布换行：
- 将容器设置为 flex 布局。
- 允许容器内的子元素换行。如果子元素数量超过容器宽度，它们将自动换行。
- 将子元素平均分布在整个容器中，并在左右两边保持一定的外边距。
display: flex;flex-wrap: wrap;justify-content: space-between;//使子元素平均分布在一行上
