sass学习笔记

1、sass与scss
sass没有大括号和分号，scss更倾向于css的格式，带有大括号和分号

2、导入
scss文件使用@import导入文件，导入scss文件可以不写后缀，编译后合并为一个文件，导入css文件之后生成的css文件带有@import ‘name.css’

3、注释
//或者是/**/

4、变量
分为普通变量、默认变量（!default）、全局变量（!global）、特殊变量（#{$var}）和多值变量（list和map）
局部变量和全局变量的声明和用法类似js
特殊变量:我的理解是js中变量和字符串拼接时会采用引号和‘+’号，这里的特殊变量可以直接放在引号当中不担心不解析，例如

$back:icon;
//sass官方写法
.demo{background:url(img/#{$back}.png);}
//自己试的写法
.demo{background:url(img/'+#{$back}+'.png);}

//编译之后为
.demo{background:url(img/icon.png);}
.demo{background:url(img/icon.png);}
//两种方法都可以，第二种谨慎使用，我并没有看到官网文档中有这种写法

多值变量
list：类似数组

//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;

map：类似对象，含有键值对

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

5、嵌套
选择器嵌套和属性嵌套，前者类似css后代选择器，后者是把带有相同前缀的属性嵌套书写，个人感觉意义不大，还增加了阅读难度

//选择器嵌套（&代表父级容器）
#top_nav{
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//属性嵌套
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

@at-root 跳出嵌套，个人感觉意义不大，想要跳出不在大括号内写不就可以了

6、@mixin混合
类似函数，用@include调用，自定义参数，可以多个也可以多组

//sass style
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
.demo{
    margin-left:auto;
    margin-right:auto;
}

7、@content
更加适合用于@media

//@content中存放自定义的样式
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
@media only screen and (max-width: 480px) {
  body { color: red }
} 

8、继承
就是直接采用某个已有的样式的全部样式，使用@extend调用，

h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

9、% 点位选择器
很好理解，在scss文件中先定义一些常用的css类，调用就编译到css文件中，不调用就不编译，降低文件大小

10、函数
可以自定义函数@function，也可以使用scss自带的函数，一般用的最多的是颜色函数，例如lighten（颜色值，百分比）、darken（颜色值，百分比）

$baseFontSize:      10px !default;
$gray:              #ccc !defualt;        

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

//css style
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

11、运算
简单的四则运算

12、条件判断与循环

//sass style
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

//三目判断
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

//@for循环
//throgh包含end
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//to不包含end
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//@each循环
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//@map循环
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}