变量的定义
//定义一个变量
{
$color:red;
//在css代码内部使用;
.content{
border:1px solid $color;
}
}
嵌套
//可以在css里面进行多层嵌套
{
.father{
.children{
.sun{
}
}
}
}
&符号
代替父元素 一般配合嵌套使用
scss
.container{
&-inner{
width:100px;
height:100px;
}
}
css
.container .container-inner{
width:100px;
height:100px;
}
插值 #{}
可以理解为 es6的模板字符串
/*scss*/
$name: "info";
$attr: "border";
.content-#{$name} {
#{$attr}-color: #ccc;
}
/*css*/
.content-info {
border-color: #ccc;
}
也可以在函数调用函数
定义一个函数
// 横屏转换
@function tovmin($rpx){//$rpx为需要转换的字号
@return #{$rpx * 100 / 750}vmin;
}
.container{
height:calc( 100vh = #{tovmin(200)} );
}
@mixin的使用
mixin与include配套使用
//不带参数
@mixin text-ellipsis () {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
//使用
.text{
@include text-ellipsis;
}
//带参数
// flex布局(设置默认参数 跟函数的默认参数一样使用)
@mixin flex($content:center){
display: flex;
justify-content:$content;
align-items: center;
flex-wrap:wrap;
}
//使用
.container{
@include(space-between)
}
继承 @extend
.font{
color:red;
font-size:20px
}
.text{
@extend .font;
}
编译结果
.text{
color:red;
font-size:20px;
}
@content的使用
有点类似于vue组件的插槽
@mixin hover {
&:not([disabled]):hover {
@content;
}
}
.button {
border: 1px solid black;
@include hover {
border-width: 2px;
}
}
// 编译后
.button {
border: 1px solid black;
}
.button:not([disabled]):hover {
border-width: 2px;
}
@for循环
@for $var form <开始值> through <结束值>
@for $var form <开始值> to <结束值>
through 不包括 结束值
to 包括结束值
/*scss*/
$columns: 3;
@for $i from 1 through $columns {
.col-#{$i} {
width: 100% / $columns * $i
}
}
@for $i from 1 to $columns {
.row-#{$i} {
width: 100% / $columns * $i
}
}
/*css*/
.col-1 {
width: 25%
}
.col-2 {
width: 50%
}
.col-3 {
width: 75%
}
.row-1 {
width: 25%
}
.row-2 {
width: 50%
}
@if 条件语句
与js 中的if else相同 找到条件便会停止
@mixin txt($weight) {
color: white;
@if $weight == bold {
font-weight: bold;
}
@else if $weight == light {
font-weight: 100;
}
@else {
font-weight: normal;
}
}
.txt1 {
@include txt(bold);
}
编译结果:
.txt1{
color:white;
font-weight:bold
}
@at-root
会将嵌套的class属性提到最外层,一般的配合嵌套使用
.father{
@at-root .child{
border:1px solid black;
}
}
编译为
.father{
}
.child{
border:1px solid black;
}
@use
引入scss文件
@use "path/to/file" as prefix;
使用
.box{
width:prefix.$width;
}
Math
支持js中的一些math运算
p {
z-index: abs($number: -15); // 15
z-index: ceil(5.8); //6
z-index: max(5, 1, 6, 8, 3); //8
opacity: random(); // 随机 0-1
}