sass学习笔记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  $end {
    @warn "The start index has to be lesser than or equals to the end index 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就真正算是一门编程语言了！~

sass学习笔记2

时间： 2024-10-13 08:05:53

sass学习笔记2的相关文章

Sass学习笔记（补充）

阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@debug命令.@warn命令 9. 使用Sass时的注意事项 相关链接:Sass学习笔记前篇 Sass关于颜色函数的乐趣 在Sass学习笔记前篇,记载了Sass安装.基本用法.编程语法,在这篇,将补充在前篇未记载的知识. 1. Sass和SCSS的区别 参考链接:http://sass.bootcss

Sass学习笔记

阅读目录 一. Sass安装 1.1 Ruby安装 1.2 运行gem命令 1.3 安装Sass 二. Sass基本用法 2.1 导入 2.2 注释 2.3 变量 2.4 嵌套 2.5 继承 2.6 占位符 2.7 混合宏 三. Sass编程 3.1 数学计算 3.2 条件 3.3 循环 3.4 函数 Sass被称为"CSS预处理器",就是用一种编程的思想去写CSS样式表.在还没接触Sass的时候,很多人都不愿意去了解,认为都会了CSS,为什么还要去写Sass,Sass最终生成的还是C

Sass学习笔记之入门篇

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装   2.更新sass gem update sass 3.卸载(删除)sass gem uninstal

sass学习笔记-安装

Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本. Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby.在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示: Ruby 安装完成后,在开始菜单中找到新安装的 Ruby

sass学习笔记-输出方法

1.嵌套输出方式 nestedSass 提供了一种嵌套显示 CSS 文件的方式.例如 nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 在编译的时候带上参数“ --style nested”: sass --watch test.scss:test.

Sass学习笔记 -- 变量及变量作用域历史遗留问题

sass有两种后缀名文件: 一种后缀名为sass,写选择器时不能使用大括号和分号 一种后缀名为scss,使用大括号和分号 //后缀名为sass的语法,不能出现大括号和分号 $highlight-color: #abcdef .selected   border: 1px $highlight-color solid    //后缀名为scss的语法,跟css一样,需要大括号和分号 $highlight-color: #abcdef; .selected{   border:1px solid $

Sass学习笔记 -- 初步了解函数、运算、条件判断及循环

函数 sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始.sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的第一个参数都是颜色值,第二个参数都是百分比. //scss $baseFontSize:      10px !default; $gray:    

sass学习笔记1

less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个注意点,sass可以用sass后缀名,也可以用scss后缀名.前者比较恶心,像python一样没有花括号,也不让写分号,散架子一样.因此推荐用scss,这个也是目前我遇到的大部分人的选择. 关于中文编译出错的问题,需要指定字符集. @charset "utf-8";//必须设置了这个才能编

菜鸟的 Sass 学习笔记

介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass 是世界上最成熟稳定强大的css扩展语言. sass并不是一种编程语言,但是我们可以用于开发网页样式,你可以称它为css预处理器.用sass来写css,然后再编译成正常的css文件. css兼容:Sass与所有版本的CS