你的位置:首页 > 网页设计

[网页设计]Sass 基础(四)


当你想设置属性值的时候你可以使用字符串插入进来,另一个使用的用法是构建一个选择器。
      @mixin generate-sizes($class,$small,$medium,$big){
                  .#{$class}-small {font-size:$small;}
                  .#{$class}-medium{ font-size:$medium}
                  .#{$class}-big{ font-size:$big;}
            }
      @include gencerate-sizes("header-text",12px,20px,40px);
      编译出来的css
        .header-text-small { font-size:12px;}
        .header-text-medium{ font-size:20px;}
        .header-text-big{ font-size:40px;}
      第一个限制,这可能会很删除用于 Sass 变量的插值。
        $margin-big:40px;
        $margin-medium:20px;
        $margin-small:12px;
        @mixin set-value($size){
            margin-top:$margin-#{$size};
        }
        .login-box{
            @include set-value(big);
        }
        上面的代码编译出来,
            error style.scss(Line 5:Undefined variable:"$margin-".)
            所以,#{}语法并不能是随处可用的,你也不能在mixin中调用
            @mixin updated-status{
                  margin-top:20px;
                  background:#F00;
              }
            $flag:"status";
            .navigation{
              @include updated-#{$flag}
            }
      上面的代码在编译成css时同样会报错;
          error style.scss(Line7:Invalid css after"...nclude updated-*":expected"}",was"#{$flag};"
        幸运的是,可以使用 @extend 中使用插值。例如:
          %updated-status{
              margin-top:20px;
              background:#f00;
            }
          .selected-status{
              font-weight:bold;
           }
          $flag:"status";
          .nacigation{
                @extend $updated -#{$flag};
                @extend .selected-#{$flag};
            }
          编译出来的css
              .navigation{
                margin-top:20px;
                background:#f00;
              }
              .selected-status, .navigation{
                  font-weight:bold;
              }
注释
  在Sass 中注释有两种方式
    1.类似css 的注释方式,使用“/*”开头,结尾使用“*/”
    2.类似JavaScript的注释方式 使用“//”
    //定义一个占位符
      %mt5 {
          margin-top: 5px;
      }
    /*调用一个占位符*/
    .box {
        @extend %mt5;
      }
    编译出来的css
    .box{
        margin-top:5px;
    }
    /*调用一个占位符*/

数据类型
    Sass 和JavaScript 语言类型,也具有自己的数据类型,在Sass中包含以下几种数据类型。
    数字:如,1,2,13,10px,
    字符串:有引号字符串或无引号字符串,如“foo”,'bar',baz;
    颜色:如,blue,#04a3f9,rgba(255,0,0,0.5);
    布尔值:如,true,false;
    空值:如,null;
    值列表:用空格或者逗号分开,如,1.em 1em 0.2em Helvetica, Arial, sans-serif。

    SassScrip也支持其他css 属性值(property value),比如Unicode 范围,或者!important 声明。然而
    Sass 不会特殊对待这些属性值,一律视为无引号字符串。


字符串
    SassS支持CSS的两种字符串类型:
    有引号字符串(quoted strings),如“Lucida Grande”,'http://sass-lang.com';
    无引号字符串(unquoted strings),如sans-serifbold。
    使用 #{ }插值语句 (interpolation) 时,有引号字符串将被编译为无引号字符串,
    这样方便了在混合指令 (mixin) 中引用选择器名。
    @mixin firefox-message($selector){
        body.firefox-message($selector){
            content:"Hi Firefox users!";
          }
    }
    @include firefox-message(".header");
    编译为:
        body.firefox .header:before(content"hi,Firefox users!";)
    值列表
        所谓值列表(lists)是指Sass 如何出来css中;
      margin:10px 15px 0 0
    或者:
      font-face:Helvetica,Arial,sans-serif
    像上面这样通过空格或者逗号分隔的一系列的值。
        Sass列表函数(Sass list functions)赋予了值列表功能(Sass 进级会有讲解)
    1.nth函数(nth function) 可以直接访问值列表中的某一项;
    2.join函数(join function)可以将多个值列表连接在一起;
    3.append函数(append function)可以在值列表中添加值;
    4.@each规则(@each rule) 则能够给值列表中的每个项目添加样式。
      值列表中可以再包含值列表,比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。
      如果内外两层值列表使用相同的分隔方式,要用圆括号包裹内层,所以也可以写成 (1px 2px) (5px 6px)。
      当值列表被编译为 CSS 时,Sass 不会添加任何圆括号,因为 CSS 不允许这样做。
      可以用 () 表示空的列表,这样不可以直接编译成 CSS,比如编译 font-family: ()时,Sass 将会报错。
      如果值列表中包含空的值列表或空值,编译时将清除空值,比如 1px 2px () 3px 或 1px 2px null 3px。
加法
    在css中能做运算的,到目前为止仅有calc()函数可行,但在Sass 中,运算只是在基本特性之一,在Sass
    中可以做各种数学计算。
    (一),加法
    加法运算是Sass中运算的一种,在变量或属性中都可以做加法运算。如:
      .box{
          width:px +8in;
        }
      编译出来css
      .box{
        width;788px;
      }
    对于携带不同类型的单位时,在 Sass 中计算会报错
     如:
      .box{
          width:20px +1em;
       } 或报错 “Incompatible units: 'em' and ‘px'.”
减法
    $full-width:960px;
    $sidebar-width:200px;
    .content{
      width:$full-width - $sidebar-width;
    }
    编译出来的css 如下
      .content{ width:760px}
    同样的,运算时碰到不同类型的单位时,编译也会报错
      $full-width:960px;
      .content{
          width:$full-width - 1em;
      }
    编译器报“Incompatible units: 'em' and ‘px’.”错误。
乘法
    Sass中的乘法运算和前面介绍的加法和减法运算略有不同,虽然他也能够支持多种单位(比如em ,px,%)
      如:.box{
          width:10px *2px;
        }
    编译的时候报错“20px*px isn't a valid CSS value.”错误信息
    上面的实例可以修改成:
      .box{
        width:10px *2;
      }
    编译出来的css
      .box{
        width:20px;
      }
除法
    先来看一个简单的示例
      .box{
        width:100px / 2;
      }
    编译出来的css 如下
      .box{
        width:100px / 2;
        }
    只需要加上()即可:
    .box{
      width:(100px / 2)
     }
    编译出来
    .box{
        width:50px;
    }
    下面的示例:
    .box{
      width:100px / 2 + 2in;
    }
    编译出来css
    .box{
      width:242px;
    }
  在sass除法运算中,当变量进行除法运算时“/”符号也会被自动识别成除法。
    $width:1000px;
    $nums:10;
    .item{
      width:$width /10;
    }
  编译出来的css
    .item{
      width;100px;
    }

  .list{
      width:$width / $nums;
  }
    编译出来的css
  .item{
    width:100px;
  }
  .list{
    width:100px;
  }
变量计算
    在Sass中除了可以使用数值进行元素之外,还可以使用变量进行计算,
    例如:
      $content-width:720px;
      $content-width:220px;
      $gutter:20px;
    .container{
      width:$conter-width + $sidebar-width + $gutter;
      margin: 0 auto;
      }
   编译出来的css
    .container{
        width:960px;
        margin:0 auto;
    }
数字运算
    在Sass运算中数字运算是较为常见的,数字包括前面介绍的,加减乘除。
    例如:
    .box{
      width:((220px + 720px)-11*20)/12;
    }
    编译出来的css
    .box{
      width:60px;
    }
颜色运算
    所有算数运算都支持颜色值,并且是分段运算的。也就是说,红,绿和蓝各颜色分段单独进行运算。
    如:
      p{
        color:#010203 + #040506;
      }
    计算公式为01+04 =05, 02 +05 =07 和 03 + 06 = 09,
    如此编译出来的css为:
      p{
        color:#050709;
      }
    算数运算也能将数字和颜色值一起运算,同样也是分段运算的。
      p{
        color:#010203 * 2;
      }
    计算公式为01 * 2 =02, 02 *2 = 04 和03*2 = 06
      p{
        color:#020306;
      }
字符运算
  在Sass中可以通过加法符号 “+”来对字符串进行连接。 例如
  $content:"Hello" + "" +"Sass!";
   .box:before{
      content:"#{$content}";
    }
  编译出来的css
    .box:before{
      content:"Hello Sass!";
    }
  除了在变量中做字符串连接运算之外,还可以直接通过 +,把字符串连接在一起。
    div{
      cursor:e + -resize;
    }
  编译出来的css
    div {
      cursor:e-resize;
    }
   注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧),
   结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的
   字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。
   例如:
    p:before{
      content:"Foo" +Bar;
      font-family:sans- +"serif";
    }
  编译出来的的css;
    p:before{
      content:"foo Bar";
      font-family:sans-serif;
    }