sass的使用

Posted 2021-01-31 luoshida

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;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}//同样也会继承到.error之外的其他属性如 .error a{} 则seriousError下面的a同样被继承