sass的使用

1.声明变量-全局声明-局部声明中划线或下划线两种用法相互兼容

$nav-color: #F90; $highlight-border: 1px solid $nav-color;

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

2.嵌套

　　#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 }
　　　　body.ie & { color: green }选择浏览器的适配
　　}　　/*编译后*/　　 article a { color: blue } 　　 article a:hover { color: red }　　 body.ie #article a { color: green }

群组嵌套

　　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-style: solid; border-width: 1px; border-color: #ccc; }
　　nav {
　　　　border: 1px solid #ccc {
　　　　　　left: 0px;
　　　　　　right: 0px;
　　　　}
　　}　　编译后　　nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; }

3.导入sass文件

@import " themes/night-sky " ; 导入 scss 或者 sass 文件

!default 如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值

$fancybox-width: 400px !default;

.fancybox {

　　width: $fancybox-width;

}
局部导入 .blue-theme { @import "blue-theme" } 只有blue-theme类里面引用这些样式
你不能用 sass的 @import 直接导入一个原始的 css 文件，因为 sass 会认为你想用 css 原生的 @import。但是，因为 sass 的语法完全兼容 css，所以你可以把原始的css文件改名为 .scss 后缀，即可直接导入了。

4.注释

// 这种注释内容不会出现在生成的css文件中

/* 这种注释内容会出现在生成的css文件中 */

5.混合器

　　@mixin @include 支持嵌套

　　@mixin rounded-corners {

　　　　-moz-border-radius: 5px;

　　　　-webkit-border-radius: 5px;

　　　　border-radius: 5px;

　　　　li{color:#fff;}

　　}

   notice {

          background-color: green;

          border: 2px solid #00aa00;

          @include rounded-corners;

   }
   混合器传参 传的参数也可设置默认值 $normal:red

   @mixin link-colors($normal, $hover, $visited) {

     color: $normal;

        &:hover { color: $hover; }

        &:visited { color: $visited; }

   }
  a { @include link-colors(blue, red, green); }

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

6.继承@extend

　　.error { border : 1px solid red }

　　.seriousError {

　　　　@extend .error ;

　　　　border-width : 3px ;

　　 }　　继承error的同时，会继承到之外的属性，如 .error a { color : red }，则seriousError下面的a同样继承

7.函数@function

　　$rem:16 ;

　　@function rem($val) {
　　　　@return $val/$rem+rem;
　　}

　　.header { font-size: rem(32) }　　编译　　.header { font-size: 2rem }

8.@if,@for,@each和@while

@if

　　$boolean: true !default;

　　@mixin showHide {

　　　　@if $boolean { display: block; }

　　　　@else { display: none; }

　　 }

　　 .visible { @include showHide ; }　　/*编译*/　　.visible { display:block }

@for

　　$class-base: nav !default;

　　@for $i from 1 through 3 {

　　　　.#{$class-base}-#{$i}{ width: 60px + $i; }

　　}　　编译　　.nav-1 { width: 61px; }　　.nav-2 { width: 62px; }　　.nav-3 { width: 63px; }

　　@for $i from 1 to 3 {

　　　　.#{$class-base}-#{$i}{ width: 60px + $i; }

　　}　　编译　　.nav-1 { width: 61px; }　　.nav-2 { width: 62px; }

@each

　　$list: adam john ;

　　@mixin author-images {

　　　　@each $author in $list {

　　　　　　.photo-#{$author} {

　　　　　　　　background: url("/images/avatars/#{$author}.png") no-repeat;

　　　　　　　}

　　.author-bio { @include author-images; }　　编译　　

　　.author-bio .photo-adam { background: url("/images/avatars/adam.png") no-repeat; }

　　.author-bio .photo-john { background: url("/images/avatars/john.png") no-repeat; }

@while

　　$types: 4;

　　$type-width: 20px;

　　 @while $types > 0 {

　　　　.while-#{$types} { width: $type-width + $types; }

　　　　$types: $types - 1;

　　}　　编译　　.while-4 { width: 24px; }　　 .while-3 { width: 23px; }　　 .while-2 { width: 22px; }　　 .while-1 { width: 21px; }

巴特西

sass的使用

最新文章

热门文章