sass 学习笔记

Sass

安装Sass

1. 安装Ruby：
2. 安装Sass: gem install sass
3. 安装Compass:sudo gem install compass

创建工程

1. 使用Sass创建: 随便创建个文件夹就是使用sass创建了个工程
2. 使用Compass创建: compass create

使用命令行

1. 编译Scss: sass demo.scss demo.css
2. 监视Sass文件: sass --watch demo.scss:demo.css
3. 监视文件夹: sass --watch :
4. 编译Sass: compass compile [--force]
5. 监视文件夹: compass watch
6. 四种输出风格(style): nested expanded compact compressed
   • sass --style
eg: compass compile [--force] -s compressed

定义变量

1. 变量:

   div {
       $color: red; 
       color: $color
    }```
   

2. 全局变量:

   $color: red !global; 
   div {
       color:$color
    }```
   

3. 默认变量:

   $fontSize: 16px !default; 
   div {
       font-size:$fontSize
    }```
   

4. 多指变量:

   $paddings: 2px 3px 4px 5px; 
   div {
       padding: $paddings; 
       padding-left: nth($paddings,1)
    }
    $mapcolors:(redcolor:red, bluecolor:blue);
    div {
        color: map-get($mapcolors, redcolor)
    }
   

5. 变量特殊用法:

   $classname: container;
   .#{$classname} {
        color: red
    }
   

导入样式文件

1. 部分文件:
   命名'_'开头 eg:_demo.scss(编译时不会被生成css文件)
2. 嵌套导入:

• @import '_ddemo.scss'
  or
  @import 'ddemo'

1. 原生CSS导入
   • 被导入文件的名字以.css结尾:
     @import 'demo.css';
   • 被导入文件的名字是一个url地址:
     @import 'http://xxx/demo.css';
   • 被导入文件的名字是CSS的url()值:
     @import url(demo.css);

嵌套

1. 选择器嵌套

   div {
        span{
            color: red
        }
    }
   

2. 属性嵌套

    div {
        background: {
            color: red;
            size: 100% 50%;
        }
    }
   

3. & -- 引用父选择器

    a {
        color: red;
        &:hover {
            color: blue
        }
        &.content {
            color: green
        }
    }
   

4. @at-root 跳出嵌套
   默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root(without: media),@at-root(without: support).这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support）。默认@at-root其实就是@at-root(without:rule)

    div {
        @at-root span {
            color: yellow
        }
        @media screen and (max-width: 600px) {
            @at-root (without: media) {
                .container {
                    background: red;
                }
            }
        }
        @media screen and (max-width: 600px) {
            @at-root (without: media rule) {
                .container {
                    background: red;
                }
            }
        }
    }
   

5. @at-root与& 综合使用

    .text-info {
        color: red;
        @at-root nav & {
            color: blue
        }
    }
   

继承

1. 简单继承

   .div {
       background: red
   }
   
   .span {
       @extend .div;
       color: blue
   }
   

2. 多继承

• 多个@extend

  .dbody {
      font-size: 16px
  }
  
  .ddiv {
      background: red
  }
  
  .dspan {
      //@extend .dbody,.ddiv;
      @extend .dbody;
      @extend .ddiv;
      color: blue
  }
  

3. 链型继承

    .dbody {
        font-size: 16px
    }
   
    .ddiv {
        @extend .dbody;
        background: red
    }
   
    .dspan {
        @extend .ddiv;
        color: blue
    }
   

4. 继承的局限性

• 包含选择器、相邻兄弟选择器 不能被继承
• 如果被继承的元素是a，恰巧这个元素a又有hover状态的形式，那么hover状态也会被继承

5. 继承交叉合并:避免使用，结果不可预期

    span a {
        font-size: 18px;
    }
   
    div .content {
        @extend a;
        color: red
    }
   

6. 继承的作用域

    .one {
        color: red
    }
   
    @media screen and (max-width: 600px) {
        
        .two {
            color: blue
        }
        .test {
            // @extend .one     //is wrong;
            @extend .two //is right 
        }
    }
   

占位选择器 %

```css
%allsty {
    margin: 0;
    padding: 0
}

