SASS基础篇

sass的两种语法

.sass 类似ruby的语法
.scss 熟悉的类css语法 css文件改为scss文件只用直接改后缀名
sublime配置下编译会多出一个css.map文件 用来映射css与scss的关系,方便浏览器调试

@charset "UTF-8";//可以省略 默认
@import "variables"; //引入文件
/*
    sass中的@import与css中的@import的区别
    css中  1. @import必须放在代码的最前面 否则不起作用
           2.对性能不利 读到时候才去渲染 
           3.以下四种方式 sass以css模式去引入文件 不做任何处理
                a.引入文件以.css结尾
                b.引入文件以http：开头的字符串
                c.引入文件以url函数开头
                d.引入文件后面带有media queries的时候

    sass中 1. @import可以放再文档的任何地方
           2.重新定义引入方式 先合并再输出
           3.以逗号分隔，引入多个文件 @import "reset,variables";
           3.sass的既定规则
                a.没有文件后缀名的时候 sass会自动添加.scss或者.sass
                b.同一个目录下局部文件和非局部文件不能重名  
 */



body{
    background:#000;
    width:1010%;
}

/* 
   sass变量 通过$定义变量 
   变量通常用专们的文件存储 以下划线命名的局部变量如 _variables 
*/
$text-fff:#fff;
$text-555:#555;
.titone{
    color:$text-fff;
}
.tittwo{
    color:$text-555;
    &:hover{         //&是父类引入
        color:#fff;
    }
    font:{           //sass不仅提供样式嵌套还提供属性嵌套
        family:"微软雅黑";
        size:21px;
    };
}

/* 
    sass支持计算 并且计算可以带单位
*/
.tit3{
    height:(500px/2);

}


/* 
   变量操作
   1.直接操作变量
   2.通过函数 分为两类 (一般放在页面顶部或者另启文件)
        a.跟代码块无关的函数，多是自己的内置函数，称functions
        b.可重用的代码块，
            @include 的方式调用 @mixin
            @extend 的方式调用  class类名
*/

//@minxin
@mixin col-6{
    width:50%;
    color:"#666";
}
.tit4{
    @include col-6();
    &:hover{
        background-color: #555;
    };
}

@mixin col($width:50%){ //不传参 默认50%
    width:$width;
}

.tit5{
    @include col(20%);  
}

/* 
    类样式继承 @extend 
    a.extend 不可以继承选择器序列
    b.使用%，用来构建只用来继承的选择器
 */

.error{
    color:#f00;
}
.impotant{
    font-weight:blod;
}
.error.red{ //.red.serious-error同样会继承这个样式
    font-size:30px;
}

.serious-error{
    @extend .error,.impotant;
    border:1px solid #f00;
}
// ---------------
%a{
    font-size:18px;
}
.b{
    @extend %a; //b继承a，但是a不会被编译
}

//高级语法
@mixin sm-sreen($width:50%){
    @media(min-width: 768px){ //@media在scss中可以嵌套，编译时候才会提到css最外层
        width:$width;
        float: left;
    }

};
.warp{
    @include sm-sreen();
}

/* @at-root指令 明确输出到样式的最外层*/
.warp01{
    background:#555;
    @at-root{
        h1{
            font-size:50px;
        }
        .slogan{
            display: block;
        }
    }
}

/* @mixin进阶 */
@mixin mm_screen($width){
    width:$width;
    @if type-of($width) != number{
        @error "$width必须是一个数值类型，你输入的width是：#{$width}";
    }

};

.warp02{
    @include mm_screen(20%);
}