scss的html文档 兄弟连老师上课

@charset “UTF-8”;
/css的注释 css显示/
// sass注释,css不显示

/*
sass –help -t
编译风格

default
compact 一行排列 紧凑型
compressed 压缩版本 一般用在生产环境

expanded 开发模式

sass -t compressed scss/scss.scss:css/scss.css
动态监听
sass -t expanded –watch scss/scss.scss:css/scss.css

*/

$col_01:yellow;$fontSize:20;
$width:20;

div{
width:$fontSize*$width+px;
background:$col_01; } .box{ border:1px solid$col_01;
}

.box{
border-top:1px solid red;
border-bottom:1px solid red;
}
.box{
border:{
top:1px solid red;
bottom:1px solid red;
}
}

.box1{
#head,#footer{
width:100px;
height:100px;
p{
background:red;
}
}
}
.container{
height:90px;
.nav_bar{
background:red;
&>:first-child{
width:100px;
}
}
.main{
width:100px;
}
.footer{
height:100px;
}
div{
width:100px;
height:100px;
}
}

// 变量左值使用

// 类
$name:boxx; .#{$name}{
width:100px;
}

{$name}{

width:100px;

}
$a:text-;$color:-color;
div{
#{$a}align:center; background#{$color}:red;
}

// this概念
a{
&:link{
background:red;
}
&:hover{
background:pink;
}
}

@mixin style1($a,$b){
width:$a; height:$b;
background:red;
@include style2();
}
@mixin style2(){
border:1px solid red;
}
div{
@include style1(10px,10px);
}
.box111{
@include style1(100px,100px);
}

// 局部变量

.box111{
// $name1:red;//局部变量 } .box222{ // background:$name1;
}

//预备样式

%sc{
width:100px;
height:100px;
}
%sc1{
background:red;
}
.btns{
@extend %sc;
@extend %sc1;
}
// 判断
$num:1;

@if $num==1{ .box10{ width:100px; height:100px; } }@else if$num==4{
.box10{
background:red;
}
}@else{
.box10{
background:pink;

}

}

//循环

@for $i from 1 through 10{ // 从1循环到10 .box#{$i}{
width:$i*10px;
}
}

// each循环
@each $i in(box1,box2){ //$i代表的是 括号里面参数
//参数有几个循环几次
.#{$i}{
width:100px;
}
}

$names:cont;$font-val:(
1 $names 2rem 100,//第一条参数 2$names 10px 300,//第二条参数
3 box 100px 200//第三条参数
);
@each $i in$font-val{
// $i 1,2,3条参数 //选择器拼接部分 .#{nth($i,2)}#{nth($i,1)} { width:100px; font-size:nth($i,3);
font-weight:nth($i,4);
}
}