scss语法

基础语法

#sidebar {
  width: 30%;
  background-color: #faa;
}

 嵌套选择器

$width:30px;
$color:#456789;
.div1{
    width: $width;
    height: $width;
    background-color: $color;

    .div-inner{
        width: $width;
        height: $width;
        background-color: $color;
        .div-inner-inner{
            width:$width;
            height:$width;
            background-color: $color;
        }
    }
    a{
        color:red;
    }
}

 生成样式

.div1 {
  width: 30px;
  height: 30px;
  background-color: #456789;
}

.div1 .div-inner {
  width: 30px;
  height: 30px;
  background-color: #456789;
}

.div1 .div-inner .div-inner-inner {
  width: 30px;
  height: 30px;
  background-color: #456789;
}

.div1 a {
  color: red;
}

 

复合写法（这种写法 “：”后一定要加空格，否则语法错误）

.div1{
    border: {
        left:1px solid #000;
        top: 2px solid #eee;
    };
    background: {
        image:url(‘abc.png‘);
        color:#000;
    }
}

 生成样式

.div1 {
  border-left: 1px solid #000;
  border-top: 2px solid #eee;
  background-image: url("abc.png");
  background-color: #000;
}

 

sass数据的常见类型

number类型

$width:300px;
$zoomValue:2;

.div{
　　width:$width:
　　height:$width;
　　zoom:$zoomValue;
}

 

 

color类型

$color:red:
$colorHex:#ffe932;

.div{
    color:$color;
    background-color:$colorHex;
}

 

 

String类型

$str:‘hello.jpeg‘;

.div{
    background-image:url(‘images/‘+$str);
}

 

 

list类型(sass里的数组类型)

$list: (100px,200px,‘string‘,2);

 注意：在sass里，数组的下标从1开始

使用list

 获取子元素

.div {
    width:nth($list,1);
    height:nth($list,2);
 }

获得子元素在数组中的下标

.div{
    zoom:index($list,‘string‘);
}

 

map类型（sass里的对象类型）

$map:(top:1pxs,left:2px,bottom:3px,right:4px);

 循环遍历每个值

.div{
    @each $key,$value in $map {
        #{$key}:$value;
    }
}

 

 

sass基本运算

加减乘除

( )代表运算

$num1:100px;
$num2:200px;
$width:$num1+$num2;

.div{
    width:$width;
}

.div{
    font:(10px/8);
    font:(10px*8);
    width:$width/2;
    margin-left:(5px+8px/2);
}

 颜色运算

$color1:#010203;
$color2:#040506;
$color3:#a69e61;

.div{
    color:mix($color1,$color2);
    color:red($color1);
    color:red($color3);
    color:green($color3);
    color:blue($color3);
    color:rgb(red($color3),green($color3),blue($color3));
}

 

Mixin（代码块）

一般mixin

@mixin helloMixin{
    display: inline-block;
    font:{
        size:20px;
        weight:500;
    }
    color:red;
}

.div{
    @include helloMixin;
}

 嵌套mixin

@mixin helloMixin2{
　　padding:10px;
　　@include helloMixin;
　　background-color: red;
}

.div {
　　width: 100px;
　　@include helloMixin2;
}

 参数mixin

@mixin sexy-border(#color,$width){
    border:{
        color: $color;
        width: $width;
        style:dashed;
    };
}
.div{
    @include sexy-border(blue,2px);
}

 

 

sass继承

简单继承

.div{
    border:1px;
    background-color: red;
}

.div{
    @extend .div;
    border-width: 3px;
}

 生成样式

.div {
  border: 1px;
  background-color: red;
}

.div {
  border-width: 3px;
}

 

关联属性继承

.div1{
    border: 1px;
    background-color: red;
}
.div1.other{
    background-image: url(‘hello.jpeg‘);
}
.divext{
    @extend .div1;
}

生成样式

.div1,.divext {
  border: 1px;
  background-color: red;
}

.div1.other,.other.divext {
  background-image: url("hello.jpeg");
}

 

 链式继承

.div1{
    border: 1px solid #000;
}
.div2{
    @extend .div1;
    color: red;
}
.div3{
    @extend .div2;
    color: #000;
}

 生成样式

.div1,.div2,.div3 {
  border: 1px solid #000;
}

.div2,.div3 {
  color: red;
}

.div3 {
  color: #000;
}

 

伪类继承

a:hover{
    text-decoration: underline;
}
.hoverlink{
    color: red;
    @extend :hover;
}

 生成样式

a:hover,a.hoverlink {
  text-decoration: underline;
}

.hoverlink {
  color: red;
}

 

sass条件控制

if条件语句

$type: ‘tony‘;

p{
    @if $type == ‘bufy‘ {
        color: red;
    } @else if $type == ‘tim‘ {
        color: blue;
    } @else if $type == ‘tony‘ {
        color: green;
    } @else {
        color: black;
    }
}

 生成

p {
  color: green;
}

 

$type: ‘tony‘;

p{
    @if $type == ‘bufy‘ {
        .div{
            color: red;
        }
    } @else {
        .div{
            color: black;
        }
    }
}

 生成样式

p .div {
  color: black;
}

 

for条件语句

from through

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

 生成样式

.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

.item3 {
  width: 3px;
}

 

from to

@for $i from 1 to 3 {
    .item#{$i} {
        width: 1px * $i;
    }
}

 生成样式

.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

 

for list

$list:(1,2,3,4,5);
@for $i from 1 through length($list) {
    .item#{$i} {
        width: 1px * $i;
    }
}

 生成样式

.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

.item3 {
  width: 3px;
}

.item4 {
  width: 4px;
}

.item5 {
  width: 5px;
}

 

while

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

 生成样式

.item6 {
  width: 6px;
}

.item4 {
  width: 4px;
}

.item2 {
  width: 2px;
}

 

each

$map:(top:1px,right:4px);
.div{
    @each $key,$value in $map {
        #{$key}:$value;
    }
}

 生成样式

.div {
  top: 1px;
  left: 2px;
  bottom: 3px;
  right: 4px;
}