ass学习笔记2

今天介绍sass在重用代码时最具威力的两个功能。一个是嵌套(Nesting)，一个混合（Mixin）。

我们在写CSS通过需要多个后代选择器组合到一起才能定位到目标元素上，而这定义过程，此元素的父元素与其他选择器都有许多相同的部分，嵌套就是把这些相同的部分放到某一层花括号里，然后通过花括号的层层缩进堆砌，找到它们的共性与特性。

@charset "utf-8";//必须设置了这个才能编译有中文的注释
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
 
    li { display: inline-block; }
 
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}
//------------------------------
nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

当某一天，我们要兼容IE678等低级浏览器，发现它直接用nav不行时，需要改成.nav，我们只要改一处就行了，这大大提高维护性。

sass的嵌套包括两种：一种是选择器嵌套；另一种是属性嵌套。

选择器嵌套是指在一个选择器里面能出现多重花括号，里面的每一重花括号前的选择器会在编译后，直接在前面加一个空白（后代选择器）跟在前方选择器的后面。 如果你不想它们之间出现后代选择器，可以在选择器的前面加一个&进行处理。

@charset "utf-8";//必须设置了这个才能编译有中文的注释
#top_nav{
    line-height: 40px;
    text-transform: capitalize;
    background-color:#333;
    li{
        float:left;
    }
    a{
        display: block;
        padding: 0 10px;
        color: #fff;
 
        &:hover{
            color:#ddd;
        }
    }
}
//------------------------------
nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

属性嵌套，与前面的语法差不多，不同的是前面的选择器跟着一个冒号，那么编译后，它就像它转换为一个横扛与后面的选择器连接成一个单词。

@charset "utf-8";//必须设置了这个才能编译有中文的注释
.fakeshadow {
    border: {
        style: solid;
        left: {
            width: 4px;
            color: #888;
        }
        right: {
            width: 2px;
            color: #ccc;
        }
    }
}
//------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; }

sass3.3还添加了一个@at-root，用于跳出嵌套的，但我觉得现在说会破坏文章的流程，跳过。

本文的第二个重点是@mixin，其实就相当于JS的函数，并且在传参方面，已经拥有es6、es7的一些新功能了。

为了与内置方法的风格保持一致，建议大家都使用ruby风格(全部小写，并通过横杠连接)。 它的参数与变量名要求一致，需要以$打头，多个参数与逗号分开。如果参数有默认值，后面跟冒号再跟默认值。 如果想在其他地方使用这个函数，需要通过@include关键字来声明一下。

@charset "utf-8";//必须设置了这个才能编译有中文的注释
@mixin center-block{//没有参数
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block();//小括号可以不写，但建议大家都写
}
 
