Sass：基础用法学习笔记

Sass几个基础用法特性

定义变量：$

使用$进行变量定义。
可以在{}外部或内部定义，存在定义域类似概念。内部定义只能内部使用。

嵌套

像HTML一样，可以嵌套书写

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

编译后：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

父选择器标识符：&

在嵌套内部使用&获取外层父选择器

article a {
  color: blue;
  &:hover { color: red }
}

#content aside {
  color: red;
  body.ie & { color: green }
}

编译后

article a { color: blue }
article a:hover { color: red }

#content aside {color: red};
body.ie #content aside { color: green }

群组选择器

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

nav, aside {
  a {color: blue}
}

编译后

.container h1, .container h2, .container h3 { margin-bottom: .8em }

nav a, aside a {color: blue}

子选择器(>)和同层选择器(+、~)

在css中
>选择直接后代
+选择同层第一个兄弟元素
~选择同层所有兄弟元素

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

编译后

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

嵌套属性，相同前缀只需要写一遍

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

编译后

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

导入Sass

可以使用@import别的Sass文件，引入别的Sass文件中定义。
此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。

1. 默认值变量
   使用@default变量定义默认值，如果引入的Sass中存在该属性，则使用引入的，否则使用默认值

   $fancybox-width: 400px !default;
   .fancybox {
   width: $fancybox-width;
   }
   

   在上例中，如果用户在导入你的sass局部文件之前声明了一个$ fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。

混合器@mixin

1. 使用@mixin标识定义符，定义复用性较高代码

   @mixin rounded-corners {
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
   }
   notice {
     background-color: green;
     border: 2px solid #00aa00;
     @include rounded-corners;
   }
   

   编译后

   .notice {
     background-color: green;
     border: 2px solid #00aa00;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
   }
   

2. 混合器可以传参

   @mixin link-colors($normal, $hover, $visited) {
     color: $normal;
     &:hover { color: $hover; }
     &:visited { color: $visited; }
   }
   
   a {
     @include link-colors(blue, red, green);
   }
   
   

   编译后

   a { color: blue; }
   a:hover { color: red; }
   a:visited { color: green; }
   

继承@extend

使用继承集成别的样式

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译后

.seriousError {
  border: 1px solid red;
  background-color: #fdd;
  border-width: 3px;
}

2