前端学习笔记_sass

一、什么是sass

css预处理器，它的基本思想是：用一种专门的编程语言，进行网页样式设计，然后再编译成正常的css文件。

二、sass基本用法

变量：以$开头

$font-primary: "Microsoft YaHei","微软雅黑",sans-serif;

body{
    font-family: $font-primary;
}

如果变量需要嵌套在字符串中，就必须写在#{}中

$side: left;
.mydiv{
    border-#{$side}-radius: 10px;
}

计算功能

sass可进行简单的加减乘除

.layout{ width: 100%; }
.layoutRight{
    float: right; 
    width: 600px / 960px * 100%;
}
.layoutLeft{ 
    float: left; 
    width: 300px / 960px * 100%;
}

嵌套

选择器的嵌套，表示层级关系，使代码看起来整洁优雅

nav{
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li{
        display: inline-block;
    }
}

属性也可以嵌套

p{
    border:{
        color: red;
    }
}

在嵌套中使用&表示：引用父元素

a{
    &:hover{
        color: #333;
    }
}

注释

1. 标准的css注释： /* commit */，会保留到编译后的文件
2. 单行注释： //commit，只保留在sass源文件中，编译后省略
3. 在/*后加感叹号,表示“重要注释”，即使压缩模式编译，也会被保留，通常用于声明版权信息

/*!
    重要注释
*/

三、代码的重用

导入

sass中导入其他sass文件，最后编译为一个css文件，优于纯css的@import

ul{margin: 0; padding: 0;}  //单独的reset.scss文件

@import "reset";          //将reset.scss导入base.css文件
body{
      font-size: 20px;
}

%=>placeholder

placeholder,如果你不用@extend去使用，它不会被编译成css

%cjj{
    display: block;
    color: red;
}

span{
    @extend %cjj;
}

mixin

使用@mixin命令，定义一个代码块，使用@include调用mixin，它可以指定参数和缺省值

@mixin max-screen($result){
    @media screen and(max-width: $result){
        @content;
    }
}

使用：

@include max-screen(1200px){
    body{ width: 1100px; }
}

@include max-screen(480px){
    body{ width: 900px; }
}

生成浏览器前缀实例：

@mixin box-sizing ($sizing) { 
     -webkit-box-sizing:$sizing;
     -moz-box-sizing:$sizing;
     box-sizing:$sizing;
}

.box-border{   //调用
     border:1px solid #ccc;
     @include box-sizing(border-box);
}

/* 如果mixin和%同时使用，placeholder会提升到头部声明 */

继承/扩展

sass允许一个选择器继承另一个选择器

.mydiv1{
    border: 1px solid #ddd;
}

.mydiv2{
    @extend .mydiv1;
    color: lime;
}

颜色函数

sass提供一些内置的颜色函数，以便生成系列颜色

lighten(#cc3, 10%) // #d6d65c　　
darken(#cc3, 10%) // #a3a329　　
grayscale(#cc3) // #808080　　
complement(#cc3) // #33c

四、 自定义函数

sass允许用户编写自己的函数

@function cjj($n){
    @return $n * 2;
}

#side{
    width: cjj(10px);
}

参考文献：sass入门指南，sass用法指南-阮一峰