sass相关实例

sass变量声明 ：

---

 

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

---

 

变量引用：

---

 

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

.selected {
  border: 1px solid #F90;
}

---

嵌套

---

//sass style

//-----------------------------------

nav {

  ul{

    margin:0;

    padding:0;

    list-style:none;

  }

  li{

    display:inline-block;

  }

  a{

    display:block;

    padding:6px 12px;

    text-decoration:none;

  }

}

---

导入

---

 

//sass style

//-----------------------------------

//reset.scss

html,

body,

ul,

ol{

  margin:0;

  padding:0;

}

//base.scss

@import 'reset';

body{

  font-size:100% Helvetica,sans-serif;

  background:#efefef;

}

---

扩展/继承

//sass style

//-----------------------------------

.message {

   border: 1px solid #ccc;

   padding: 10px;

   color: #333;

}

.success {

   @extend .message;

   border-color: green;

}

.error {

   @extend .message;

   border-color: red;

}

.warning {

   @extend .message;

   border-color:yellow;

}

---

运算

---

//sass style

//-----------------------------------

.container {width: 100%;}

article[role="main"] {

   float: left;

   width: 600px / 960px * 100%;

}

aside[role="complimentary"] {

   float: right;

   width: 300px / 960px * 100%;

}

---

 

颜色

---

//sass style

//-----------------------------------

$linkColor: #08c;

a {

   text-decoration:none;

   color:$linkColor;

   &:hover{

         color:darken($linkColor,10%);

               }

}

---