05月05, 2016

【Sass-02】Sass基础语法

Sass 简介

Sass stands for Syntactically Awesome Stylesheets Sass, and was created by Hampton Catlin. It's a way to simplify your CSS workflow, making development and maintenance tasks easier. Sass是一个能够CSS预编译的工具,能够提升开发效率。

Sass 语法

  1. 变量 变量通过$+变量名来定义

    $font-color:yellow;
    body{
    font-color:$font-color;
    }
    

    编译后

    body{
    font-color:yellow;
    }
    
  2. 嵌套

     nav{
         font-size:16px;
         ul{
         font-size:14px;
         {
     }
    

    编译后

     ```
     nav {font-size:16px;}
     nav ul{ font-size:14px;}
     ```
    
  3. Sass部件 如果以下划线_开头的scss文件,会被认为是sass的一部分,不会编译成.css文件。和import一起用。

     ![这里写图片描述](http://img.blog.csdn.net/20160504152438775)
    
  4. import

    import的时候不用加.scss后缀sass可以自动识别。

  5. Mixins

    函数定义方式:@mixin + 函数名称+ 参数,可以传入参数,通过@include来调用并传入参数。 这里写图片描述 编译后: 这里写图片描述

  6. Extends/Inheritance

    通过@extend关键字来继承一些公有属性。 这里写图片描述 编译后: 这里写图片描述

  7. Operators 操作符

    包括加减乘除和%.

    这里写图片描述 编译后: 这里写图片描述

本文链接:http://fengbaiyang.cn/post/sass-02.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~