变量
定义变量
//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;//使子元素平均分布在一行上
