scss笔记

1、可以使用 & 表示父元素选择器

  a{    padding: 0 10px;    color: #fff;    &:hover{      color:#ddd;    }

2、嵌套-属性嵌套
嵌套值有些属性拥有同一个开始单词，如border、font

.box2 {  border: {    style: solid;    left: {      width: 4px;      color: #888;    }    right: {      width: 2px;      color: #ccc;    }  }}

3、混合声明和调用
@mixin 声明
@include 调用

@mixin border-radius{    -webkit-border-radius: 5px;    border-radius: 5px;}button {    @include border-radius;}

得到：

button {  -webkit-border-radius: 5px;  border-radius: 5px;}

有参数mixin

@mixin border($w:10){   -webkit-border-radius: $w+px;     border-radius:$w+px; }.btn{    @include border(3)}

多个参数mixin

 @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){    border-bottom:$border;    padding-top:$padding;    padding-bottom:$padding;  }调用：.imgtext-h li{    @include horizontal-line(1px solid #ccc);}.imgtext-h--product li{    @include horizontal-line($padding:15px);}

多组值参数mixin

 @mixin box-shadow($shadow...) {  -webkit-box-shadow:$shadow;  box-shadow:$shadow;}调用：.box{  border:1px solid #ccc;  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));}

4、继承类 @extend

$width: 360px; .box1{    width: $width;    border:1px solid red;    background-color: #fdd;}.box2 {  @extend .box1;  border-width: 3px;}

5、选择器占位符 %placeholder
%mar 若不调用 @extend %mar，则相当于没写这个样式
6、运算

p {  font: 10px/8px;             // 纯 CSS，不是除法运算  $width: 1000px;  width: $width/2;            // 使用了变量，是除法运算  width: round(1.5)/2;        // 使用了函数，是除法运算  height: (500px/2);          // 使用了圆括号，是除法运算  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算}

如果你希望在纯 CSS 中使用变量和 /， 你可以用 #{} 包住变量：

p {  $font-size: 12px;  $line-height: 30px;  font: #{$font-size}/#{$line-height};}

7、@if判断

p {  @if 1 + 1 == 2 { border: 1px solid;  }  @if 5 < 3      { border: 2px dotted; }  @if null       { border: 3px double; }}//if elsep{    @if 1+1==2{       width:30px;    }@else{       width:100px;    }}

三目运算符的语法为：
@if(condition,condition_true, $condition_false)，
三个参数分别表示：条件，条件为真的值，条件为假的值。

$fontBold: true;p {    font-weight: if($fontBold, bold, normal);}//编译生成p {    font-weight: bold;}

8、for循环

• @for $i from through（包括end）
• @for $i from to（不包括end）

 @for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }}

9、each循环

• @each 循环就是去遍历一个列表，然后从列表中取出对应的值。
• @each 循环指令的形式： @each $var in < list >

@each $animal in puma, egret, salamander {  .#{$animal}-icon {    background-image: url('/course/565c0c2abc27d77730c072b3/img/#{$animal}.png');  }}

被编译为：

.puma-icon {  background-image: url('/course/565c0c2abc27d77730c072b3/img/puma.png'); }.egret-icon {  background-image: url('/course/565c0c2abc27d77730c072b3/img/egret.png'); }.salamander-icon {  background-image: url('/course/565c0c2abc27d77730c072b3/img/salamander.png'); }

10、while循环

$i: 6; @while $i > 0 {  .item-#{$i} { width: 2em * $i; }  $i: $i - 2;}