.one {
    @extend %allsty;
    color: red
}
```

数据类型

1. 数字类型

   $n1: 1.2;
   $n2: 12;
   $n3: 12px;
   p {
       font-size: $n3
   }
   

2. 字符串类型

   $s1: container;
   $s2: 'container';
   $s3: "container";
   p {
       font-size: $s1
   }
   

3. boolean类型

   $bt: true;
   $bf: false;
   p {
       @if $bt {
           color: red
       }
   }
   

4. null类型

   $isnull: null;
   p {
       @if $isnull==null {
           color: red
       }
   }
   

5. color类型

   $c1: red;
   $c2: #fff;
   $c3: rgba(255, 255, 255, .5);
   p {
       color: $c2
   }
   

6. map类型

   $mapcolor: (sblue: blue, sred: red, syellow: yellow);
   p {
       color: map-get($mapcolor, sblue)
   }
   

7. list类型

   $list:(#b4d455, 42, "awesome");
   p {
       color: nth($list, 1)
   }
   

变量操作：== != < > <= => + - * / %

```css
$width1: 10px;
$width2: 15px;
p {
    width: $width2 - $width1
}

a:hover {
    cursor: e + -resize
}

a::before {
    content: "ab" + c
}

a::before {
    content: a + "bc"
}

$version: 3;
p::before {
    content: "sass version #{$version}"
}

p {
    font-size: (20px * 10);
    font-size: (20px / 10);
    font-size: (20px + 10px);
    font-size: (20px - 10);
}
```

mixin

1. 简单示例

   @mixin colors {
       color: red
   }
   
   div {
       @include colors()
   }
   
   @mixin inst($color:red, $size:16px) {
       color: $color;
       font-size: $size
   }
   
   div {
       @include inst(blue, 18px)
   }
   
   div {
       @include inst($size: 18px)
   }
   
   div {
       @include inst()
   }
   

2. 多值参数

   @mixin paddings($pv...) {
       padding: $pv
   }
   
   div {
       @include paddings(5px, 6px, 7px, 8px)
   }
   

3. 传递内容

   @mixin style-for-oo($pv...) {
       div {
           @content
       }
   }
   
   @include style-for-oo {
       font-size: 18px
   }
   
   @include style-for-oo {
       color: red;
       font-weight: 200
   }
   

函数

1. 内置函数

   p {
       z-index: str-length($string: "abcdefg");
   }
   
   p {
       z-index: str-index($string: "abcdefg", $substring: "cde");
   }
   

2. 自定义函数

   @function double($width) {
       @return $width * 2
   }
   
   p {
       width: double(10px)
   }
   

调试指令

  ```css
@debug 'this is debug';
@warn 'this is warn';
@error 'this is error'
```

控制指令和表达式

1. if语句

   if( expression, value1, value2 )
   

   eg:

   div {
       color: if(1+1==2, red, blue)
   }
   

2. @if语句

   @if expression {
   // CSS codes
   } @else if condition {
   // CSS codes
   } @else {
   // CSS codes
   }
   

   eg:

   $type: audi;
   p {
       @if $type==benz {
           color: red;
       }
       @else if $type==mahindra {
           color: blue;
       }
       @else if $type==audi {
           color: green;
       }
       @else {
           color: black;
       }
   }
   

3. @for语句

   @for $var from  through 
   

   eg:

   @for $i from 1 through 4 {
       .p#{$i} { padding-left : $i * 10px; }
   }
   

   @for $var from  to 
   

   eg:

   @for $i from 1 to 4 {
       .p#{$i} { padding-left : $i * 10px; }
   }
   

4. @each语句

   @each $var in 
   

   eg:

   @each $color in red, green, yellow, blue {
       .p_#{$color} {
           background-color: #{$color};
       }
   }
   
   

   @each $var1, $var2, $var3 ... in 
   

   eg:

   @each $color, $border in (aqua, dotted),(red, solid),(green, double){
       .#{$color} {
           background-color : $color;
           border: $border;
       }
   }
   
   

   @each $var1, $var2 in 

   eg:

   @each $header, $color in (h1: red, h2: green, h3: blue) {
       #{$header} {
           color: $color;
       }
   }
   

5. 语句

   while(condition) {
   // CSS codes
   }
   

   eg:

   $i: 50;
   @while $i>0 {
       .paddding-#{$i} {
           padding-left: 1px * $i;
       }
       $i: $i - 10;
   }