sass 语法实例

sass基本语法

1.定义一个变量，变量定义以$开头，以冒号分隔开。

$blue:#1875e7;
div{
    color:$blue;
}

编译之后的css代码:
div {
  color: #1875e7; 
}

定义一个带默认值的变量。默认变量只需要在普通变量后面加上 !default

$baseLineHeight:1.5 !default;
$baseLineHeight:3;
body{
    line-height:$baseLineHeight;
}

编译后的css代码：
body {
  line-height: 3;
}

line-height的默认值是1.5，然后被3覆盖了，所以值是3. 和赋值的先后顺序无关，即使把默认值放到赋值的后面，结果也还是3.

此外，sass局部变量和全局变量（sass 3.4之后的版本才会有局部变量，3.4之前的都是全局变量）。变量值后面加上!global 变成全局变量。

/* sass3.4之后的版本 */
$fontSize:16px;
body{
    $fontSize:20px;
    font-size:$fontSize;
}
p{
    font-size:$fontSize;
} 

编译之后的css代码：
body {
  font-size: 20px; }

p {
  font-size: 16px; }//3.4之前的版本值是20px，因为都是全局变量

使用全局变量之后，sass 3.4之后才能转换成功

$fontSize:16px;
body{
    $fontSize:20px !global;
    font-size:$fontSize;
}
p{
    font-size:$fontSize;
} 

转换之后css代码：
body {
  font-size: 20px; }
p {
  font-size: 20px; }

变量作为属性名来使用(一般我们定义的变量都是属性值)，要以#{$variableName}形式。

$side:left;
div{
    border-#{$side}-radius:5px;
}
//转化之后的css代码：
div {
  border-left-radius: 5px; }

 2.变量复杂一点的用法，多值变量。多值变量分为list类型和map类型，list类似js数组，map类似js中的对象。list数据可以通过空格，逗号，小括号分隔多个值，常用的函数，nth($list,$index), length($list), append($list, $value, [$separator]).

$pxs:5px 10px 15px 20px;
h8{
    margin-left:nth($pxs,1);
    &:hover{
        margin-top:nth($pxs,2);
    }
}
//转换之后的css代码：
h8 {
  margin-left: 5px; 
}
h8:hover {
    margin-top: 10px; 
}

list另外一个栗子，

$pxs:5px,10px,15px,20px;
h9{
    $len:length($pxs);
    margin-right:nth($pxs,$len);
}
//转换之后的css：
h15 {
  margin-right: 20px; 
}

map类型的例子。。。map数据以key和value成对出现。看看w3cplus上的一个例子。开始的时候，总是转换失败，后面发现是sass版本的问题，我sass用的是3.4.21版本，之前用的是3.2.13老是转换失败，还以为是语法写的有错误呢。。。

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//转化过后的css
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

 3.嵌套，嵌套包括两种：选择器嵌套 和 属性嵌套。

选择器嵌套，在一个选择器中嵌套另一个选择器，通过&引用外层选择器。

$blue:#1875e7;
a{
    color:red;
    &:hover{
        color:$blue;
    }
}
//转换后的css
a {
  color: red; 
}
  a:hover {
    color: #1875e7; 
}

属性嵌套，有些属性拥有相同的前缀，可以提取出来，书写更方便。

/*属性嵌套*/
h16{
    margin:{
        left:5px;
        right:15px;
    }
}
//转换之后的css
/*属性嵌套*/
h16 {
  margin-left: 5px;
  margin-right: 15px; 
}

4.继承， 选择器的继承可以让选择器继承另一个选择器的所有样式，要使用关键词@extend ，后面紧跟要继承的选择器。

/*选择器的继承*/
.class1{
    border:1px;
}
.class2{
    @extend .class1;
    font-size:120%;
}
//转换之后的css
.class1, .class2 {
  border: 1px; 
}
.class2 {
  font-size: 120%; 
}

占位选择器% ，占位选择器的优势是，对于预先定义的基础样式，需要的时候使用@extend去继承它，不需要的时候，不会继承到。

    
%ir{
  color: transparent;
  border: 0;
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
  h2{
    width:500px;
  }
}
.ir{
  @extend %ir;
}
//转换之后的css
#header h1, .ir {
  color: transparent;
  border: 0; 
}
#header h1 {
  width: 300px; 
}
#header h2 {
  width: 500px; 
}

5.函数，sass已经定义好了很多函数，可以直接使用，如：length($list) ,nth($list,$n) .也可以自己定义一个函数使用@function。

下面是把px转换成rem的例子。

$baseFontSize:16px!default;
@function pxToRem($px){
    @return $px/$baseFontSize*1rem;
}
body{
    font-size:pxToRem(10px);
}
//转换之后的css
body {
  font-size: 0.625rem; 
}

6.混合（mixin），混合定义可重用的代码块，sass中通过@mixin来声明混合，@include来调用。

@mixin left($value:10px){
    float:left;
    margin-right:$value;
}
h16{
    @include left(5px);
}
h17{
    @include left();
}
//转换后的css
h16 {
  float: left;
  margin-right: 5px; 
}
h17 {
  float: left;
  margin-right: 10px; 
}

 @content 用来解决css3的@media问题。。。。。。。。。。。。

@mixin 可以接受一整块样式，接受的样式从@content开始。

@mixin max-screen($res){
    @media only screen and (max-width:$res){
        @content;
    }
}
@include max-screen(480px){
    body{color:red;}
}    
//转换后的css
@media only screen and (max-width: 480px) {
  body { color: red; } 
}

 7.条件判断及循环。

a.@if{}@else{} 

b.@if($condition,$if_true,$if_else)

c.@for($i from <start> through <end>) 包含end

d.@for($i from <start> to <end>) 不包含end

e.@each $item in <list or map>

之前在写@each 的时候碰到个问题。我之前使用的是sass3.2.13版本 对于对字段循环不支持，sass3.3.0之后的版本才会支持哦。不然转换时一直会报错，不能成功。

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//转换成css
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

 

把px转换成rem，支持同时输入多个值，以及一些特殊值如0的输入。

@function rem($values...) {
  $all_rem: ();
  $separator: list-separator($values);
  @each $value in $values {
    $rem: null;
    @if type-of($value) == list {
      // List: process each value on its own
      $rem: rem($value...);
    } @else if is_zero($value) {
      // Zero: enforce no units
      $rem: 0;
    } @else if need_convert($value) {
      // if need convert we will convert it to rem depend on the base font size.
      $base_font_value: strip_units($rem_font_size);
      $rem: (strip_units($value / $base_font_value) * 1rem);
    } @else {
      $rem: $value;
    }
    $all_rem: append($all_rem, $rem, $separator);
  }
  @return $all_rem;
}

@function strip_units($num) {
  @return $num / (($num * 0) + 1);
}
@function is_zero($value) {
  @return
    type-of($value) == number
    and strip_units($value) == 0;
}
@function need_convert($value) {
  $px_units: 'px', 'pt';
  @return
    type-of($value) == number
    and not unitless($value)
    and index($px_units, unit($value));
}

 测试一下

div{
    padding:rem(0 5px 0 10px);
}
//转换之后的css
div {
  padding: 0rem 0.3125rem 0rem 0.625rem; 
}