sass基础

之前sass在项目中用的最多的就是嵌套（省事好多），其他功能没怎么用，今日重拾sass，想用得漂亮点，所以再去啃啃sass，当巩固下基础。anyway，记录下自己对sass的理解。

何为sass？

css预处理器。其实还有用的很多的less，stylus。

安装sass

必须先装ruby，再装sass。npm install sass-loader的时候特别久。。你会看到里面一堆的c++的东西。可以试试淘宝的npm镜像会快点。

sass监听

可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

    sass --watch index.scss:index.css        //watch a folder        sass --watch sassfile:cssfile

sass语法

变量

变量不用多说，就提一点。如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

    $left: left;    $size: 10px;        div {border-#{$left}-radius: $size;}

嵌套

嵌套按正常父子元素嵌套就够用了，其他属性嵌套可以不用，可读性差。拿出来说的就是hover的时候，使用&引用父元素。原先写css那种hover写法不管用。

   /*元素嵌套*/   div {       p {color: #fff;}              &:hover {color: #ddd;}   }   /*属性嵌套*/   p {　　　　border: {　　　　　　color: red;　　　　}　　}

继承

这个是我很喜欢的一个功能。假如两个元素在某些样式上一致，可以用继承。

    .sub-title {      color: #666;      margin: 0;      font-family: sans-serif;      text-align: center;      font-size: 32px;      font-weight: bold;      padding-top: 50px;    }        p {        @extend .sub-title;        background: #fff;    }        div {        @extend .sub-title;        text-shadow: 1px 1px 1px #ccc;    }

mixin

minxin在某个程度上和extend有点像，定义一段公共函数，再通过@include调用。还有一个常用功能就是用来生成浏览器前缀。

    @mixin radius ($direct, $value) {      border-#{$direct}-radius: $value;      -moz-border-#{$direct}-radius: $value;      -webkit-border-#{$direct}-radius: $value;    }        p {      @include radius(top, 10px);    }