sass入门

一，sass的安装

二，sass声明变量


$width:300px;

三，普通变量与默认变量
1,普通变量


//scss文件
$width:300px;
div{width: $width;}


//编译后的css文件
div{width: 300px;}

2,默认变量 !default;


//scss文件
$width:500px;
$width:300px !default;
div{width: $width;}


//编译后的css文件
div{width: 500px;}

四，变量的调用


//定义变量
$brand-primary:darken(#428bca,6.5%) !default;
$btn-primary-color:#fff !default;
$btn-primary-bg:$brand-primary !default;
$btn-primary-border:darken($brand-primary,5%) !default;
//按钮的样式
.btn-primary{
color             :$btn-primary-color;
background-color  :$btn-primary-bg;
border            :1px solid $btn-primary-border;
}


//编译后的css文件
.btn-primary{
color              : #FFF;
background-color   : #337ab7
border             : 1px solid #2e6da4;
}

五，局部变量和全局变量


$color:orange !default;   //这里设置全部变量
.block{
  color:$color;           //调用全部变量
}
.em{
  $color:red;             //设置局部变量
  a{ color:$color;}       //调用局部变量
}

六，嵌套

1，选择器嵌套
2，属性嵌套，例如border，padding，margin，font等中间有-的属性都可以使用属性嵌套。
3，伪类嵌套，&:before; &:after;

七，混合宏
声明混合宏：@mixin Name{}
调用混合宏：@include Name;
混合宏传参（三种）：1，传一个不带值得参数 2，传一个带值的参数 3，传多个参数

标签： sass入门