sass

学习目标

1   安装好ruby环境   sass是基于ruby开发  gem

2   学会安装sass     gem install  compass

3   学会使用sass编译成css

4   学会使用sass的一些简单语法

5   学会使用sass编译十二栅格

1/安装ruby

    mac下面不需要安装ruby

    window下面安装ruby  需要下载  rubyinstaller   网站地址：https://rubyinstaller.org/

2  安装sass  理解 sass与compass的关系

    compass 其实是基于 sass来开发的  就相当于 js  与  jquery的关系

    这里我们可以把  sass 理解为js   compass 理解为 jquery

    安装命令  gem  install  compass

    在这里  我们可以查看sass是否安装成功   sass  -v

3   编译sass 的简单命令 

    1/  sass  demo1.scss  demo1.css
        只编译一次
    2/  sass --watch demo1.scss:demo1.css    
        监视sass文件的命令
    3/  监视文件夹：sass --watch <sass folder>:<css folder>
        示例：sass  --watch  sass:stylesheets   

    4/  全部编译： compass compile

    5/  监视文件夹： compass  watch
        每改一个编译一个
    6/  强制全部编译： compass watch --force

4  理解 config.rb
    
    require "compass/import-once/activate"

    关联示例：environment = :development开发环境 || :production 服务器环境
    http_path = "/"
    css_dir = "stylesheets"
    sass_dir = "sass"
    images_dir = "images"
    javascripts_dir = "javascripts"

    output_style = :expanded  设置压缩风格
    示例：output_style = (environment == :development) ? :expanded : :compressed
    这句话的意思是 看是在开发环境  还是在服务器环境

5  构建项目以及语法：

    1  构建compass工程  compass create hello(自定义)

    2  变量
        2.1局部变量
        body{
            语法： $color ：red ;
        }
        2.2 全局变量
        body{
            语法： $color ：red !global ;
        }
        2.3 多值变量 
        2.3.1 第一种类型：$paddings: 5px 10px 5px 10px;

                          如果只取第一个 padding-left:nth($paddings,1);
        2.3.2 第二种类型：
        map类型
        $maps: (color : red ,borderColor:blue);

        background-color:map-get($maps,color);
        注意： 这里的color为key值 类似于json

        2.4 定义id 或者class 
        示例： $className : main

              .#($className){
                width : 50px;
                hegiht: 50px;
              }

6  部分文件：
    以下划线开头命名 示例： _part.scss
    @import "part"  或者  @import "_part.scss"

7  选择器嵌套：

    body {
         background-color :red;
         header{
            background:green;
         }
    }
8  属性嵌套：
    
    footer{
        background:{
            color: red;
            size:100% 50%;
        }
    }
9   引用父类选择器：
    a{
        color:red;
        &:hover{
            color:blue;
        }
    }

10   跳出嵌套：
     @at-root .container{
        width:1104px;
     }
     注意：
     在 @media 中是无法跳出的
     示例：
        @media screen  and (max-width:600px){
            @at-root .container{
                background: red;
            }
        }
    那如何跳出：
        @media screen and （max-width:600px）{
            @at-root (without: media rule){
                .container{
                    background:red;
                }
            }
        }

11 / 继承

    单个继承：
    .alert{
        background-color :  red;
    }
    .alert-info{
        @extend .alert;
        color: red;
    }
    多个继承:
    .alert{
        background-color :  red;
    }
    .small{
        font-size:16ppx;
    }
    .alert-info{
        @extend .alert, .small;
        color: red;
    }

12  sass 进阶
    1 数据类型：
        Number   string  list  map  color  boolean  null

        //数字类型
        $n1: 1.2;
        $n2: 12;
        $n3:14px;
        p{
            font-size:$n3;
        }
        //字符串类型
        $s1:container;
        $s2:'container';
        $s3:"container";

        .#($s3){
            font-size:$n3;
        }

        //布尔  不常用
        $bt:ture;
        $bf:false;

        // null  不常用
        body{
            @if $null ==null{
                color:red;
            }
        }

        //颜色类型
        $c1: blue; $c2:#fff; $c3:raba(255,0,0,0.5);

//运算符
    <  >  ==  !=  + - 

13  Mixin  定义片段

    简单示例：
    @mixin cont ($color:red,fontSize:14px){
        color:$color;
        font-size:$fontSize
    }

    body{
        @include cont($fontSize:18px);
    }
    示例2：
    @mixin box-shadow($shadow...){
        -moz-box-shadow:$shadow;
    }

    .shadows{
        @include  box-shadow(0px 4px 4px #222,2px 6px 10px #622)
    }
    示例3：
    针对移动端 iphone 来调整

    @mixin style-for-iphone{
        @media only screen and (min-device-width:320px) and (max-device-width:640px){
            @content;
        }
    }

    @include style-for-iphone{
        font-size:10px;
    }

14 内置函数：
    
    rgb()  rgba()  
    darken(color, 0.5) 变深
    lighten(color,0.5)  变浅

15 自定义函数：
    
    @function double($width){
        @return  $width*2;
    } 

sass 高级

if 条件判断  注意不支持if...else...

.test8 {   //if...if..
    @if 1+1 == 2 {
        width: 20px;
    }
    @if 5 < 3 {
        width: 100px;
    }
}
.test81 {  //if...else if...
    @if 1+1 != 2 {
        width: 20px;
    }
    @else if 5 > 3 {
        width: 100px;
    }
}
.test82 {  //if...else if...else...
    @if 1+1 != 2 {
        width: 20px;
    }
    @else if 5 < 3 { 
        width: 100px;
    }
    @else {
        width: 10px;
    }
}

for 循环
//第一种格式 @for $var from <start> through <end>,注意范围包括<start>和<end>的值
@for $i from 1 through 3 {
    .gray#{$i*3} {
        color: #333*$i; 
    }
}

//第二种格式 @for $var from <start> to <end>,注意范围从<start>开始运行，但不包括<end>的值
@for $i from 1 to 4 {
    .gray2#{$i*3} {
        color: #333*$i; 
    }
}

each 循环语句  @each  $var in <list or map>

$name:"lili","yaya","sansa";  //注意数组list的写法
@each $i in $name {
    test9.#{$i} {
        width: 10px;
    }
}

$name2:(name21:"lili",name22:"yaya",name23:"sansa");  //注意对象map的写法
@each $i in $name2 {
    test9.#{$i} {
        width: 10px;
    }
}

$name3:(name31:1,name32:2,name33:3);  //注意对象map的写法
@each $key,$value in $name3 {
    test9.#{$key} {
        width: 10px*$value;
    }
}