10. sass学习

更换sass源

官网：ruby

gem update --system
gem -v
gem sources --add https://gems.ruby-china.com/ --remove h
gem sources -l

bundle config mirror.https://rubygems.org https://gems.ruby-china.com

gem install sass
gem install compass

常用命令

项目构建

1. 编译目录
2. 资源目录

使用方法

使用变量

$sass-style: red;
div{
    color:$sass-style;
}

规则

• 下划线等同于-

--style=nested//嵌套（默认）
--style=expanded//展开
--style=compact//紧凑
--style=compressed//压缩

&

&相当于当前选择器从顶级选择器到当前选择器的夫选择器组

@mixin

运算

map

$mapObj:(
    c1:red,
    c2:blue,
    c3:black
);

.string-test{
    color: map-keys($mapObj);
    color: map-values($mapObj);
    color: map-get($mapObj, c2 );
    color: map-has-key($mapObj, c3 );
}

逻辑控制

@echo $key,$item in $map{
    //.... 
}

@if 3<5{
    //....
}@else if 4>7{
    //...
}@else{
    //...
}

@for $i from 1 to 6{
//1,2,3,4,5，没有6
}
@for $i from 1 to 6{
//1,2,3,4,5,6，包括6
}

总结

- scss
  - 安装
    - ruby
    - 修改镜像
    - gem 安装sass，compress
  - 编译
    - 使用附加表达式
    - sass file1:file2 -w --style=expanded
  - 变量
    - $name
    - &:相当于父亲
  - 逻辑控制
    - @echo
    - @if $var in map
  - 运算
  - 附加
    - @include
    - @extend
  - map:$mapName:(k:v,k:v,k:v);
    - 方法
      - map-remove
      - map-keys
      - map-values
      - map-merge