sass学习总结

一.sass优势

可以用sass来定义一套新的语法规则和函数，以少量的创建复杂的设计。可以函数似使用CSS,更加快捷高效。

二.编译

我用的webstorm,有自动编译，但要安装ruby,也是麻烦。所以我用的是koala编译器，傻瓜式操作，方便快捷，你值得拥有，友情提示。

英语渣渣如我请在安装完打开后，点击那个齿轮图标。第一项选择中文。这个使用什么的都很简单。需要的自行搜索。

需要说明的是sass有两种后缀名文件：

　　1。sass 不使用大括号和分号。

　　2. scss 格式基本与css文件差不多,很好上手，推荐这个。

三.常用语法

1.导入scss文件

编译时将@import的scss文件合并进来，与当前文件合并成一个css文件。

//有一个scss文件 可能是通用的重置文件 a.scss
html{
  height:100%;
}

//有一个scss文件 b.scss 需要导入a文件
@import "a";
body{
   background:red;
 }

/*编译得到的文件*/ b.css
html {
  height: 100%; 
}

body {
  background: red; 
}

2.变量

sass变量名以$开头，紧跟变量名，变量值和变量名使用冒号分开。全局使用

// scss文件 默认变量
$color:#f0f0f0;
$masize:16px;
body {
  margin-top:$masize;
  color: $color;
  background:red;
 }

/*编译后的文件*/
body {
  margin-top: 16px;
  color: #f0f0f0;
  background: red;
}

//作为特殊情况或用作属性情况下 要以#{$variable}
$color:#f0f0f0;
$masize:16px;
$class:lj!default;
.cs#{$class} {
  margin-top:$masize;
  color: $color;
  background:red;
 }

/*编译后文件*/
.cslj {
  margin-top: 16px;
  color: #f0f0f0;
  background: red; }

sass可以使用多值变量，list像js中的数组，map类型像js中的对象。

list 

//注意不要忘掉nth
$color:#f0f0f0 #787232;
$masize:16px;
$class:lj!default;
.cs#{$class} {
  margin-top:$masize;
  color: nth($color,1);
  background:red;
  &:hover{
    color:nth($color,2)
  }
 }

map 以key和Value成对出现

$font:(h1:26px,h2:22px,h3:18px);

@each $class,$size in $font{
  #{$class}{
    font-size:$size;
  }
}

/*编译后的文件*/
h1 {
  font-size: 26px; }

h2 {
  font-size: 22px; }

h3 {
  font-size: 18px; }

3.嵌套

一般指是在一个选择器中嵌套另一个选择器来实现继承，比如div 中有ul,ul中有li,li里有a 那可以这样写,可以使用@at-root来跳出嵌套

//嵌套scss文件
div {
  width:200px;
  ul {
    margin:20px;
    li {
      line-height:40px;
      a {
        color:#f0f0f0;
      }
    }
  }
}

/*编译后的文件*/ 
 div {
    width: 200px; 
  }
  div ul {
  　margin: 20px; 
  }
  div ul li {
    line-height: 40px; 
  }
    div ul li a {
     color: #f0f0f0; 
  }

4.继承

sass中可以让选择器继承另一个选择器的所有样式，需使用关键词@extend

//继承使用@extend
.at {
  color:#432343;
  background: #000000;
}
.ac {
  @extend .at;
  font-size:18px;
}

//编译后的css文件
.at,.ac {
  color: #432343;
  background: #000000;
}
.ac {
  font-size: 18px;
}

还有函数包括条件判断和循环等，这样就不介绍了。有需要自行搜索

官网语法介绍  http://www.w3cplus.com/sassguide/syntax.html。