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  --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 through ,注意范围包括和的值
@for KaTeX parse error: Expected '}', got '#' at position 31: …h 3 { .gray#̲{i3} {
color: #333$i;
}
}

//第二种格式 @for $var from to ,注意范围从开始运行，但不包括的值
@for KaTeX parse error: Expected '}', got '#' at position 27: … 4 { .gray2#̲{i3} {
color: #333$i;
}
}

each 循环语句 @each $var in

$name:“lili”,“yaya”,“sansa”; //注意数组list的写法
@each $i in KaTeX parse error: Expected '}', got '#' at position 18: …me { test9.#̲{i} {
width: 10px;
}
}

$name2:(name21:“lili”,name22:“yaya”,name23:“sansa”); //注意对象map的写法
@each $i in KaTeX parse error: Expected '}', got '#' at position 19: …e2 { test9.#̲{i} {
width: 10px;
}
}

$name3:(name31:1,name32:2,name33:3); //注意对象map的写法
@each $key,$value in KaTeX parse error: Expected '}', got '#' at position 19: …e3 { test9.#̲{key} {
width: 10px*$value;
}
}