SCSS最全使用方式

安装编译不讲了,这里只讲语法
此笔记参照此视频第八集往后制作

注释

//多行注释
/* 内容 */

//单行注释
// 内容

//快捷键
ctrl+/   //windows
command+/ //apple

编译输出的css格式

nested  嵌套
compact  紧凑
expanded  扩展
compressed  压缩

变量

//定义变量
$ 变量名 : 属性值

//例如
//定义变量border,值为1px solid #ccc
$border:1px solid #ccc
$width:200px
//使用
div{
   
	width:$width;
	hight:$width;
	border:$border
}
//上面的意思就是给div定义宽高200px,边框1px实线灰色

嵌套

//如下格式
ul{
   
width:200px
  li{
   
   width:100px
     p{
   
      border:1px solid red
    }
  }
}
//等同于
ul{
   
 width:200px
}
ul li{
   
 width:100px
}
ul li p{
   
 border:1px solid red
}

嵌套时调用父选择器

ul{
   
width:200px
  li{
   
   width:100px
     p{
   
      border:1px solid red
      :hover{
   
			color:red
		}
    }
  }
}
//等同于
ul{
   
 width:200px
}
ul li{
   
 width:100px
}
ul li p{
   
 border:1px solid red
}
ul li p :hover{
     //这样的话中间有个空格
 border:1px solid red
}
//修改如下:
---------------------------------------------------------------------
ul{
   
width:200px
  li{
   
   width:100px
     p{
   
      border:1px solid red
      &:hover{
     //&代表子而不是后代
			color:red
		}
    }
  }
}
//等同于
ul{
   
 width:200px
}
ul li{
   
 width:100px
}
ul li p{
   
 border:1px solid red
}
ul li p:hover{
     //这样的话中间没有空格了
 border:1px solid red
}

属性嵌套

body{
   
    font-size: 20;
    font-weight: 700;
    border: 1px solid;
    border-left: 0;
    border-right: 0; //这里面的font和border都拥有多个属性,这时可以用属性嵌套
}
//修改如下
body {
   
    font: {
   
        size: 20;
        weight: 700;
    };
    border: 1px solid {
   
        left: 0;
        right: 0;
    };
}
//效果同上

混合MiMins

可以认为是有名字的定义好的样式,可以在任意地方使用,也可以添加参数

//格式
@mimin 名字 (参数1,参数2...){
   }

//不加参数写法
@mixin alert {
   
    color:#ccc;
    background-color: red;
    //也可以在下面添加嵌套元素
    a{
   
      color:write
    }
}

// 使用
.alert-warning {
   
     @include alert()
}

//等同于
.alert-warning{
   
    color: #ccc;
    background-color: red;
}
.alert-warning a{
   
	color:write
}
-----------------------------------------------------------------------------------------------------------

//加参数写法
@mixin alert($text-color,$background-color) {
    //参数必须加$开头(跟变量命名方式一样,多个参数需要加逗号)
    color:$text-color;
    background-color: $background-color;
    //也可以在下面添加嵌套元素
    a{
   
      color:darken($background-color,10%)  //darken这个方法可以加深颜色,参数二就是加深的程度
    }
}

// 使用
.alert-warning {
   
     @include alert(#ccc,red)