@mixin opacity($opacity:50) {//有参数，并且有默认值
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
.opacity{
  @include opacity(); //使用默认值
}
.opacity-80{
  @include opacity(80); //使用传参
}
//------------------------------
.demo {
  margin-left: auto;
  margin-right: auto; }
 
.opacity {
  opacity: 0.5;
  filter: alpha(opacity=50); }
 
.opacity-80 {
  opacity: 0.8;
  filter: alpha(opacity=80); }

我们用@mixin搞一个兼容IE67的浮动函数练练手！

$lte7:true;
@mixin float($float:left) {
  float: $float;
  @if $lte7 {
    display: inline;
  }
}

再来一个创建小三角形的函数

@charset "utf-8";//必须设置了这个才能编译有中文的注释
@mixin triangle($direction, $size, $borderColor ) {
  content:"";
  height: 0;
  width: 0;
 
  @if $direction == top {
    border-bottom:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  }
  @else if $direction == right {
    border-left:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  }
  @else if $direction == bottom {
    border-top:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  }
  @else if $direction == left {
    border-right:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  }
}
.top-arrow {
  @include triangle(top, 1px, red)
}
//------------------------------
.top-arrow {
  content: "";
  height: 0;
  width: 0;
  border-bottom: 1px solid red;
  border-left: 1px dashed transparent;
  border-right: 1px dashed transparent; }

@content传参机制，它相当于在@include 调用语句后添加了一对括号，括号里的内容当作额外的参数来替换 @content所在的位置。 此特性在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。

@charset "utf-8";//必须设置了这个才能编译有中文的注释
@mixin max-screen($res){//参数一
  @media only screen and ( max-width: $res )
  {
    @content;//参数二
  }
}
 
@include max-screen(480px) {//传参一
  body { color: red }//传参二
}
//------------------------------
@media only screen and (max-width: 480px) {
  body {
    color: red; } }

此外，sass还有占位符及与它配套使用的@extend，它们的用法与@mixin, @include相差无几，以后再说。

@function函数，此函数能对样式的规则的属性值进行更精致的计算，并且调用时不需要@include，相当的方便。许多内置函数就是由它创建的。

//颜色处理
　　lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c
    rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
    rgba(blue, 0.2)    => rgba(0, 0, 255, 0.2)
 
//这个函数将一个颜色格式化成ie滤镜使用，在做css3使用滤镜兼容的时候用得上
    ie-hex-str(#abc) => #FFAABBCC
    ie-hex-str(#3322BB) => #FF3322BB
    ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00

为数组添加更多方法

//定义first()函数，获取列表中的第一个列表项
@function list-first($list){
    @return nth($list,1);
}
 
//定义last()函数，获取列表中的最后一个列表项
@function list-last($list){
    @return nth($list,length($list));
}
 
//移除数组某个元素
@function remove($list, $value, $recursive: false) {
  $result: ();
 
  @for $i from 1 through length($list) {
    @if type-of(nth($list, $i)) == list and $recursive {
      $result: append($result, remove(nth($list, $i), $value, $recursive));
    }
 
    @else if nth($list, $i) != $value {
      $result: append($result, nth($list, $i));
    }
  }
 
  @return $result;
}
 
$list: a, b z, c, z, d, z, e, f;
$new-list: remove($list, z);       // a, b z, c, d, e, f;
$new-list: remove($list, z, true); // a, b, c, d, e, f
//在某一位置上删除元素
@function remove-nth($list, $index) {
  $result: null;
 
  @if type-of($index) != number {
    @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
  }
 
  @else if $index == 0 {
    @warn "List index 0 must be a non-zero integer for `remove-nth`.";
  }
 
  @else if abs($index) > length($list) {
    @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
  }
 
  @else {
    $result: ();
    $index: if($index < 0, length($list) + $index + 1, $index); 
 
    @for $i from 1 through length($list) {
      @if $i != $index {
        $result: append($result, nth($list, $i));
      }
    }
  }
 
  @return $result;
}
 
$list: a, b, z, c, d, e, f;
$new-list: remove-nth($list,   3); // a, b, c, d, e, f
$new-list: remove-nth($list,   0); // error
$new-list: remove-nth($list,  -2); // a, b, z, c, d, f
$new-list: remove-nth($list, -10); // error
$new-list: remove-nth($list, 100); // error
$new-list: remove-nth($list, zog); // error
//对数组进行切片操作
@function slice($list, $start: 1, $end: length($list)) {
  $result: null;
 
  @if type-of($start) != number or type-of($end) != number {
    @warn "Either $start or $end are not a number for `slice`.";
  }
 
  @else if $start > $end {
    @warn "The start index has to be lesser than or equals to the end index for `slice`.";
  }
 
  @else if $start < 1 or $end < 1 {
    @warn "List indexes must be non-zero integers for `slice`.";
  }
 
  @else if $start > length($list) {
    @warn "List index is #{$start} but list is only #{length($list)} item long for `slice`.";
  }
 
  @else if $end > length($list) {
    @warn "List index is #{$end} but list is only #{length($list)} item long for `slice`.";
  }
 
  @else {
    $result: ();
 
    @for $i from $start through $end {
      $result: append($result, nth($list, $i));
    }
  }
 
  @return $result;
}
}
 
$list: a, b, c, d, e, f;
$new-list: slice($list, 3, 5);   // c, d, e
$new-list: slice($list, 4, 4);   // d
$new-list: slice($list, 5, 3);   // error
$new-list: slice($list, -1, 10); // error
 
//反转数组
@function reverse($list, $recursive: false) {
   $result: ();
 
   @for $i from length($list)*-1 through -1 {
      @if type-of(nth($list, abs($i))) == list and $recursive {
        $result: append($result, reverse(nth($list, abs($i)), $recursive));     
      }
 
      @else {
        $result: append($result, nth($list, abs($i)));
      }
   }
 
   @return $result;
}
$list: a, b, c d e, f, g, h;
$new-list: reverse($list);       // h, g, f, c d e, b, a
$new-list: reverse($list, true); // h, g, f, e d c, b, a
//函数全部来自 http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/

我们再创建一个页面看看unshift方法的效果

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    <body>
        <div class="text">司徒正美</div>
        <a href="http://www.cnblogs.com/rubylouvre">这是链接</a>
    </body>
</html>
@charset "utf-8";//必须设置了这个才能编译有中文的注释
$list: b, c, d, e, f;
@function unshift($list, $value) {
    @return join($value, $list);
}
$newlist: unshift($list, a);               // a, b, c, d, e, f
body{
    background: blanchedalmond;
}
.text{
    &:after{
        color:red;
        display:block;
        border:1px solid red;
        content: "#{$newlist}";
    }
}
//------------------------------
 
body {
  background: blanchedalmond; }
 
.text:after {
  color: red;
  display: block;
  border: 1px solid red;
  content: "a, b, c, d, e, f"; }

我们再定义一个将rem转换为px的函数：

@charset "utf-8";//必须设置了这个才能编译有中文的注释
$pixelBase : 16;
$px-only:true;
@function parseInt($n) {
    @return $n / ($n * 0 + 1);
}
 
@function rem2px($values){
 
    $list: ();
 
    @each $value in $values { //遍历数组
        $unit : unit($value); //取得其单位
        $val  : parseInt($value); //取得其值
        @if ($px-only) and ($unit == 'rem') {
            $list: append($list, ($val * $pixelBase) + px);
        }
        @else if($unit == 'px') or ($unit == 'rem'){
            $list: append($list, $value);
        }
        @else {
            @warn 'There is no unit conversion for #{$unit}';
        }
    }
    @return $list;
}
 
body * {
    margin:rem2px(1rem 2rem 20px 3rem);
    padding-bottom:rem2px(0.25rem);
    font-size:rem2px(0.875rem);
}
//------------------------------
body * {
  margin: 16px 32px 20px 48px;
  padding-bottom: 4px;
  font-size: 14px; }

有了函数，sass就真正算是一门编程语言了！~

 
 
 
 
转载自：

Ruby's Louvre，司徒正美的博客。

sass2:的更多相关文章

  1. 使用gulp解决外部编辑器修改Eclipse文件延迟更新的问题

    本人前端用惯了Hbuilder,修改了eclipse项目中的文件后,由于是外部编辑器修改过的,eclipse不会自动部署更新,一般按F5刷新项目,或者在 preferences > genera ...

  2. 使用gulp解决外部编辑器修改Eclipse文件延迟刷新

    本人前端用惯了Hbuilder,修改了eclipse项目中的文件后,由于是外部编辑器修改过的,eclipse不会自动部署更新,一般按F5刷新项目,或者在 preferences > genera ...

  3. 浅谈stylus与sass的对比

    all we konw , 这两个都是css的预编译工具,但虽然都是编译工具,但还是存在差别的,下面来讲讲其中的区别 1.变量 sass定义变量是以这种形式进行定义的$xxx:10;而stylus的定 ...

随机推荐

  1. VS2012使用中容易出现的小问题（长期更新，错多少记多少）

    1:各种属性之间一定要有空格!比如id 和 runat中间一定要有,在编译系统里虽然也能显示红色,但是...调试的时候一定会报错!而且这样的错误很难发现(相信我曾经花了半个小时才找出问题) 2:在类中 ...

  2. 移动APP的开发需求分析

    一.项目概况 项目名称为上海地铁游.本项目是以上海地铁为线索,开发的一个移动APP.主要目的是帮助用户实现根据当前位置选择最方便的地铁旅游点和旅游推荐,方便出行,让更多人可以借助地铁的便利去认识和体验 ...

  3. Python爬网获取全国各地律师电话号

    [本文出自天外归云的博客园] 从64365网站获取全国各地律师电话号,用到了python的lxml库进行对html页面内容的解析,对于xpath的获取和正确性校验,需要在火狐浏览器安装firebug和 ...

  4. (转)深入浅出 妙用Javascript中apply、call、bind

    原文连接 深入浅出 妙用Javascript中apply.call.bind 网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且 ...

  5. c++多线程の数据竞争和互斥对象

    看两个代码: void function() { ;i>;i--) { cout<<"from sub thread"+i<<endl; } } vo ...

  6. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  7. 深入理解 '0' "0" '\0' 0 之间的区别

    看来基础还是很重要的,基础不扎实就难以学好c语言,就别说写出高质量的c语言代码了.今天,我就被这个问题折磨的不行了,哈哈,不过现在终于明白了‘\0’ ,‘0’, “0” 之间的区别了.困惑和快乐与你分 ...

  8. 。U盘安装CentOS6.5

    最近着手自学Linux,网上有很多CentOS的各种版本,但查阅到的教程基本都是关于CentOS6的,本着最新的版本并不一定是最适合的版本的原则,我选择安装CentOS6.5.安装系统稍微不注意就会出 ...

  9. mysql的分区和分表

    分区 分区就是把一个数据表的文件和索引分散存储在不同的物理文件中. mysql支持的分区类型包括Range.List.Hash.Key,其中Range比较常用: RANGE分区:基于属于一个给定连续区 ...

  10. 人工神经网络ANNs

    参考: 1. Stanford前向传播神经网络Wiki 2. Stanford后向传播Wiki 3. 神经网络CSDN blog 4. 感知器 5. 线性规划 6. Logistic回归模型 内容: ...