sass基础

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);
    }